리액트 프로젝트 만들기

node, npm/yarn, create-react-app 설치, build와 GitHub Pages 배포까지

1. node.js 설치

리액트 작업에 필요한 라이브러리들을 손쉽게 설치하기 위한 node의 패키지 매니저 npm/yarn을 위해 먼저 node.js 를 설치합니다.

• node.js 사이트 : https://nodejs.org/ko/

설치가 잘 되었다면 터미널에서 버전확인이 가능합니다.

 

$ node -v
v10.15.1

 

npm은 node.js를 설치할 때 함께 설치되기 때문에 따로 설치할 필요가 없습니다.

 

$ npm -v
6.8.0

2. create-react-app 설치 및 사용

 

프로젝트들을 담아둘 디렉토리에서 아래와 같이 설치를 하면 "my-app"이라는 폴더가 생깁니다.

 

$ npx create-react-app my-app

 

폴더 안에는 어래와 같이 기본 디렉토리 구조가 생성됩니다.

 

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

 

터미널에서 프로젝트 폴더로 들어가서 npm start또는yarn start 을 실행하 app이 브라우저에(http://localhost:3000) 뜨게됩니다. 여기 yarn으로 진행했습니다.

 

$ cd my-app
$ yarn start

3. 작업 후 GitHub에 올리기

 

깃에 새로운 레파지토리를 만들고 아래와 같은 순서로 깃 주소로 작업한 것이 올립니다.

 

$ git init
$ git add .
$ git commit -m "커밋 메세지"
$ git remote add origin https://github.com/{username}/{repo-name}.git // 예시
$ git remote push -u origin master

4. 빌드 후 배포하기

개발을 완료한 후에 빌드와 배포가 이뤄집니다. 빌드를 하면 내부에 build 폴더가 생성됩니다.

 

$ yarn build

 

gh-pages를 설치합니다.

 

$ yarn add --dev gh-pages

 

package.json에서 hompage 필드를 추가합니다. {username} 은 GitHub 닉네임, {repo-name} 는 저장소명입니다.

 

... 
},
"homepage": "http://{username}.github.io/{repo-name}"

 

package.json에서 scripts 필드에 predeploy와 deploy 추가합니다.

 

.... ,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "yarn build",
    "deploy": "gh-pages -d build"
  },
....

 

package.json를 모두 수정했으니, 다시 빌드하여 배포합니다.

 

$ yarn build
$ yarn run deploy

 

터미널에 Published Done in 23.72s. 라는 문장이 뜨고, 위에서 설정한 homepage url로 접속하면 배포된 것을 확인할 수 있습니다. 404페이지가 뜰 수 있는데 새로고침 몇 번 하면 됩니다.