[React] Create React Project

1. Create React App

CRA 링크

# terminal

$ npx create-react-app tic-tac-toe
$ cd tic-tac-toe
$ code .

// package.json

{
  "name": "tic-tac-toe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",  // 테스팅
    "@testing-library/react": "^11.2.7",  // 테스팅
    "@testing-library/user-event": "^12.8.3",  // 테스팅
    "react": "^17.0.2",  // 핵심 모듈
    "react-dom": "^17.0.2",  // 핵심 모듈
    "react-scripts": "4.0.3",  // 개발환경, production 모드에서 build를 위한 배포작업, create-react-app의 프로젝트 관리 역할
    "web-vitals": "^1.1.2"  // 구글에서 사이트 경험을 측정하고 개선할 수 있도록 정보를 얻는 라이브러리
  },
  "scripts": {
    "start": "react-scripts start",  // 개발서버를 로컬에서 띄움
    "build": "react-scripts build",  // production 모드로 build. 컴파일, $ npx serve -s build
    "test": "react-scripts test",  // Jest가 실행되면서 test code 실행
    "eject": "react-scripts eject"  // cra 내에서 해결이 안되는 설정을 추가할 때 사용
  },
  ...
}

2. ESLint

• 코딩 스타일을 내부적으로 규정

{
  ...
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {  // ESLint 규칙 설정
      "semi": ["error", "always"]
    }
  },
  ...
}

3. Prettier

• 코드 포매터
• eslint-config-prettier
  • Prettier에서 불필요하거나 Prettier와 충돌할 수 있는 모든 규칙을 끔
  • 규칙을 끄기만 하기 때문에 다른 설정과 함께 사용

# terminal

$ npm i prettier -D

{
  ...
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ],
  },
  ...
}

4. Husky

• Git으로 어떤 액션이 발생할 때, 처리할 것을 처리해 주는 툴
• ex) Commit 전에 코드 테스트

# terminal

$ npm i husky -D
$ npx husky install

// package.json
{
  ...
  "scripts": {
    "prepare": "husky install",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}

# terminal

$ npx husky add .husky/pre-commit "~~~"

5. Lint-staged

• Run linters on git staged files

# terminal

$ npm i lint-staged -D
$ npx husky add .husky/pre-commit "lint-staged"

// package.json
{
  ...
  "lint-staged": {
    "**/*.js": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  },
  ...
}

6. React Component Debugging

• React Developer Tools

React Developer Tools 설치

# terminal

$ npm start