🐶 Husky가 뭔가요
모노레포로 개발 환경을 설정하면서 다른 팀원분들의 레포지토리를 많이 참고했는데 husky라는 라이브러리를 많이 쓰시는 것을 알게 되었다. 그리고 멘토링을 받으면서 자동화에 관심이 있다면 husky 사용을 추천받아 husky가 뭔지 알아보기로 했다.
EsLint를 강제하는 방법
이전에 팀원과 코드를 깔끔하게 작성하기 위해, 유지보수를 위해, 팀이 하나의 공통된 코드 스타일을 사용하고 코드의 품질을 올리기 위해 eslint, prettier를 사용하기로 했다. prettier는 auto save를 설정해놨기 때문에 어길일이 없지만 eslint를 명령어로 돌려야 돌아가게 된다. 그래서 PR을 올리기 전에 lint를 한 번 돌리고 올려야 하는데 만약 이를 까먹고 안 하는 경우가 발생한다면? 코드 리뷰를 할 때마다 컨벤션 안지키셨어요 매번 말할기도 어려울 것이다. 그렇지만 사람인데 실수를 할 수도 있는법… 그러면 애초에 실수를 막을 수 있는 방법이 없을까? PR을 올리기 전에 너 lint 규칙 안 지켰잖아! 라고 알려줄 수 있는 방법이 있다면 좋을 것이다.
Git Hooks를 사용하자
그럴 때는 Git hooks을 사용하면 된다. git hooks는 git과 관련된 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있게 도와준다. 그래서 예를 들어서 팀원이 eslint를 꼭 돌리고 커밋을 했으면 좋겠다면 commit을 할 때마다 lint를 실행하는 스크립트를 연결하면 되는 것이다.
Git Hooks 설정 방법
git hooks를 설정하는 방법은 .git 폴더에 hooks 폴더를 만들고 정해져 있는 훅 이름으로 스크립트 파일을 만들면 된다. 훅의 종류는 다양한데 공식 사이트를 참고하면 된다. 예를 들어서 commit 전에 실행하고 싶다면 pre-commit 훅을 사용하면 되는데 pre-commit.sh 파일을 .git/hooks 안에 만들면 되는 것이다.
Git Hooks를 팀원과 공유하는 방법은?
git hooks는 .git 폴더 안에 생기는데, .git 폴더는 버전 관리 대상이 아니기 때문에 Git hooks을 공유하기 까다로울 수 있는데 husky가 바로 git hooks 공유를 쉽게 도와준다.
Husky로 eslint 강제하기
eslint를 강제로 지켜 코드의 품질을 올리는 게 좋아보였다. 그래서 나도 husky를 이용해 git hooks를 쉽게 세팅해서 commit 전에 lint 스크립트를 실행하기로 했다.
Husky 설치
공식 사이트를 따라 husky를 우선 설치하기로 했다.
package manager는 pnpm을 사용하고 있었기 때문에 다음 명령어를 실행한다.
pnpm add --save-dev husky
초기화하기
그 다음에는 init 명령어를 수행해도 되는데, init 명령어를 수행하면 프로젝트에 husky를 쉽게 설정할 수 있다. init 명령어를 실행하면 기본으로 pre-commit 스크립트를 .husky/ 에 만들어주고 package.json에 prepare 스크립트를 기본적으로 만들어준다.
pnpm exec husky init
Script 작성하기
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
RED='\\033[0;31m'
GREEN='\\033[0;32m'
YELLOW='\\033[0;33m'
NC='\\033[0m'
printf "${YELLOW}🔍 pre-commit 훅을 실행합니다.${NC}\\n"
printf "${YELLOW}📝 lint-staged script 실행...${NC}\\n"
pnpm lint-staged || {
printf "${RED}❌ Lint-staged script 실행을 실패하셨습니다.${NC}\\n"
exit 1
}
printf "${GREEN}✅ prettier가 자동으로 수행되었으며, lint 검사를 모두 통과하셨습니다.${NC}\\n"
참고
https://velog.io/@jiynn_12/개발자로-협업하기-husky