husky + lint-staged가 필요한 이유 (prettier + eslint)

 

오늘의 문제 - github Merge 중에 발생한 문제 

다음과 같이 수정사항을 업데이트하고 merge를 했는데 Vecel에서 문제가 발생했다고 경고창이 떴다. 

 

 

 

group/management/managementClient.tsx 파일에서 Table에 대한 issue가 있었다.

이번 수정사항이 Table에 관련된 내용이었는데,  이거에 대한 issue를 commit전에 체크하지 못했기 때문에 merge 하는 과정에서 다음과 같은 이슈가 생겼다. 

 

어떻게 문제를 해결할 수 있을까? 

Git commit 이나 push 전에 코드를 확인하고 문제가 있으면 이전 행위를 막을 수 있는 무언가가 있으면 좋지 않을까 생각을 했고, 

해당내용을 구글링을 통해서 해결할 수 있는 방안을 모색했다. 

 

 

Git에는 Git hook이라는 버전관리 시스템이 있는데, 이것의 기능은 다음과 같다. 

 

특정 상황에 특정 스크립트를 실행하는 것 

 

 

Git hook은 클라이언트 훅과 서버 훅으로 나눠져 있지만 우리가 다룰 내용은 클라이언트 훅이다. 

클라이언트 훅 : commit, merge, push 발생 전 클라이언트에서 실행됨

 

더 자세한얘기가 궁금하다면,  아래 링크에서 확인하면 좋을거 같다. 

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

Git - Git Hooks

 

 

클라이언트 훅

클라이언트 hook의 로직은 위와같다. 

 

 

클라어언트 훅도 종류가 여라가지가 있지만 우리의 문제를 해결하기 위해서 사용해야될것은 pre-commit 이다. 

 

pre-commit
 훅은 커밋할 때 가장 먼저 호출되는 훅으로 커밋 메시지를 작성하기 전에 호출된다. 이 훅에서 커밋하는 Snapshot을 점검한다. 빠트린 것은 없는지, 테스트는 확실히 했는지 등을 검사한다. 커밋할 때 꼭 확인해야 할 게 있으면 이 훅으로 확인한다. 그리고 이 훅의 Exit 코드가 0이 아니면 커밋은 취소된다. 물론 git commit --no-verify 라고 실행하면 이 훅을 일시적으로 생략할 수 있다. lint같은 프로그램으로 코드 스타일을 검사하거나, 라인 끝의 공백 문자를 검사하거나(예제로 들어 있는 pre-commit훅이 하는 게 이 일이다), 새로 추가한 코드에 주석을 달았는지 검사하는 일은 이 훅으로 하는 것이 좋다.

by Git - GitHooks 

 

pre-commit을 활용해서 커밋을 할때 코드에 대한 lint같은 프로그램으로 코드 스타일을 검사하거나, 라인 끝의 공백 문자를 검사를 진행할 수 있다. 

 

husky에 대한 소개

현대적인 네이티브 Git Hooks가 쉬워졌습니다.
Husky는 당신의 커밋과 그 이상을 향상시킵니다. 멍!
커밋 또는 푸시 시 자동으로 커밋 메시지 , 코드 및 테스트를 린트합니다 .
여기에서 시작하세요 .
v9 변경 로그를 확인하여 새롭고 향상된 기능을 모두 알아보세요! 🚀

 

 

husky는 git hooks를 쉽게 적용하게 해주는 라이브러리이다.  

git hook은 설정이 까다롭고, 모든 팀원들이 사전에 repo를 클론받고 메뉴얼하게 사전 과정을 수행해야지만 hook이 실행됨을 보장할 수 있다. 실수로라도 사전 과정을 시행하지 않는다면 hook이 실행되지 않기 때문에 husky를 이용해서 쉽게 사용하려고 한다. 

 

 

Husky 설치

설치과정은 공식홈페이지에 들어가면 자세히 나와있다.

 

