[React] React + Vite + Typescript + Eslint + Prettier + Husky

들어가기

이번 블로깅은 프로젝트 진행에 앞서 프로젝트를 설정하는 과정. 그 중에서도 Vite 이용한 Typescript 기반의 React 프로젝트 생성과 정적분석툴인 Eslint 그리고 코드포멧터인 Prettier와 Git hooks를 보다 쉽고 편하게 사용할 수 있게 도와주는 npm 모듈인 Husky를 적용한 프로젝트 생성에 대해 작성해보려고 한다.

Vite

"Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)은 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다."

Vite 공식문서 일부 발췌

도대체 얼마나 빠르면 이름부터가 빠르다 일까? 우선 Vite를 이용하여 프로젝트를 생성하고 비교해 보자.

Vite로 typescript 기반 React 프로젝트 생성하기

공식문서를 참고하여 다음 명령어를 터미널에 입력해보자.

npm create vite@latest project-name -- --template react-ts

추가로 npm 버전이 7이상이라면 -- 를 반드시 붙여한다.

설치된 폴더로 이동 후 패키지 설치를 진행한다.

cd project-name
npm install

총 21초가 걸렸다. 본인의 컴퓨터 사양과 인터넷 환경에 따라 속도가 다를 수 있다.

(평소에는 10초 정도 걸리는데 오늘은 좀 느리다.)

npm run dev

다음과 같은 페이지가 보인다면 성공이다.

CRA와의 차이

위에서 Vite로 프로젝트를 생성한것과 동일한 조건으로 CRA를 사용하여 프로젝트를 생성했다.

총 38초가 걸렸다. 설정 단계에서는 큰 차이를 못 느끼더라도 프로젝트의 사이즈가 커진다면 체감될 것 같다.

Eslint

"ESLint는 코드를 정적으로 분석하여 문제를 빠르게 찾습니다. 대부분의 텍스트 편집기에 내장되어 있으며 지속적 통합 파이프라인의 일부로 ESLint를 실행할 수 있습니다."

typescript-eslint 공식문서 일부 발췌

Eslint 설치하기

typescript-eslint 공식문서에서는 다음과 같은 명령어로 자신의 프로젝트에 Eslint 를 적용할 수 있다고 한다. 우리는 React에 관한 lint설정을 해야하니 추가로 eslint-plugin-react, eslint-plugin-jsx-a11y도 설치한다.

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript eslint-plugin-react eslint-plugin-jsx-a11y

설정파일 생성하기

패키지 설치가 완료 되었다면 .eslintrc.cjs 라는 이름의 설정파일이 생성된다. 만약 설정파일이 생성되지 않았다면 같은 이름으로 설정파일을 생성하고 아래의 내용을 작성 후 저정한다.

/* eslint-env node */
module.exports = {
  env: { browser: true, es2020: true, node: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:jsx-a11y/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  plugins: [],
  rules: {},
};

'module' is not defined 오류가 발생한다면 아래와 같이 node: true 를 추가한다.

env: { browser: true, es2020: true, node: true },

각 속성에 대한 추가 사항은 아래 링크된 공식문서에서 확인하여 프로젝트 성격에 맞춰 설정하면 된다. 이 글에서는 기본 설정으로 진행한다.

typescript-eslint Configurations 공식문서

Eslint 실행하기

package.json을 확인해보면 script에 lint가 추가된 것을 확인 할 수 있다. 그 부분을 다음과 같이 수정해준다.

{
  	...
  
    "scripts": {
      ...
      "lint": "eslint src --ext ts,tsx --cache --max-warnings 0",
      ...
  	},
      
    ...
}

eslint는 기본적으로 모든 파일에 대한 검사를 진행한다. 이렇게 되면 검사에 소요되는 시간이 늘어나 비효율적이다. 이럴때는 --cache 옵션을 사용하여 모든 파일을 검사하지 않고 변경된 파일만 검사할 수 있다.

Command Line Interface Reference

아래 명령어를 통해 실행할 수 있다.

npm run lint

글을쓰는 오늘을 기준으로 아직 Eslint가 typescript 최신 버전을 지원하지 않는다. 따라서 typescript의 버전을 수정하거나, 경고를 무시하면 된다.

typescript의 버전 수정방법은 아래와 같다.

typescript의 npm 문서에서 확인한 결과 5.1.0 미만 중 최신버전은 5.0.4 버전이다.

npm install typescript@5.0.4 -D

위 명령어를 통해 typescript의 버전을 변경하고, 다시 npm run lint를 실행하면 경고없이 실행된다.

Prettier

Prettier 공식문서

Prettier 설치하기

아래의 명령어를 실행하여 prettier와 eslint와 prettier를 함께 사용할 수 있게 해주는 eslint-plugin-prettier를 설치한다. 또한, eslint-config-prettier를 설치하여 eslint와 prettier의 충돌을 방지해준다.(eslint의 설정이 우선시 됨.)

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

설정파일 생성하기

패키지 설치가 완료 되었다면 .prettierrc.cjs 라는 이름으로 설정파일을 생성하고 아래의 내용을 작성 후 저정한다.

// .prettierrc.cjs

module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: true,
  singleQuote: false,
}

