git hook / husky / commitlint를 사용해보자!

백엔드

by 짱의 조건 2023. 2. 2. 15:35

많은 개발자들이 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를 해줍니다. 벌써 끝났읍니다...! 명령어가 복잡해 보여서 그렇지 간단한 도구여서 간단하게 사용할 수 있습니다.