Husky 및 lint-staged 적용

프로젝트에 Husky 와 lint-staged 를 도입해 코드 스타일을 자동으로 검사하고 수정하는 기능을 추가했습니다. 이를 통해서 코드의 일관성을 유지하고, 코드 리뷰 시간을 단축하며, 문제를 조기에 발견할 수 있도록 했습니다.

사용 도구 및 라이브러리

• Husky
  Husky는 Git 훅을 활용하여 특정 Git 명령어가 실행되기 전에 자동으로 스크립트를 실행할 수 있도록 도와주는 도구입니다. 이를 통해 코드 스타일 검사, 테스트 실행 등 다양한 작업을 자동화할 수 있습니다.
• lint-staged
  lint-staged는 Git의 pre-commit 단계에서 스테이징된 파일에 대해서만 코드 검사를 수행하는 도구입니다. 이를 통해 코드 스타일 검사 도구인 ESLint와 Prettier를 스테이징된 파일에만 적용할 수 있습니다.
• ESLint
  ESLint는 JavaScript 및 TypeScript 코드의 문법 및 스타일 오류를 찾아내고 수정할 수 있도록 도와주는 정적 코드 분석 도구입니다. 이를 통해 코드의 일관성을 유지하고, 잠재적인 오류를 사전에 방지할 수 있습니다.
• Prettier
  Prettier는 코드 포맷터로, 코드 스타일을 자동으로 일관되게 유지해주는 도구입니다. 이를 통해 팀 내에서 코드 스타일을 통일하고, 코드 리뷰 시간을 단축할 수 있습니다.

구현

Husky 및 lint-staged 설정

• Husky pre-commit 훅을 추가하여 커밋 전에 lint-staged 를 실행하도록 설정했습니다.
• lint-staged 를 통해 prettier 와 eslint 를 사용하여 코드 스타일을 자동으로 수정 및 검사하도록 설정했습니다.

// .husky/pre-commit
npx lint-staged

// package.json
{
  "scripts": {
    "lint": "next lint",
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "npx prettier --write .",
      "npx eslint --cache --fix ."
    ]
  },
  "devDependencies": {
    "husky": "^9.1.6",
    "lint-staged": "^15.2.10",
    "prettier": "^3.3.3",
    "eslint": "^8",
  }
}

Scripts

• "lint": "next lint"
  next lint 명령어를 실행해 ESLint를 사용하여 프로젝트의 코드 스타일을 검사합니다.

• "prepare": "husky install"
  husky install 명령어를 실행하여 Husky를 설치합니다.

package.json 파일의 scripts 필드는 빌드, 실행 등에 사용되는 명령어를 선언하거나 패키지의 install, publish 전/후에 실행되는 스크립트 명령어를 선언할 때 사용됩니다.
scripts 필드에는 개발자가 임의로 정의한 스크립트 뿐만 아니라, 정해진 몇가지 스크립트 명령어가 있습니다. 이런 스크립트를 라이프 사이클 스크립트라고 하는데, 패키지의 install 혹은 publish 명령어가 실행되기 전/후에 호출됩니다.
prepare 스크립트는 패키지가 패킹 되기 전에 실행되는 스크립트로 npm publish, npm pack 의 스크립트가 실행될 때, 로컬에서 파라이터 없이 npm install 스크립트가 실행될 때 호출됩니다.
예를 들어, husky 패키지는 설치된 후 husky install 이라는 명령어가 실행되어야 하기 때문에 패키지가 설치 된 후 실행되는 라이프 사이클 스크립트를 사용해야 합니다.

lint-staged

• "{js,jsx,ts,tsx}":
  이 설정은 Git에 스테이징된 JavaScript 및 TypeScript 파일에 대해 특정 명령어를 실행하도록 지정합니다.

• "npx prettier --write ."
  Prettier를 사용하여 스테이징된 파일의 코드 스타일을 자동으로 포맷합니다. Prettier는 코드의 일관된 스타일을 유지하는 데 도움을 줍니다.

• "npx eslint --cache --fix ."
  ESLint를 사용하여 스테이징된 파일의 코드 스타일을 검사하고, 가능한 경우 자동으로 수정합니다. --cache 옵션은 이전 검사 결과를 캐시하여 성능을 향상시키고, --fix 옵션은 자동으로 수정 가능한 문제를 해결합니다.

결론

• 코드 리뷰 시간 단축과 코드 일관성 유지, 문제 조기 발견을 위해 Husky 와 lint-staged 를 도입하여 커밋 전에 자동으로 코드 스타일을 검사하고 수정하는 시스템을 구축했습니다.