들어가며

git을 개발자들과 협업한다면 필수로 사용해야 할 husky 세팅법에 대해 공유해보려 합니다.

husky를 알게 된 지는 얼마되지 않았지만, 한 번 husky를 사용하고 나서는 무조건 모든 프로젝트에 husky를 세팅하고 있습니다.

한 번 세팅만 잘 해두면, 전체 코드 베이스 통합이 conflict 없이 에러 없이 잘 이루어질 수 있기에 husky 사용을 적극 권장합니다.

husky를 써야하는 이유가 뭘까요?

prettier와 같은 formatter, ESLint와 같은 linter를 사용해 코드 컨벤션을 유지하고 에러가 없는 클린 코드만을 코드베이스에 통합하는 것은 협업에서 매우 기초적이자 중요한 부분입니다.

하지만 아무리 formatter와 linter를 세팅한다고 해도, 인간의 실수(human error)로 혹은 다른 여러 이유로 에러가 발생하는 코드나 코드 컨벤션이 지켜지지 않은 코드를 git에 commit하거나 push하는 경우가 있습니다. 협업시 이런 미연의 상황을 방지하는데 효과적인 도구가 바로 husky입니다.

husky란?

husky는 git hook 설정을 도와주는 node package manager입니다.

git commit을 하거나 push를 할 때 자동으로 커밋 메시지, 코드의 lint 검사를 진행해주고, 테스트까지 돌려줍니다.

만약 lint 검사나 테스트가 실패할 경우에는 commit 혹은 push를 강제로 막기 때문에, 비교적 안전하게 코드를 관리할 수 있습니다.

git hook이란?

쉽게 생각하면 갈고리(hook)를 git에 거는 것과 비슷합니다.

git hook은 git 레포지토리에서 특정 이벤트가 발생할 때마다 자동으로 실행되는 스크립트를 말하는데요.

저는 git commit이 실행되기 전에(pre-commit) 무조건 특정 스크립트가 실행되도록 세팅을 해주었습니다.

이제 실제 세팅 방법을 알아보겠습니다.

1. husky와 lint-staged 설치

npm install npm install --save-dev husky lint-staged

먼저, save-dev로 husky와 lint-staged를 설치합니다.

2. husky 초기화

npx husky init

husky를 초기화하면, package.json에 prepare script가 자동으로 생성됩니다.

그러면 다른 팀원들은 npm i 만해도 .husky 디렉토리가 프로젝트 루트에 자동으로 생성되게 되는 것입니다.

3. 원하는 git hook script 추가

branch가 main이라면 문구를 노출 시키며 종료

if [ "$branch" = "main" ]; then echo "You can't commit directly to main branch" exit 1 fi

husky 스크립트를 쉽게 제공해주는 _/husky.sh 스크립트를 실행

. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

Merge시에 새로 생성된 파일에서 잘못된 import가 발생할 수 있으므로 전역에서 type error

체크

npx tsc --noEmit

<br/>
저는 pre-commit을 위처럼 세팅해주어, main branch에서 작업을 할 수 없고, 전역에서 type error를 체크하도록 설정하였습니다.

꼭 제가 한 것처럼이 아니어도 여러가지 자동화 설정이 가능하니 필요에 맞게 사용하시면 됩니다.
<br/>
## 4. package.json 설정
<br/>
```json
"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "**/*.{tsx,ts}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.css": "stylelint --fix"
  }

lint-staged에 pre-commit을 적용하고 싶은 파일과, 그 명령어를 같이 적어주었습니다.

stylelint까지 연결시켜주면 정말 편하니 추천드립니다.

제가 느낀 husky의 아쉬운 점

husky가 정말 좋지만, 아쉬운 점이 몇 가지있습니다.

1. 스크립트 실행 시간이 꽤 걸린다.

파일의 개수와 코드의 양이 많아질 수록, 스크립트를 실행하는 시간이 점점 길어집니다.

물론 제가 eslint, prettier, stylelint까지 다 걸어두긴 했지만, 커밋 하나 남길 때마다 10초 정도 기다려야하는 게 조금 답답할 때도 있습니다.

그래도 그만큼 코드 검사가 이루어지는 것이니 어쩔 수 없는 것 같습니다.

2. VSCode에서의 버그

스크립트를 실행하는 동안에 vscode 내부의 source control에서 +로 파일을 add 하면 그 파일은 스크립트가 적용되지 않은 상태로 같이 커밋이 되어버립니다. 그래서 꼭 주의하셔야합니다.

마치며

지금까지 husky와 lint-staged 설정법에 대해 알아보았습니다.

husky를 사용하기 전의 프로젝트는 다시는 떠올리기도 싫을 만큼, husky는 이제 협업에서 필수로 세팅해야하는 패키지가 되어버린 것 같습니다.

아직 사용해보지 않은 분들이 계시다면, 협업 프로젝트에서 꼭 한 번 사용해보시기를 강력히 추천드립니다.

제가 전달한 정보에서 잘못되거나 개선했으면 하는 부분이 있다면 언제든 댓글로 알려주시면 감사하겠습니다.

참고 자료

• husky docs

• @doodream velog