husky로 git hook 설정하기

✨ Git Hook이란?

Git Hook은 Git과 관련한 어떤 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능이다. 크게 클라이언트 훅 과 서버 훅으로 나뉘는데 클라이언트 훅은 commit, merge가 발생하거나 push가 발생하기 전 클라이언트에서 실행하는 훅이다. 반면 서버 훅은 git repository로 push가 발생했을 때 서버에서 실행하는 훅이다. 이번 포스팅에는 클라이언트 훅인 pre-commit 훅을 적용해 본 과정을 기록하려 한다.

1. husky 설치

먼저 아래의 명령어를 사용하여 husky를 설치한다. 나는 버전8을 사용하였다.

npm install -D husky # 설치
npx husky init # 시작

husky를 설치 후 시작하면 package.json의 scripts에 "prepare": "husky install" 이 추가된다. 이 명령어는 다른 사람들이 git clone을 받아서 사용할 때 자동으로 husky의 설정을 초기화하고 실행시켜주는 역할을 한다.

또한 husky를 설치하면 ./husky/pre-commit 파일도 생성된다. pre-commit 파일은 커밋하기 전에 실행되는 스크립트를 담고 있는 파일이다. 이 파일에 정의된 명령어들은 사용자가 git commit 명령어를 입력할 때 자동으로 실행된다.

2. pre-commit 훅 설정

이제 pre-commit 파일에 커밋 전 실행시킬 명령어를 추가하면 된다.

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

npm test

npx prettier --cache --write .
npx eslint --cache .
npx tsc -p tsconfig.json --noEmit

여기서 사용된 각 명령어는 다음과 같은 역할을 한다:

• npm test: 커밋 전에 테스트를 실행하여 코드가 정상적으로 작동하는지 확인한다.
• npx prettier --cache --write .: 코드 포맷터인 Prettier를 사용해 코드 스타일을 자동으로 정리한다.
• npx eslint --cache .: ESLint를 통해 코드 품질을 검사한다.
• npx tsc -p tsconfig.json --noEmit: TypeScript 컴파일러를 사용해 타입 체크를 수행한다. -noEmit 플래그는 실제로 컴파일을 하지 않고 타입 체크만 하도록 한다.

커밋 전(pre-commit) 외에도 필요한 상황에 맞게 파일 이름을 만들고 명령어를 적으면 된다.

• ex) push 전에 실행하고 싶은 명령어가 있다면 ./husky/pre-push 파일을 생성후 명령어를 적으면 된다.

❗️husky 최신 버전의 차이점

이전 버전에서는 여러 명령어를 등록하기 위해선 ’&&’로 한 줄에 이어 적어야 했다.

# 터미널
 npx husky add .husky/pre-commit "npm run format && git add ."

처음에는 이 점을 모르고 최신 버전에서 명령어를 등록하다가 아래와 같은 오류가 계속 발생하였다.

add command is deprecated

최신 버전에서는 알아서 pre-commit 파일이 생성되고 거기에 명령어를 등록하면 되기 때문에 훨씬 간편해졌다.

결론

husky를 활용한 Git Hook 설정은 프로젝트의 코드 품질을 높이고, 협업 시 발생할 수 있는 문제를 줄이는 데 큰 도움이 된다. 특히, 팀원들이 서로 다른 개발 환경에서도 일관된 코드 스타일과 품질 기준을 유지할 수 있도록 도와준다. 이러한 기능을 통해 발생할 수 있는 오류를 사전에 방지하고, 코드 리뷰 시간을 단축시킬 수 있기 때문에 프로젝트를 진행할 때 husky를 사용해보는 것도 좋을 것 같다.