글을 시작하며

코드 품질을 유지하기 위해 린트 검사와 코드 포맷팅을 수행하는 것은 필수적입니다. 하지만 이를 수동으로 실행하는 것은 번거롭고, 협업 시 강제성이 부족할 수 있습니다. 이런 문제를 해결하기 위해 Husky와 Lint-staged를 사용하면 Git hooks을 활용하여 린트 검사 및 코드 포맷팅을 자동화할 수 있습니다.

이 글에서는 Husky와 Lint-staged가 무엇인지 알아보고, 이를 프로젝트에 적용하는 방법을 단계별로 알아보려고 합니다.

Husky란?

Husky는 Git Hooks를 쉽게 관리할 수 있도록 도와주는 도구입니다. Git Hooks을 활용하면 코드가 커밋되거나 푸시될 때 특정 스크립트를 실행할 수 있습니다. 이를 통해 팀원들이 반드시 린트 검사나 테스트를 수행한 후 코드 변경 사항을 저장하도록 강제할 수 있습니다.

Git Hooks란?

Git Hooks은 특정 Git 이벤트가 발생할 때 자동으로 실행되는 스크립트입니다. 예를 들어, 커밋 전에 코드 검사를 수행하거나, 푸시 전에 테스트를 실행할 수 있습니다. Git 훅을 활용하면 프로젝트의 코드 품질을 유지하고 개발 프로세스를 자동화할 수 있습니다.

Git 훅에는 여러 종류가 있으며, 대표적으로 다음과 같은 것들이 있습니다.

• pre-commit: 커밋 전에 실행되는 훅
• pre-push: 푸시 전에 실행되는 훅
• commit-msg: 커밋 메시지작성 후 커밋 최종완려 전 실행되는 훅

이러한 훅을 수동으로 설정하는 것은 번거로울 수 있지만, Husky를 사용하면 쉽게 관리할 수 있습니다.

Lint-staged란?

Lint-staged는 Git에 스테이징된 파일을 대상으로 린트 검사나 코드 포맷팅을 수행할 수 있도록 도와주는 도구입니다. 전체 프로젝트에 대해 실행하는 것보다 속도가 빠르며, 변경된 파일만 검사할 수 있어 효율적입니다.

Husky와 Lint-staged 적용하기

1. Husky 및 Lint-staged 설치

프로젝트에 Husky와 Lint-staged를 설치합니다.

npm install husky lint-staged --save-dev

2. Husky 초기화

Husky를 설정하려면 다음 명령어를 실행합니다.
아래 명령어를 실행하면 .husky 디렉터리가 생성되며, Git 훅을 설정할 수 있는 환경이 준비됩니다.

npx husky init

// package.json
"scripts": {
  "postinstall": "husky install"
}

3. pre-commit 훅 설정

pre-commit 훅을 생성하여 커밋 전에 Lint-staged를 실행하도록 설정합니다.

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

이제 .husky/pre-commit 파일에 다음과 같은 내용이 추가됩니다.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

4. lint-staged 설정

프로젝트의 package.json 파일에 lint-staged 설정을 추가합니다.

"lint-staged": {
  "\*.{js,jsx,ts,tsx}": [
    "prettier --cache --write"
    "eslint --cache --fix",
  ]
}

위 설정은 JavaScript 및 TypeScript 파일을 대상으로 eslint --fix와 prettier --write를 실행하여 자동으로 린트와 포맷팅을 수행합니다.

설정 테스트하기

이제 설정이 잘 적용되었는지 확인해봅시다. 린트 오류가 있는 코드를 작성한 후 커밋을 시도하면, Husky가 pre-commit 훅을 실행하여 Lint-staged가 적용된 파일을 검사하고 자동으로 수정합니다.

git add .
git commit -m "테스트 커밋"

만약 린트 오류가 있으면 커밋이 중단되며, 이를 수정한 후 다시 시도해야 합니다.

결론

Husky와 Lint-staged를 활용하면 코드 품질을 자동으로 유지하면서 팀원들이 동일한 개발 규칙을 따르도록 할 수 있습니다. Git 훅을 통해 린트 검사 및 코드 포맷팅을 강제함으로써 불필요한 코드 리뷰 시간을 줄이고 프로젝트의 일관성을 유지할 수 있습니다.

이제 여러분의 프로젝트에도 Husky와 Lint-staged를 도입해 보세요!