프로젝트에 Git Hook 설정하기

개발 프로젝트의 품질을 유지하고 일관된 코드 스타일을 유지하는 것은 매우 중요합니다. Next.js 프로젝트에서 Git Hook을 활용하면 이러한 목표를 쉽게 달성할 수 있습니다. 이 글에서는 Husky, Commitlint, Lint-staged를 사용하여 Git Hook을 설정하는 방법을 알아보겠습니다.

Husky란?

Husky는 Git Hook을 쉽게 관리할 수 있게 해주는 도구입니다. Git Hook은 특정 이벤트 발생 시 자동으로 실행되는 스크립트로, 커밋이나 푸시 전에 코드 검사를 수행하는 등의 작업을 자동화할 수 있습니다.

의존성 설치

먼저, 필요한 패키지들을 설치합니다:

yarn add -D @commitlint/cli @commitlint/config-conventional husky lint-staged

Script 정의

package.json 파일에 다음 스크립트를 추가합니다:

{
  "scripts": {
    "check-types": "tsc --noEmit --pretty",
    "postinstall": "husky"
  }
}

이 스크립트는 yarn install 또는 npm install 실행 후 자동으로 Husky를 설정합니다.

Husky 설정

Husky를 설정하기 위해 다음 명령어를 실행합니다:

npx husky init

그리고 .husky/commit-msg와 .husky/pre-commit 파일을 다음과 같이 수정합니다:

.husky/commit-msg:

#!/bin/sh
cd "$(dirname "$0")/.." && npx --no -- commitlint --edit $1

.husky/pre-commit:

#!/bin/sh
# Disable concurent to run `check-types` after ESLint in lint-staged
cd "$(dirname "$0")/.." && npx lint-staged --concurrent false

Commitlint 설정

커밋 메시지의 형식을 검사하기 위해 Commitlint를 설정합니다. 프로젝트 루트에 commitlint.config.js 파일을 생성하고 다음 내용을 추가합니다:

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

이 설정은 Conventional Commits 규칙을 따르도록 합니다.

Lint-staged 설정

Lint-staged를 사용하여 스테이징된 파일에 대해서만 린트 검사를 수행할 수 있습니다. 프로젝트 루트에 .lintstagedrc.js 파일을 생성하고 다음 내용을 추가합니다:

module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'eslint'],
  '**/*.ts?(x)': () => 'yarn check-types',
  '*.{json,yaml}': ['prettier --write'],
};

이 설정은 JavaScript와 TypeScript 파일에 대해 ESLint를 실행하고, TypeScript 파일에 대해 타입 체크를 수행하며, JSON과 YAML 파일에 대해 Prettier를 실행합니다.

결론

이제 Git Hook 설정이 완료되었습니다. 이 설정으로 인해:

커밋 전 스테이징된 파일에 대해 자동으로 린트 검사가 수행됩니다.
커밋 메시지가 Conventional Commits 규칙을 따르는지 검사됩니다.
TypeScript 파일의 타입 체크가 자동으로 수행됩니다.

이러한 자동화된 검사 과정을 통해 코드 품질을 유지하고 일관된 커밋 메시지를 작성할 수 있습니다. 팀 프로젝트에서 이러한 설정을 사용하면 코드 리뷰 프로세스를 더욱 효율적으로 만들 수 있습니다.