팀 단위로 협업을 하는 환경에서는 코드 포맷팅(code formatting)이나 린트(lint) 등 코드 수정이 발생할 때마다 지켜져야 하는 규칙들이 존재할 것이다. 이런 코드 스타일은 세팅파일을 읽어와서 개개인의 에디터에서 직접 자동으로 적용되도록 설정해둘 수 있다. 그러나 Error 또는 Warning이 발생하더라도 코드 자체를 커밋하고 푸시하는 것에 제한이 걸리지 않는다면, 규칙없이 작성된 코드가 머지되고 배포될 가능성이 생긴다. 이를 방지하기 위해 Pull Request를 통해 코드를 머지하는 시점에 해당 규칙을 검사하도록 CI 파이프라인을 만들 수도 있겠다. 그러나 워크플로우를 돌리기 위한 별도의 서버 자원을 사용하고 관리해야 한다는 점, 그리고 소스의 커밋, 푸시가 이미 완료된 시점에서 그 다음 단계에 코드를 검사한다는 게 조금 불편하게 느껴졌다. 그래서 이번 프로젝트에서는 커밋 시점에 개인의 로컬 환경에서 코드 검사가 돌아가도록 설정해보고자 한다. Git commit 시점에 내가 수정한 소스에 한해서 eslint 규칙에 부합하는지 검사하고, 그렇지 않은 코드는 자동으로 픽스해주도록 할 것이다.
husky로 hook 생성하기
Node.js 환경에는 git hook을 관리할 수 있게 해주는 husky라는 패키지가 있다. git 명령어가 실행되면 미리 지정해놓은 스크립트가 실행되도록 관리해주는 도구라고 보면 된다. 얘를 활용해서 린트를 돌려주는 hook을 만들어 보자.
1. 먼저 husky를 dev 의존성으로 설치한다. Git hook을 활성화한다.
# yarn
yarn add husky --dev
# npm
npm install husky --save-dev
2. Git hook을 활성화한다.
# yarn
yarn husky install
# npm
npx husky install
3. package.json을 확인해보면 다음과 같은 스크립트가 생성되어 있을 것이다.
// yarn
{
"scripts": {
"postinstall": "husky install"
}
}
// npm
{
"scripts": {
"prepare": "husky install"
}
}
4. 이제 새로운 hook을 추가해보자. 다음 커멘드를 실행하면 .husky 디렉토리 밑에 pre-commit 파일이 생성될 것이다. 파일 내에는 린트 검사 후 fix 시켜주는 스크립트를 넣어보았다.
# yarn
yarn husky add .husky/pre-commit "yarn lint --fix"
# npm
npx husky add .husky/pre-commit "npm lint --fix"
5. 커밋을 해보면 lint 스크립트가 돌아가는 것을 확인할 수 있다.
여기서 끝! 이면 좋겠지만 이 경우 모든 파일을 대상으로 해당 스크립트가 돌아가게 될 것이다. 프로젝트의 파일 수가 많아질수록 실행 속도도 늘어날 것이고, 혹여나 내 변경사항이 아닌 다른 파일에 린트가 자동으로 적용되는 것은 소스 관리 차원에서도 좋지 않을 것이다. 따라서 변경된 소스에만 hook이 동작하도록 설정해보고자 한다.
lint-staged를 통해 변경한 파일에만 hook 적용하기
lint-staged란 linter가 오직 stage 상태의 파일에만 적용될 수 있도록 도와주는 Node.js 패키지다. 보다 효율적으로 lint가 돌아가게끔 해줄 수 있다.
1. lint-staged를 dev 의존성으로 추가 설치해준다.
# yarn
yarn add lint-staged --dev
# npm
npm install --save-dev lint-staged
2. package.json에 원하는 스크립트를 추가해준다.
"lint-staged": {
"*.{js,ts}": "eslint --fix"
}
3. husky에서 lint-staged를 실행하도록 다음과 같이 pre-commit 파일을 수정해준다.
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
yarn lint-staged
4. 설정 끝! git add 후 staged된 상태의 파일에만 린트를 실행하는지 확인해보자.
결론
모든 git hook을 지원하는 husky는 매우 편리한 도구다. 이번에는 코드 스타일 가이드인 린트를 자동화해보았지만, 보다 다양한 스크립트를 커스텀해서 실행시킬 수 있다. 커밋 시점마다 커밋 메세지에 대한 lint를 돌릴 수도 있고, 코드를 푸시하는 시점에 통합 테스트를 돌릴 수도 있을 것이다. 팀 협업에서 모든 소스는 git에 의해 관리될 것이므로, 이러한 git hook을 잘 사용한다면 CI를 통해 관리되던 많은 작업들이 대체될 수 있을 것이다.
Reference
https://typicode.github.io/husky/
https://github.com/okonet/lint-staged
'Web > Node.js' 카테고리의 다른 글
디펜던시가 latest로 깔렸을 때 (0) | 2023.10.01 |
---|---|
node_modules로부터의 해방, yarn berry를 사용해보자 (0) | 2023.06.04 |
[npm] package-lock.json이 필요한 이유 (0) | 2023.03.12 |