husky로 git hook 관리하기

배경

예전부터 프로젝트를 구경하다보면 husky라는 폴더가 있었다. 그래서 이게 뭔지 왜 사용하는지 알아보려고 한다.

husky란

husky는 git hook 사용을 도와주는 라이브러리다. 그럼 그전에 git hook이 뭔지부터 알아야한다.

Git도 다른 버전 관리 시스템처럼 어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있다. 이 훅은 클라이언트 훅과 서버 훅으로 나눌 수 있다. 클라이언트 훅은 커밋이나 Merge 할 때 실행되고 서버 훅은 Push 할 때 서버에서 실행된다. 더 자세한 내용은 아래 링크를 참조
https://git-scm.com/book/ko/v2/Git%EB%A7%9E%EC%B6%A4-Git-Hooks

즉 husky를 사용하면 git을 사용할 때 특정 스크립트를 실행시킬 수 있는 라이브러리다.

정확히 어디에 사용할건데??

일단 많이 사용되는 예시를 보면 prettier, lint, test가 있다. 협업을 진행하다보면 prettier나 lint가 적용되지 않고 git에 올라오는 경우가 가끔씩 존재한다. 이런 경우에 유용하다. 또 코드를 수정하면서 기능적인 부분이 달라진다면 테스트 코드도 실행해봐야 한다. 직접 수동으로 할 수도 있지만 사람은 기계가 아니기에 까먹기 마련이다. 그래서 github actions에서도 린트나 테스트를 미리 실행시키기도 한다.

직접 사용해보기

yarn add -D husky로 husky 설치

package.json에 아래 코드 작성

  "scripts": {
    "prepare": "husky install",

yarn prepare 로 husky 폴더 생성

아래 코드로 특정 이벤트에 실행할 스크립트를 넣어준다. 훅은 실제 git의 훅과 동일하기 때문에 git hooks만 알고있다면 따로 명령어를 외울필요는 없다. 아래 코드는 commit을 했을 때 lint를 실행하고 push를 했을 때 test를 하는 코드다.

npx husky add .husky/pre-commit "yarn lint"
npx husky add .husky/pre-push "yarn test"

lint-staged

그런데 하나의 파일이 바뀌었는데 모든 파일의 린트 설정을 확인할 필요가 있을까?? 그래서 stage 단계에 있는(git add) 파일들만 검사를 해주는 라이브러리가 있다. yarn add -D lint-staged 으로 설치하고 아래와 같이 적용하면 된다.

  "scripts": {
    "lint:fix": "eslint src --ext .ts --parser-options=project:'tsconfig.json' --fix",
     lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "yarn lint:fix",
      "prettier --write"
    ]
  },

보너스

종종 하나의 패키지안에 프론트와 서버를 같이 관리하는 경우가 있다. 처음에는 각각의 폴더에 husky를 적용하려고 했는데 이는 잘못된 방법이다. husky는 git hook 사용을 도와주는 라이브러리다. 즉 각각의 폴더에서 적용할 수 없다. 그래서 전체 패키지에서 설치를 하고 내부적으로 명령어를 이용해서 프론트, 서버에 접근해야 한다. 아래와 같이 말이다.

  "scripts": {
    "prepare": "husky install",
    "test": "cd client && yarn test:clean && cd../server && yarn test:clean",
    "lint": "cd client && yarn lint && cd../server && yarn lint",
    "lint:fix": "cd client && yarn lint:fix && cd../server && yarn lint:fix",
    "lint-staged": "cd client && yarn lint-staged && cd../server && yarn lint-staged"
  },

또한 이렇게 커밋이나 푸시를 할때마다 스크립트를 실행하게 되면 당연하게도 시간이 걸린다. 테스트를 예로들면 프로젝트가 커지면 한번 푸시를 할 때 30분이 걸릴수도 있다. 뭐든지 상황을 보고 적절하게 사용하자