영화 보여주기 및 cloud(gh-pages)에 올리기

전에 axios를 async await을 사용하여 비동기로  정보를 가져온 적이 있다.

이제 이 정보를 가지고 영화제목 및 정보를 나타내려고한다.

가져온 값을 콘솔에 찍어보면 objetct가 출력이 되는데 

 

obj.data.data.movies안에 20개의 영화들이 들어있다.

componentDidMount가 되면 이 정보들을 가져와서 setState를하는 함수를 만들어 집어 넣었다. 이로인해 App component의 state에는 20개의 movie가 들어있다. 그리고 정보를 받아오면 isLoading은 false로 바꿔주자.

각 movie에 많은 정보들이 담겨있지만 우리가 이번에 써볼것은 아래와 같다.

따라서 Movie.js에 Movie component를 만들어준다. 이번에는 class component를 굳이 쓸 필요가 없다 왜냐하면 Moive 에서 state를 사용하지 않기때문이다. 따라서 function component를 사용해 만들어보자!

먼저 ES6문법을 통해 깔끔하게 isLoading과 movies를 가져온 뒤 큰 container를 만들어준다. 여기서 class가 아닌 className을 사용해야 하는데 그 이유는 class를 적게되면 react에서 class component인지 헷갈려하기 때문이다. 

삼항 연산자를 사용하여 isLoading의 값이 true라면 loader라는 div를 만들어주고 false라면 movies라는 div를 만들어 준다. div.movies 안에는 movies.map을 사용하여 Movie component를 여러개 만들어 준다. 그리고 우리가 사용할 정보를 보내준다.

받아온 정보를 div.movie안에 차곡차곡 담아주자 여기서 genres는 배열이므로 또 한번 map을 사용해주어야 한다. 여기서 key값을 주기위해 2번째 인자에 index를 추가해주었다. genre는 최대 두가지만 나오게 하였다. 그리고 summary가 0자이면 Not summary를 출력하고 아니면 최대 180자까지만 출력하도록 하였다.

 

Movie.css, App.css를 만들어 처음에 import를 해주었다. css는 아직 잘 모르기에 니코쌤꺼를 그대로 따라쓰고 필요한 부분만 조금 수정해주었다. 

이제 이 것을 cloud에 올려보려고한다.

gh-pages를 설치해줘야한다. 이건 우리의 웹사이트를 github의 github page 도메인에 나타나게 해준다.

우리에게 무료로 웹사이트를 제공해준다 

npm i gh-pages

 

위의url로 접속하면 404라고 뜬다. 왜냐면 아무것도 올리지 않았기 때문

설정해주기 위해선 먼저 package.json에 "homepage":"https://taehyeki.github.io/movie_app_2021"를 설정해주자 이건 gh-pages가 동작하는데 필요하다.

 

 

npm run build를 해보면 build라는 폴더가 생기고 우리가 지금까지 만들었던 것들이 다 압축되어 들어가 있다.

scripts에 deploy와 predeploy를 만들어주자 npm은 똑똑해서 deploy를 실행하기전에 predeploy를 실행한다.

"predeploy" : "npm run build"라고 해주면 알아서 자동으로 build가 되면서 build폴더가 생긴다. 굳이 우리가 일일이 npm run build를 할 필요가 없어진 것이다. "deploy":"gh-pages -d build"를 만들어줌으로써 build폴더를 업로드한다.

Movie App | taehyeki

Movie App | taehyeki

이젠 잘 업로드가 된 것을 확인할 수 있다.