https://github.com/ge5rg2/react-for-beginners/commit/9af4fe48e5acc554f01f66b7311b1ea003072fdf
지난번 css과정까지 마친 movie app을 publishing 하려고 한다.
우선
$ npm i gh-pages
을 진행한다. gh-pages란
결과물을 github pages에 업로드할 수 있는 패키지를 말한다.
github pages는 html css js로 만든 파일을 웹사이트 형태로 무료 배포해준다.
1
package.json으로 가면
build가 있는데 해당 명령어를 입력해준다.
$ npm run build
그러면 production ready가 진행되는데 모든 코드가 압축되고 최적화된다는 것을 의미한다.
해당 작업이 완료되었다면, build라는 폴더가 생성되었을 것이다.(해당 폴더 내부에는 기존에 우리가 작성했던 코드들이 압축되어 있는 것을 확인할 수 있다)
2
최하단부에 와서 사진과 같이 hompage를 만들어준다. 이때 github앞에는 본인의 github username -> io/ 다음에는 현재 github repository를 작성하면 된다.
3
scripts로 돌아와서 deploy를 작성한다. deploy는 build 폴더를 아래에 있는 hompage를 gh-pages를 통해서 업로드하는 것이다.
하지만 deploy를 실행하려면 매번 $ npm run build를 작성해서 build 폴더를 만들어야하는데 번거롭기 때문에 predeploy를 하단에 작성해서 먼저 실행시키게 만들어준다.
완성된 웹사이트
https://ge5rg2.github.io/react-for-beginners/
'JavaScript > React JS' 카테고리의 다른 글
[React JS] CSS 적용한 Movie App (0) | 2022.02.17 |
---|---|
[React JS] React에서 css reset하기 (0) | 2022.02.16 |
[React JS] React에서 Font Awesome icon 적용하기 (0) | 2022.02.16 |
[React JS] 간단한 Movie App 만들기2 (0) | 2022.02.10 |
[React JS] 간단한 Movie App 만들기1 (0) | 2022.02.09 |