[ReactJS] 8-1. Building for production

깃허브 페이지는 static file을 올릴 수 있는 사이트다. static file이란 자바스크립트, css, html같은 프론트엔드 파일을 말한다. 백엔드는 안된다. 이 파일을 공짜로 호스팅해주는 기능이다.

이걸 사용하려면, 먼저 깃허브 계정이 필요하고, 깃허브 프로젝트가 필요하며, 깃허브 프로젝트의 브랜치를 만들어야 한다. 그 이름은 gh-pages여야 하고. gh-pages로 올라간 파일은 웹사이트에 내 프로젝트명, 유저 이름과 함께 보이게 된다.

깃허브는 코드를 보여주지, 실행은 하지 않는다. gh-pages는 코드를 실행하고 웹사이트로 보여준다.

1. yarn build

터미널에 yarn build를 하면 css를 압축하고 build라는 public 폴더에 넣는다. 우리가 로컬 호스트에 있을 때 사용하는 코드는 압축이나 최적화 되어있지 않고 느리다. build를 하면 이런 것들이 향상된다.

build한 모습

build를 하고 나면 이런 결과 화면이 뜬다. 이제 우리는 package.json으로 가서 key를 추가하는 작업을 할 것이다.

2. package.json

{
  "name": "movie_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-lines-ellipsis": "^0.13.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  
    "homepage": "http://nomadcoders.github.io/movie_app"
  
}
 

homepage를 추가하고 저장한 뒤 yarn build 한다. 수정했으니까.

안내하는 command를 입력하고

scripts를 추가한다.

기억해야 하는 건, URL의 구성이다.

http://유저이름.github.io/프로젝트이름