요약

• Framework : React, React BoilerPlate(create-react-app)
• Route: react-router-dom(5.3.0)
• State Management Tool: redux
• Network: Axios
• Convention: ESLint, Prettier
• Style: Emotion, styled component
• etc: formik + Yup, momentjs, react-dnd, emoji-picker-react

1) create-react-app & Typescript

• 기본: yarn 기반 패키지
• CRA를 Typescript 버전으로 설치.

yarn create react-app yas --template typescript

tsconfig.json

{
  "compilerOptions": {
    "target": "es6", // 기본값: es5 => es6로 수정
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
}

2) ESLint & Prettier 설정

yarn add -D eslint prettier
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser // ESLint Rule 추가 플러그인
yarn add -D eslint-config-airbnb // airbnb ESLint 규칙
yarn add -D eslint-config-prettier eslint-plugin-prettier // prettier Rule 플러그인
yarn add -D eslint-plugin-react eslint-plugin-react-hooks // airbnb ESLint 규칙
yarn add -D eslint-plugin-jsx-a11y eslint-plugin-import // airbnb ESLint 규칙