React - 리액트 프로젝트(1)

January 16, 2022

Github페이지에 React추가하기

1.준비

node.js 설치 https://nodejs.org/en/
yarn 설치 : brew install yarn(homebrew) / npm install -g yarn (npm)
gh-page 모듈 설치 : npm install -save gh-pages

2.gitpage폴더에 react-app생성

npx create-react-app my-app
cd my-app
npm start

3. _config.yml

지킬 환경파일에 react파일 제외하기

exclude:
  - node_modules
  - dev-react-pages

4. homepage url 셋팅

추가한 react-app 폴더 내의 package.json 파일에 homepage 추가

"homepage": "/react-pages/"

5. 배포 스크립트 추가

package.json 에 배포스크립트 추가 (아래는 리눅스용)

"predeploy": "npm run build",
"purge": "rm -rf ../react-pages/static && cp -fR ./build/* ../react-pages",
"frontmatter": "echo '---\ntitle: react-pages\nlayout: null\n---\n' | cat - ../react-pages/index.html > temp && mv temp ../react-pages/index.html",
"deploy": "npm run purge && npm run frontmatter"

predeploy : 배포 전 npm run build 명령어로 빌드
purge : 최근 빌드를 접근 가능한 지킬 폴더로 추가이동
deploy : 배포!!

6. 배포

yarn run deploy 명령어로 빌드 후 결과를 배포 폴더로 옮긴다.

React-pages

TypeError: MiniCssExtractPlugin is not a constructor

TypeError: MiniCssExtractPlugin is not a constructor 에러 발생 시 아래 플러그인 설치

npm i -D --save-exact mini-css-extract-plugin@2.4.5

References