[React JS] Building for production (With GITHUB)

드디어 완성이 되었다.

정말 맨 마지막에 컴포넌트를 잘못 다운받아,

 오류가 나서 멘붕 터졌지만,

node_module 폴더를 삭제후에

yarn add react-lines-ellipsis 이 명령어로 다시 설치했다.

그랬더니, 정상적으로 작동한다~^^

이제 이것을 깃허브페이지에 올릴 것이다.

깃허브페이지는 static file을 올릴 수 있는 서비스다.

static file은 자바스크립트,css,html과 같은 프론트엔드 파일을 뜻한다.

아쉽게도 백엔드는 안된다.

깃허브 페이지는 이런 static file을 공짜로 호스팅할 수 있게 해준다.

이걸 사용하려면, 첫째 깃허브 계정이 필요하고, 두번째 깃허브 프로젝트가 필요하며,

세번째 깃허브 프로젝트의 브랜치를 만들어야한다.

그 이름은 gh-pages 여야 한다.

이 gh-pages로 올라간 파일은 웹사이트에 너의 프로젝트명, 유저이름과 함께 보일꺼다.

깃허브는 코드를 보여주지, 실행을 하지는 않는다.

gh-pages는 코드를 실행하고, 웹사이트로 보여준다.

이걸 하기 전에 yarn build를 명령한다.

이건 나의 css를 가져다가 압축할 것이다.

그리고 build라는 파일에 public 폴더에 넣을 것이다.

모든 것을 압축한 것이다.

우리가 로컬호스트에 있을 때 사용하는 코드는 압축되어있지 않고, 느리고,

최적화되지 않았다.

build 작업을 하면, 좀 더 최적화되고, 압축, 더 향상되는 것이다.

터미널 명령어를 확인해보면,

패키지.제이슨으로 가서 여기에 key를 추가할 것이다.

그리고 다시 빌드를 한다.

yarn build

다시하는 이유는 약간 수정/추가를 했기 때문이다.

메세지를 확인해보면,

yarn add --dev gh-pages 명령하고,

아래 코딩을 패키지 제이슨에 추가하라고 한다.

그대로 따라해라

여기서 중요한 점은 유저명.github.io/프로젝트명 이라는 것을 명심해라

그리고 이제,

yarn run  deploy 를 명령해라.

그러면 완성이다!

https://sechang.github.io/movie_app/

그런데??

혹시.. 이런 오류가 떴다면??

왜 이런 오류가 뜨냐면, 

깃헙에 당신이 프로젝트(저장소)를 안 만들어줘서 그렇다.

프로젝트(저장소)를 만들고, 

다시 yarn run deploy를 해라!

복습을 하자면,

주소는 유저이름/프로젝트(저장소)명

이게 제일 중요하다.

프로젝트 생성과 브랜치에 대해서 잘 모르겠으면 아래 링크를 참고해라

(필자도 몰라서, 구글링과 아래링크를 한글로 번역하여 진행하였다.)

https://guides.github.com/activities/hello-world/#what

최종완성본 : https://sechang.github.io/movie_app/

*본 포스팅은 노마드코더 동영상을 보고 공부한 내용을 정리한 것입니다.