11월 2주차 git hook, husky, commitlint

[JeGwan]

Git hook 이란

참고 : https://git-scm.com/book/ko/v2/Git%EB%A7%9E%EC%B6%A4-Git-Hooks

• 깃 훅은 어떤 이벤트 생길때 자동으로 특정 스크립트를 실행하게 해줌.
• 클라이언트 훅과 서버 훅이 있음.
• 클라이언트 훅은 커밋이나 머지할 때 클라이언트에서 실행 실행.
• 서버 훅은 Push할 때 서버에서 실행.

Git 이 설치해주는 기본 훅

• git이 프로젝트를 깃으로 초기화할 때 깔아주는 기본 훅들이 있음
• sample 이라는 확장자가 붙어서 실행하지는 않음
• sample 떼면 실행해줌 !

실제로 pre-commit.sample 에 가면 어떤 스크립트들이 미리 쓰여져 있는데 이건 나중에 다뤄보겠음.

이번엔 보다 단순한 pre-commit 이라는 스크립트를 다뤄보겠음.

#!/bin/sh
# husky

# Created by Husky v4.3.8 (https://github.com/typicode/husky#readme)
#   At: 2021-7-6 2:56:50 ├F10: AM┤
#   From: /Users/one/Project/cspro/cspro-user/node_modules/husky (https://github.com/typicode/husky#readme)

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

잠깐 알고갈만한 linux 명령어 두가지

• basename {path:string} : 경로 입력중 마지막 / 뒷부분만 표준 출력(stdout)에 써줍니다.
  • basename /Users/one/Project -> Project
  • basename /Users/one/.zshrc -> .zshrc
• dirname {path:string} : basename과 정반대. 마지막 슬래쉬 앞의 문자열을 stdout으로 출력.
  • dirname /Users/one/Project -> /Users/one
  • dirname /Users/one/.zshrc -> /Users/one

한마디로

• basename 은 arg로 들어온 path의 마지막 폴더 혹은 파일을 출력해주고

• dirname은 path가 속한 디렉토리를 출력해줌.

• dirname $0은 실행된 쉘스크립트의 실행경로를 알려줌.

test.sh 파일

#!/bin/sh
dirPath=`dirname $0`
echo $dirPath

실행

sh ./test.sh
# .
sh /Users/one/Project/test.sh
# /Users/one/Project

실제로 ./.git/hooks/pre-commit에 무언가 작성해보자

# pre-commit 파일
echo "[${GIT_AUTHOR_NAME}]님 commit을 시작합니다 👋"

git commit -m "some commit"

# stdout
[오제관]님 commit을 시작합니다 👋

이렇게 하면 커밋할 때마다 깃으로 설정된 작성자 이름과 함께 웰컴 메시지를 출력할 수 있다.

pre-commit hook

• pre-commit은 커밋할 때 가장 먼저 호출됨
• exit 코드가 0이 아니면 커밋이 취소됨 (이를 통해 무언가 검증하고 실패하면 커밋을 취소시킬 수 있음)
• pre-commit을 생략하려면 git commit --no-verify로 플래그를 추가하여 실행

prepare-commit-msg hook

• 커밋 메시지를 프로그램으로 손보고 싶을 때
• 커밋 메시지가 들어 있는 파일의 경로, 커밋의 종류를 인자로 받음
• 이를 통해 커밋 메시지 템플릿에 정보를 삽입할 수 있음

Git 이 설치해주는 기본 훅의 한계

• 기본적으로 .git 폴더를 git으로 tracking이 안됨
• 때문에 같은 레포를 작업하는 공동작업자들에게 똑같은 훅이 실행되게 할수가 없음
• 이를 위해 레포 자체의 훅을 설정하기 위해 husky가 등장

husky

허스키는 git hook을 레포 자체에 저장 & 핸들링하기 편하게 하기 위해 등장.

설치

npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2

v0 에서는 git hook에 대한 설정을 자바스크립트 파일 또는 package.json의 husky 필드에서 설정할 수 있었는데 지금은 .husky/ 디렉토리의 개별 파일로 관리되고 있다.

두개의 문제가 있었다.

• JS가 필요 없을 때도 node가 한번 돌아감.
• .huskyrc.js 설정파일에서의 삭제가 git hook 파일에 반영되지 않는 문제, 즉 동기화를 위해 추가 작업이 필요했음.

참고 : https://blog.typicode.com/husky-git-hooks-javascript-config/

