[ReactJS로 영화 웹 서비스 만들기] #5 CONCLUSIONS

본 내용은 노마드코더 - ReactJS로 영화 웹 서비스 만들기 를 수강하며 작성되었습니다.

 

github 클라우드에 웹사이트 올리기

만든 웹사이트를 클라우드에 올리자. 터미널에 npm i gh-pages를 입력해 설치한다. gh-pages는 웹사이트를 github의 gihub page 도메인에 나타나도록 한다.

[git_user_name].github.io/[git 프로젝트 이름]을 주소창에 입력하면 아직은 업로드한게 없으므로 404라는 에러가 뜨는 페이지를 볼 수 있다.

터미널에 npm i gh-pages를 입력하고 package.json으로 가서 "hompage": "(http://[git_user_name].github.io/[git 프로젝트 이름])" 을 추가해준다. 이때 주소의 모든 글자는 소문자여야한다.그리고 터미널에서 npm run build를 하면 아래와 같이 build 파일이 생성된 것을 볼 수 있다.

이제 이 build 폴더를 package.json의 scripts에 "deploy" 에다 넣어준다. 그리고 scripts에 "predeploy":"npm run build"도 넣어준다. 이 코드는 deploy를 할 때마다 predeploy를 먼저 호출한다. predeploy는 npm run build를 호출한다.

deploy는 gh-pages를 호출하고 build폴더를 업로드한다.

 

이제 npm run deploy를 실행시켜보자.

run이 완료가 되면 다시 http://[git_user_name].github.io/[git 프로젝트 이름] 로 가보면

이렇게 잘 나오는 것을 볼 수 있다.

탭 부분이 아직 React App이라고 뜨니 이부분을 바꾸어주자. public > index.html로 가서 <title></title> 부분에 넣고싶은 웹페이지 제목을 넣어주자.

이제 다시 npm run deploy를 하면 잘 구동되는 것을 볼 수 있다.

 

※참고※ React Hook

우리는 더이상 state를 사용하기 위해 class를 쓰지 않아도 된다. react hook라는 것이 나왔기 때문이다. 이 부분은 다른 강의를 수강하며 작성하도록 하겠다.