ts 개발환경 설정

타입스크립트 설치

npx create-react-app . --template=typescript

Styled Components / react-router-dom / dotenv 설치

npm install styled-components react-router-dom dotenv

ts node, react, react-dom 설치

npm install --save-dev @types/node @types/react @types/react-dom

ERROR in Plugin "react" was conflicted between "package.json » eslint-config-react-app << 이라는 에러가 나면 지워준다. 나는 에러 안 나긴 했는데 혹시나 해서 미리 지워줬다.

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

Gh page 이용한 배포를 할 때만 사용

npm install -D gh-pages

env를 사용한 환경설정

REACT_APP_SERVER_HOST 주소와 REACT_APP_SERVER_API_URL 주소를 다르게 설정해야 할 때 사용

.env.development  //개발
.env.production   //실서버

env cmd 설치

npm i env-cmd

package.json 파일 스크립트 변경

  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "env-cmd -f .env react-scripts build",
    "build:prod": "env-cmd -f .env.production react-scripts build && move build ./build_prod",
    "test": "env-cmd -f .env.production react-scripts test",
    "eject": "react-scripts eject",
    "lint": "yarn lint:ci --fix",
    "lint:ci": "eslint src"
  },

start: 기본 상태로 했을 땐 오류 나서 저렇게 변경함 왜인지는 에러 해결 글에 있당
build: env-cmd 사용해서 env 파일 로드 후 build
build:prod : production 빌드를 생성 후, ./build_prod로 이동

스크립트 변경은 프로젝트마다 다르니 참고. 내가 지금 하고있는 프로젝트는 저렇게 해놨다

Eslint & Prettier 설정

npm i --save-dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

eslint-plugin-import : ES6 import/export syntax 체크
eslint-plugin-jsx-a11y : 리액트 element 접근성 이슈 체크
eslint-plugin-react : 리액트 규칙 추가
eslint-plugin-import : 리액트 hooks 규칙

Prettier 설정

npm i --save-dev eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier : ESLint의 formatting 관련 설정 중 Prettier와 충돌하는 부분을 비활성화.

eslint-plugin-prettier : 원하는 형식의 formatting 설정.