react로 github pages 만들기

1. react 설치

npx create-react-app <appname>

// 위 명령이 실행되는 디렉토리 내부에 appname의 새로운 디렉토리가 생성됨

npm install 과 npx 의 차이
- npx는 npm패키지를 설치하지 않고, 최신 버전에 맞는 패키지를 실행 한 뒤 제거한다.
무거운 패키지를 로컬에 남기지 않고, 최신 버전이 나올 때마다 로컬의 패키지를 제거하고 다시 설치해야하는 불편함을 해결해준다.
- npx는 5.2.0 버전 이상부터 사용 가능

2. react 실행

cd <appname>
npm start

// npm start는 package.json 파일 scripts에 있는 start를 실행. "react scripts start"를 실행한다.

해당 명령을 실행하면 http://localhost:3000/ 페이지가 열린다.

// npm start 이외의 scripts는 npm run <명령어>을 써줘야 실행된다.

1) 디렉토리 구조

- public/index.html 실제 브라우저에서 보여지는 페이지

- src/index.js react app이 실행되는 페이지

3. git 레파지토리 생성

git init
git remote add origin <URL>
git add .
git commit -m <커밋 메시지> // 커밋을 해야 push할 수 있음
git push -u <origin> <master>

4. github pages 설치

npm install gh-pages --save-dev

npm install 옵션
--save 또는 -S : package.json 파일의 dependencies 항목에 패키지의 정보가 남는다.
production 빌드 시 해당 패키지가 포함된다.
npm 5.0.0 버전부터는 --save 옵션이 기본적으로 설정되어있기 때문에 따로 작성하지 않아도 된다.

--save-dev 또는 -D : package.json 파일의 devDependencies 항목에 패키지의 정보가 남는다.
개발용 패키지로, production 빌드 시에는 포함되지 않는다.

5. package.json 수정

{
	"name": "portfolio",
	"version": "0.1.0",
	"private": true,
	"hompage": "https://jnooys.github.io/portfolio",

// hompage에 <github 이름>.github.io/<디렉토리명> 추가

  "scripts": {
	"predeploy": "npm run build",
 	"deploy": "gh-pages -d build"

// scripts에 predeploy, deploy 추가, predeploy는 deploy 실행 전에 자동적으로 실행됨

6. deploy

npm run deploy

so book