prettier Configuration File

필자는 로컬에서 쓰는 prettier 설정과 동일하게 적용했다. 만약 공식문서의 설정과 같게하고 싶다면, .eslintrc.cjs의 extends에서 plugin:prettier/recommended 를 삭제하거나 rules를 수정한다.

지금까지의 .eslintrc.cjs 파일은 다음과 같다.

// .eslintrc.cjs

module.exports = {
  env: { browser: true, es2020: true, node: true },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
  plugins: [],
  rules: {},
};

prettier 실행하기

package.json에 다음과 같은 코드를 추가해준다.

// package.json

script: {
  ...
  "format": "prettier --cache --write .",
}

추가 후 아래 명령어를 실행하면 된다.

npm run format

Husky

"커밋 또는 푸시할 때 커밋 메시지를 린트하고, 테스트를 실행하고, 코드를 린트하는 등의 작업 에 사용할 수 있습니다. Husky는 모든 Git Hooks를 지원합니다."

Husky 공식문서 일부 발췌

Husky 설치하기

다음 명령어를 통해 프로젝트에 husky를 설치할 수 있다. 자동설치 방법과 수동설치 방법이 있다. 공식문서에서는 자동설치를 추천하니 추천하는 방법대로 설치를 진행한다.

npx husky-init && npm install

Husky Getting started

만약 git에 대한 설정이 없다면 아래와 같은 에러가 나타나니 꼭 git 설정을 먼저 진행해주자!

설치가 완료되면 package.json의 script에 다음 코드가 추가되어있다.

// package.jon

script: {
  ...
  "prepare": "husky install"
}

또한 프로젝트 폴더에 .husky라는 폴더가 만들어져 있다. 작성되어 있는 pre-commit 쉘 명령어가 있다면 삭제해준다.

Husky 설정하기

이번 글에선 pre-commit과 pre-push Hooks를 활용해 lint와 prettier를 실행해 보겠다.

npx husky add .husky/pre-commit "npm run format"

commit이 진행되기 전 prettier를 실행하여 검사를 진행한다는 뜻이다.

npx husky add .husky/pre-push "npm run lint"

push가 진행되기 전 lint를 실행하여 검사를 진행한다는 뜻이다.

Husky 실행하기

git commit 명령어를 실행하면 위와 같은 결과를 보여준다. 만약 오류가 발견되면 commit은 실행되지 않는다.

특별한 오류 없이 git push 명령어를 실행하면 위와 같은 결과를 보여준다. 만약 코드에 문제가 있다면 아래와 같은 오류가 발생되며 push가 진행되지 않는다.

파일트리

project
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

마치며.

간단한 설정이었지만, 예상치 못한 오류가 하나 둘 발생하여 생각 만큼 쉽지는 않았다. 하지만 한번 공부해 놓으면 두고두고 쓸 수 있겠다는 생각에 꾹 참고 공식문서를 뒤져가며 글을 작성해봤다. 아직도 eslint의 다양한 플러그인을 커스텀하는 방법은 아직도 어렵다. 그저 recommended만 사용하며 형식만 갖추는 느낌이다. 추후에는 커스텀하여 나에게 맞는 설정을 해봐야겠다.

앞으로도 화이팅!