1. Git hooks

Git hooks란 git과 관련한 어떤 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능이다. 크게 클라이언트 훅과 서버 훅으로 나눌 수 있다.

클라이언트 훅은 commit, merge 혹은 push 전후로 클라이언트에서 실행하는 hook이다.

서버 훅은 Git repository로 push 할 때 서버에서 실행되는 훅이다.

hook에 대한 설명은 여기서 볼 수 있다. https://git-scm.com/docs/githooks

hook을 직접 설정하기 위해 프로젝트 폴더의 .git/hooks 폴더에 hook들의 sample 파일이 있다. sample확장자를 없애고 파일 내용을 수정하여 hook을 사용할 수 있다.

2. Husky

.git 폴더는 버전 관리 대상이 아니므로 깃허브의 레포지터리에 올라가지 않는다. Git hook을 설정하는 것은 까다롭고, 팀원들이 같은 hook을 공유하기 위해서는, 모든 팀원이 레포를 clone하고 사전 설정을 해야한다. 사전 설정을 실수로라도 안했다면 hook이 실행되지 않는다. 따라서 Git hook의 설정을 도와주고, npm install 과정에서 설정해둔 Git hook을 모두 적용시킬 수 있는 husky를 사용하면 편하다.

husky 설치 npm install husky --save-dev
Git Hook 활성화 npx husky install

다음으로 협업하는 팀원들이 Git Hook 활성화 과정을 패키지 설치 후 자동으로 실행하게 하기 위해서 package.json의 scripts에 "postinstall": "husky install" 을 추가한다.

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

prepare스크립트도 있는데 yarn v2+에서는 prepare를 지원하지 않는다고 한다. https://yarnpkg.com/advanced/lifecycle-scripts

따라서 yarn v2 이상을 사용중이라면 npm, yarn 둘 다에서 지원하는 postinstall을 사용하면 된다. https://docs.npmjs.com/cli/v9/using-npm/scripts

새로운 hook을 만들기 위해서는 npx husky add <file> [cmd] 명령어를 사용한다.

npx husky add .husky/pre-commit "npm test" 이 경우는 커밋 전에 npm test를 실행하는 훅을 생성한다.

hook을 공유하기 위해서 생성한 .husky폴더의 파일들을 다른 파일들과 함께 깃 레포에 올리면 된다. 그러면 팀원들은 이 레포를 클론받고 패키지 설치만 하면 "postinstall": "husky install" 스크립트에 의해 husky install이 실행되고 만들어둔 훅은 자동으로 적용이 된다.

3. Lint-staged

lint-staged는 lint를 staged된 파일에만 할 수 있도록 도와주는 라이브러리이다.

lint-staged를 실행할 스크립트를 추가한 후, 어떤 폴더의 어떤 파일에 대해 스크립트를 실행할 것인지 설정하면 된다. 아래의 경우는 모든 tsx, ts, jsx, js파일에 대해 “prettier —wirte”를 실행하도록 설정한 것이다.

// package.json
{
  "scripts": {
		...
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "**/*.{tsx,ts,jsx,js}": [
      "prettier --write",
	  // 원하는 스크립트 여러개 추가 가능
    ]
  }
}

그다음 husky를 이용해 커밋 전(pre-commit)에 lint-staged를 실행할 수 있도록 훅을 추가한다.

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

이렇게 하면 커밋 전에 staged된 파일에 대해 lint-staged에 설정한 대로 스크립트를 실행하게 되고, 이 훅을 husky로 다른 사람과 공유할 수 있게 된다.