React 초기 프로젝트 세팅 (eslint, husky etc..)

husky, commitlint

husky는 git의 hook들을 쉽게 관리하게 해주는 툴입니다. husky에 commitlint를 사용하여 git commit시에 prefix를 쉽게 적용하고, commit 메세지에 대한 검사를 진행하기 위해 적용하는 것을 선호합니다.

npx husky-init && npm install
npm install --save-dev @commitlint/cli @commitlint/config-conventional commitizen

npx commitizen init cz-conventional-changelog --save-dev --save-exact
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'
npx husky add .husky/prepare-commit-msg 'exec < /dev/tty && node_modules/.bin/cz --hook || true'

//commitlint.config.js
module.exports = { extends: ['@commitlint/config-conventional'] }

설정이 완료되면 터미널에 git commit명령어를 입력시 prefix 선택과 commit의 제목을 입력 할 수 있습니다.

test library, jest dom eslint 설치

cra로 설치 시 기본적인 세팅은 적용되어 있지만, 좀 더 깔끔한 테스트 코드 작성을 위해 설치하는 것이 좋은 것 같습니다.

npm install --save-dev eslint-plugin-testing-library
npm install --save-dev eslint-plugin-jest-dom

// .eslintrc.json
{
  "plugins": ["testing-library", "jest-dom"],
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ]
}

eslint를 설정 하면 왼쪽 코드를 오른쪽 코드로 자동 수정이 가능

typescript

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "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",
    "strictNullChecks": false
  },
  "include": ["src"]
}

react 18버전이 나오면서 cra 사용시 react와 관련된 type 라이브러리간에 싱크가 안맞는 경우가 있습니다. 이럴 때 위에 적혀있는 라이브러리에 대한 업데이트가 필요할 수 있습니다. 

Adding TypeScript | Create React App