요약
- 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 규칙