git hook / husky / commitlint를 사용해보자!
많은 개발자들이 git을 이용해 협업을 하고, 형상관리를 하고 있습니다. git을 더 효율적으로 사용하기 위한 도구들도 많은데요. 그중에서 git hook / husky / commitlint 가 무엇인지 간단하게 살펴봅시다. 그리고 최종적으로 commit 메시지의 포맷을 통일하도록 만드는 commit-lint를 사용하는 방법이 본 포스팅의 목적입니다. commit 메시지를 검사하고 포맷을 통일하도록 하는 commit-lint의 사용을 위해서 알아야 하는 사전 지식이 git hook과 husky 입니다. 세 개가 한 세트인 듯 합니다! 여기에 commit-staged까지 쓰면 push 할때 코드까지 검증할 수 있는 것 같습니다. 많은 사람들이 commitlint보다는 commit-staged를 더 많이 사용하는 것 같습니다. commit-staged에 commitlint의 기능까지 있어서요. 하지만 본 글에서는 commitlint를 우선 살펴봤습니다. (썸네일만 기여운 허스키지만 허스키는 스쳐지나갈 뿐인...)
많은 블로그를 참고하고 공부하며 나름대로 정리한 글이기에, 잘못된 내용이나 설명이 있을 수 있습니다! 참고해주세요!
* git hook
깃 훅은 프로젝트를 원격 깃 repository에 연결하면 자동으로 생성되는 .git 폴더 안에 있습니다.
hooks라는 폴더 이름으로 들어가 있는데요, 그안에 .sample이 붙은 많은 파일들이 있습니다. 이 파일들은 사용자가 깃과 관련한 특정 행동을 했을 때 (커밋, 푸시 등) 자동으로 실행됩니다. 이를 이용해 여러가지 많은 일들을 할 수 있다고 하는데, 본 글의 최종 목적은 commit 메시지 관리이기 때문에 다음 포스팅으로 미루고 넘어가도록 하겠습니다. 자주 있는 일입니다. 😇 밀린 포스팅이 많네요.
자세한 사항은 git hook 공식 설명(클릭)을 참조해주세요.
* husky
허스키는 node.js 개발 환경에서 git hook을 사용하기 편리하게 만들어주는 도구입니다. husky는 node.js 개발환경에서 아주 손쉽게 사용할 수 있습니다. node 짱짱맨! husky는 오늘 우리의 최종 목적인 commit-lint의 사용도 간편하게 해주고, 이렇게 설정된 값을 다른 개발자들과도 공유하도록 만들어준다고 합니다.
* commitlint
commitlint란 커밋 규칙인 Conventional Commit을 지키도록 도와주는 커밋 메시지 관리 도구입니다. 커밋 규칙을 지키지 않고 커밋하면, 당장은 괜찮지만 나중에 코드 양과 커밋이 많아질수록 관리하거나 협업을 하는데 지장을 줍니다. 이 커밋 규칙을 지키도록 도와주기 위한 간단한 도구가 커밋린트 입니다. 이 커밋린트는 바로 사용하는 방법도 있지만, husky를 이용하면 한결 편리하게 사용할 수 있습니다.
커밋 규약에 대해 더 알아볼까요 ? 공식인지는 모르겠지만 컨벤셔널 커밋 규약(클릭)을 봅시다. 설명이 아주 긴데, 커밋하는 방법에 정해진 형식은 다음과 같습니다.
<type>[optional scope]: <description>
[optional body]
[optional footer(s)]이를 Conventional Commit이라고 합니다. 위의 공식 사이트에 설명이 나름대로 상세하게 나와있습니다.
* husky와 commitlint 사용해보기
1. husky를 설치합니다.
husky를 사용하는데는 여러가지 방법이 있는 것 같습니다. node.js에 적용되는 도구들이 그렇듯이 package.json에 직접 뭔가를 적어넣어서 사용(참고 블로그 링크, 클릭)할 수도 있고, 만들어진 .husky 폴더 안에 commit-msg 파일을 생성하는 방법(참고 블로그 링크, 클릭)도 있는 것 같습니다. 저는 직접 파일을 만들고 넣지 않고 npm으로 패키지를 설치하는 방법을 사용했습니다.
// 터미널에 다음과 같이 입력합니다.
npm install husky --save-dev
// 다음으로 한 번 더 입력합니다.
npx husky install이렇게 설치하고 나면, 프로젝트 파일 목록을 살펴보시면 .husky가 뿅 나타났습니다. 이 안에는 아직 아무것도 들어있지 않습니다.
2. package.json에 husky 설정을 해줍니다.
이 과정이 꼭 필요한지는 잘 모르겠습니다. 이 과정은 husky를 통해 git hook을 실행하기 위해 필요한 것 같기도 합니다. 이 과정을 건너뛰어도 commitlint 기능에는 지장이 없었지만, 혹시 싶어서 넣어둡니다!
3. 이제 커밋린트를 적용해봅시다.
커밋린트는 허스키에 적용하고 패키지로 설치해줍니다.
// 두 가지 방법 중 택 1
// 1. husky로 커밋린트 적용
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
// 2. .husky 폴더 밑에 commit-msg 파일 직접 만들어서 아래 내용 입력
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"
// 다음으로 터미널로 커밋린트 패키지까지 설치해줍니다.
npm install --dev @commitlint/config-conventional @commitlint/cli만약 1을 실행해 패키지 까지 설치했는데 프로젝트 폴더에 commitlint.config.js 파일이 생성되지 않았다면 2를 해줍니다. 벌써 끝났읍니다...! 명령어가 복잡해 보여서 그렇지 간단한 도구여서 간단하게 사용할 수 있습니다.
4. 커밋을 해서 commitlint가 제대로 실행되는지 확인합니다.
- 컨벤션 커밋을 지키지 않고 커밋을 해봅니다. 그러면... 아래 사진처럼 안내 문구가 뜨면서 커밋을 할 수 없습니다.
- 컨벤션 커밋을 지켜서 커밋을 하면 ?
쨘~! 평소처럼 커밋에 성공했다는 알림을 받을 수 있습니다.
제일 위에 있는 hello는 husky를 이용한 git hook중 pre-commit으로 커밋 앞에 따라붙는 메시지로 hello를 설정해서 출력되는 부분입니다. husky와 git hook에 대해서도 공부하면서 포스팅을 해야겠어요!
중간중간에 깃 오류가 엄청나게 많이 났지만... husky와 commitlint를 사용하는 건 그렇게 어렵지 않았습니다! 물론 이 기능도... 잘 쓰려면... 어려운 점이 많겠지만...