2016년 git 2.9가 core.hooksPath를 소개 되면서 이제 꼭 .git/hooks 디렉토리에 깃훅 스크립트를 추가할 필요가 없게 되었음. 이를 바탕으로 허스키가 새롭게 구성됨

• husky install 명령은 git에게 .husky/ 폴더를 깃훅 디렉토리로 삼게함
• 허스키는 추가적인 기능을위해 독립적인 작은 래퍼 스크립트를 생성함
• 이를 통해 필요하지 않은 깃훅이 존재하는 것을 방지하고, 깃훅 정의파일을 한곳에 위치시킴
• 반대로 말하면 허스키로 훅을 생성하면 허스키의 순수한 shell 스크립트가 직접 접근됨.
• 깃과 작업자 사이에 다른 것이 존재하지 않게 됨.(더이상 js를 매번 실행하지 않음.)

이제부턴 새로운 깃훅을 추가할 때 다음과 같이 husky 를 통해 생성할 수 있음.

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

여튼 한번 설치 해주면 이제 .husky 밑에 깃훅의 이름으로 스크립트를 생성해두면 된다.

이제 커밋 전 커밋 메시지를 린트해보자!

commitlint

팀마다 커밋 메시지 컨벤션이 있다.

유명한 커밋 컨벤션들은 아래와 같다.

• 컨벤셔널커밋(https://www.conventionalcommits.org/en/v1.0.0/) : <type>[optional scope]: <description>
• 유다시티(http://udacity.github.io/git-styleguide/) : feat: {message} (컨벤셔널 커밋을 차용)
• 깃모지(https://gitmoji.dev/) : :sparkles: {message} === ✨ {message}

나는 개인 레포에서 유다시티 커밋 컨벤션을 쓰는데 이유는 깃모지는 너무 타입이 많아서 외우기 쉽지 않고 유다시티는 오로지 7가지 커밋 타입으로 기억하기 쉬워서이다.

설치

https://commitlint.js.org

닥스에서는 글로벌로 설치하는데 나는 레포에 데브 디펜던시로 명시하는 것을 선호한다.(협업하는 구성원들에게도 설치되게)

# 패키지 설치
yarn add -D @commitlint/cli @commitlint/config-conventional

# config 파일 만들기
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

이후 commitlint.config.js에서 설정해주면 된다.

설정은 했으니 이제 허스키를 통해 커밋을 할때 실행되는 깃훅에 커밋린트가 실행되게 하자.

yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

이제 커밋을 하면 다음과 같이 실행된다

• pre-commit 깃훅으로 yarn test가 실행
• commit-msg 깃훅으로 yarn commitlint --edit $1가 실행

그리고 config 파일에서 기본적으로 컨벤셔널 커밋 컨벤션을 익스텐즈하고 있기 때문에 해당 룰이 적용되어있다.

type(scope?): subject
body?
footer?

나만의 커스텀 룰을 만드려면 extends를 없애고 처음부터 만들어도 될 것 같은데 여기선 건너뛴다. 컨벤셔널 커밋을 override 하여 룰을 만들어보자.

rules 참고 : https://commitlint.js.org/#/reference-rules

설정파일에 rules라는 필드를 달고 그 밑에 약속된 키들을 사용하여 룰을 정의할 수 있다. 각 룰은 배열 형태로 다음을 담는다.

const Configuration = {
  rules: {
    '약속된-룰-이름': [level, applicable, value],
  },
}
//  level:0|1|2 => 0은 룰을 끈다, 1은 경고 메시지, 2는 에러메시지를 띄운다.
//  applicable:'always'|'never' => always는 항상 적용, never는 적용하지 않음.
//  value: 해당 규칙을 위한 값들

나는 다음 룰들을 추가했다.

• 제목은 문장형태로 (영문 첫문자 대문자)
• 타입은 명시한 7가지 타입으로

const Configuration = {
  rules: {
    'subject-case': [2, 'always', 'sentence-case'],
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore'],
    ],
  },
}

이제 테스트를 해보자

git commit -m "otherType: Add feature"
# ✖   type must be lower-case [type-case]
# ✖   type must be one of [feat, fix, docs, style, refactor, test, chore] [type-enum]
git commit -m "fix: add feature"
# ✖   subject must be sentence-case [subject-case]

잘 잘동된다~! 에러메시지까지 커스터마이징 하고 싶은데 아직 방법이 없는듯 하다.