5. Conclusions - 웹 서비스 만들기

Front-end/React.js

AGAL 2020. 3. 16. 20:06

0. Deploying to Github Pages

1. > npm i gh-pages gh-pages 설치 *gh-pages : 웹사이트를 github page 도메인에 나타나게해준다.

2. github에서 project 이름을 가져오고 * > git remote -v 를 통해 project 이름을 확인할 수 있다.

3. user name을 가져온다 *ex) agal2.github.io/nomadcoders-react1

4. pakage.json에서

4-1. 중첩되지 않고 "hompage" : "위에서 얻은 주소" 추가 *ex) "homepage": "agal2.github.io/nomadcoders-react1 "

4-2. "scripts" 속성에 중첩해서 "deploy" : "gh-pages -d build" 추가 *디렉토리 경로를 'build'로 하고 gh-pages를 호출한다.

4-3. "scripts" 속성에 중첩해서 "predeploy" : "npm run build" 추가

* deploy를 호출할 때 먼저 호출해서 npm run build를 실행한다.

* deploy와 이름이 같아야 pre가 동작된다. ex) predeploy, deploy

5. > npm run deploy deploy 스크립트를 실행시킨다.

6. 파일이 수정이 될 경우 > npm run deploy 실행시켜 업데이트 한다.

※ 주소에 접속했는데 read.me 파일만 보여질 때

: 저장소 → 설정(setting) → GitHub Pages → source를 'gh-pages branch'로 변경

* gh-pages 브랜치에 build 디렉토리 내의 파일이 있다.

# state를 갖기 위해 class component를 가질 필요가 없다. ⇒ react hook 때문에

*reack hook은 새로운 것이며, class component의 대체물이 아니다.