Install

npm install --save-dev husky

 

 

husky init
init 명령어를 사용하면 프로젝트에서 husky를 간편하게 설정할 수 있습니다. 이 명령어는 .husky/에 pre-commit 스크립트를 생성하고 package.json의 prepare 스크립트를 업데이트합니다. 나중에 워크플로에 맞게 수정할 수 있습니다.

npx husky init

 

 

 

 

 

이제 pre-commit 파일안에 commit 시 실행시킬 scripts 명령어를 추가하면된다. 

 

명령어로 추가하고 싶으면

npx husky add .husky/pre-commit "npm run prettier"
npx husky add .husky/pre-push "npm run lint"

 

이런식으로 적용하면 되고, 

 

그냥 직접 적어도 잘 작동한다. 

 

 

Line-staged 

Linting은 코드를 커밋하기 전에 실행하는 것이 더 합리적입니다. 이렇게 함으로써 저장소에 오류가 들어가지 않고 코드 스타일을 강제할 수 있습니다. 그러나 전체 프로젝트에 lint 프로세스를 실행하는 것은 느리고, lint 결과가 무의미할 수 있습니다. 최종적으로는 커밋될 파일만 lint하고 싶습니다.
이 프로젝트에는 특정한 glob 패턴으로 필터링된 스테이지 파일 목록을 인자로 받아 임의의 셸 작업을 실행하는 스크립트가 포함되어 있습니다.

by lint-staged

 

Lint-staged를 이용하면 현재 staging 상태의 코드들에 대해서만 Lint 체크를 수행할 수 있다. 즉, 특정 커밋의 변동 사항에 대해서만 Lint 체크가 수행되는 것이다. 매 커밋 시 전체 코드에 대한 Lint 체크가 수행되면 이미 룰을 통과한 코드들에 대한 재검사가 이루어져 엄청난 비효율이 발생하는데, Lint-staged는 이러한 비효율을 제거해준다. 

 

설치하기

npm install --save-dev lint-staged # requires further setup

 

 

package.json 내용 추가하기

 

pre-commit에 내용 추가하기 

 

 

 

정리

기존에도 husky와 lint-staged를 우리팀에서 사용하고 있었다. (사실 적용한사람도 난데...)

근데 개인프로젝트를 맡으면서 다음과 같은 설정은 안하고 프로젝트를 진행했었다. 협업이 아니였기에 필요없을 줄 알았으나, 
나또한 실수를 하기 마련이었다. 그러면서 husky과 lint-staged에 대한 사용이유와 방법에 대해 정리를 한번하고싶었고 유익한 시간이었다. 사실 이런것들은 적용하면 좋다 이런얘기만 많이들었지 사실 몸으로 채감하지는 못했는데 이렇게 문제가 발생함을 느끼고 이유에 대해 알고나니 좋은 경험을 한거같다. 다른분들도 도움이 됬으면 좋겠다. 

 

 

 

참조 사이트 

 

https://typicode.github.io/husky/

Husky

https://github.com/lint-staged/lint-staged

GitHub - lint-staged/lint-staged: 🚫💩 — Run linters on git staged files

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

Git - Git Hooks

https://techblog.woowahan.com/2530/

훅으로 Git에 훅 들어가기 | 우아한형제들 기술블로그

https://velog.io/@rookieand/Git-Hook%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B4%EA%B3%A0-Husky%EB%8A%94-%EC%99%9C-%EC%93%B0%EB%8A%94%EA%B1%B8%EA%B9%8C

Git Hook은 무엇이고, Husky는 왜 쓰는걸까?

https://library.gabia.com/contents/8492/

가비아 라이브러리

https://one-armed-boy.tistory.com/entry/Husky-Lint-staged%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-Pre-commit-Hook-%EA%B5%AC%ED%98%84

Husky, Lint-staged를 이용한 Pre-commit Hook 구현