Creating React Project

protect-me·2021년 9월 14일

⚛️ React

목록 보기

3/7

참고 https://slides.com/woongjae/react2021

CRA

Create React App
$ npx create-react-app my-project

scripts 명령어

npm start

react-scripts start
starting the development server

npm run build

react-scripts build
creating and optimized production build
build 폴더에 결과물 생성
배포
: $ npm install server -g
: $ serve -s build

npm test

react-scripts text
jest를 통해 test code를 실행

npm run eject

rect-scripts eject

webpack

ESLint(linter)

잘못입력한 문법을 자동으로 수정

Prettier(formatter)

팀원간의 코딩 컨벤션을 맞추기 위해서 사용

ESLint & Prettier

ESlint는 보통 잘못입력한 문법을 자동으로 수정하기 위해서 사용된다.

Prettier는 팀원간의 코딩 컨벤션을 맞추기 위해서 사용된다.

즉, eslint는 포매팅 기능이 포함되어 있기 때문에 eslint와 prettier를 같이 사용하는 경우에는 충돌이 나게 된다. 따라서, eslint 포메팅 기능을 종료시키고 문법 기능만 사용하게 한다.

eslint-config-prettier은 eslint에서 prettier의 포매팅과 겹치는 것을 삭제하고 eslint-plugin-prettier는 eslint에서 prettier의 포메팅 기능을 추가한다.

출처: https://zereight.tistory.com/994 [Zereight's Blog]
// package.json
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier" // 여기에 추가하여 충돌 방지
    ]
  },