본문 바로가기

JavaScript/React JS

[React JS] Movie App publishing

https://github.com/ge5rg2/react-for-beginners/commit/9af4fe48e5acc554f01f66b7311b1ea003072fdf 

 

publishing · ge5rg2/react-for-beginners@9af4fe4

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

github.com

 

 

지난번 css과정까지 마친 movie app을 publishing 하려고 한다.

우선

$ npm i gh-pages

을 진행한다. gh-pages란

결과물을 github pages에 업로드할 수 있는 패키지를 말한다.

github pages는 html css js로 만든 파일을 웹사이트 형태로 무료 배포해준다. 

 

1

package.json으로 가면

build

build가 있는데 해당 명령어를 입력해준다.

$ npm run build

그러면 production ready가 진행되는데 모든 코드가 압축되고 최적화된다는 것을 의미한다.

해당 작업이 완료되었다면, build라는 폴더가 생성되었을 것이다.(해당 폴더 내부에는 기존에 우리가 작성했던 코드들이 압축되어 있는 것을 확인할 수 있다)

 

2

package.json 최하단부

최하단부에 와서 사진과 같이 hompage를 만들어준다. 이때 github앞에는 본인의 github username -> io/ 다음에는 현재 github repository를 작성하면 된다.

 

3

scripts

scripts로 돌아와서 deploy를 작성한다. deploy는 build 폴더를 아래에 있는 hompage를 gh-pages를 통해서 업로드하는 것이다.

하지만 deploy를 실행하려면 매번 $ npm run build를 작성해서 build 폴더를 만들어야하는데 번거롭기 때문에 predeploy를 하단에 작성해서 먼저 실행시키게 만들어준다.

 

완성된 웹사이트

https://ge5rg2.github.io/react-for-beginners/