프로젝트를 위한 협업을 진행할 때 프론트엔드 개발자들은 서로 다른 코드 스타일을 최대한 비슷하게 만들기 위해 여러가지 규칙을 설정한다.

이를 위해서 우리는 “ESLint 규칙과 Prettier 규칙” 을 활용하게 된다.

🤔 airbnb 규칙은 과하게 제한된 규칙인것 같아요.

🫨 제 컴퓨터에서는 lint 오류가 발생하지 않아요.

이때까지는 이런 문제점을 해결하기 위해

1. airbnb 규칙을 그대로 사용하기 보다는 필요한 규칙만을 사용해보자
2. github action을 활용해 pr 에서 lint 테스트와 build 테스트를 진행해보자

이렇게 규칙을 정해놓고, 프로젝트를 진행한 경험이 많다.

그럼 github action으로 계속 진행하면 되는거 아닌가요?

요즘은 개발을 진행할때 chatGPT를 많이 사용하다보니 코드를 재사용하지 않고, 새로 작성하면서 서로 충돌되는 경우가 많이 발생한다.

물론 확인안하고 그대로 옮겨적었기 때문에 발생한 오류라서 나는 핑계라고 생각한다 ㅎㅎ

아무튼 github action을 활용해서 lint 테스트와 build를 진행해보며 테스트를 진행해보는게 머릿속으로 할 수 있는 테스트의 최선이었다.

하지만 이 방법의 경우 아래 그림과 같이 불필요한 과정이 반복되고, 오류가 발생했을때, 해당 부분을 수정해서 다시 Commit 을 진행해야한다는 단점이 있다.

이 과정들이 필요하긴 하지만 반복될 이유는 없다고 생각했다. 그래서 방법을 알아보던 중 “Husky” 라는 친구를 이용하면 커밋단계에서 lint검사와 포맷팅 검사를 실행할 수 있다고 한다.

Husky? Git Hooks?

Husky

Husky는 커밋을 더 똑똑하게 만들어줍니다 🐶 woof!

커밋하거나 푸시할 때, 커밋 메시지를 자동으로 검사하고, 코드 lint 및 Test까지 실행해줍니다.

이를 통해 코드 품질을 유지하고, 실수를 줄일 수 있습니다.

→ Husky 공식문서

Git Hooks

GIt Hooks는 Git 과 관련된 어떤 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능이다.

크게 클라이언트 훅 과 서버 훅으로 나뉘는데, 클라이언트 훅은 커밋, Merge가 발생하거나 push가 발생하기 전 클라이언트에서 실행하는 훅이다.

반면 서버 훅 은 Git repository로 push가 발생했을 때 서버에서 실행하는 훅이다.

우리가 사용할 것은 이 중 클라이언트 훅 이다.

클라이언트 훅

클라이언트 훅 은 커밋 워크플로 훅, 이메일 워크플로 훅, 그리고 기타 훅 으로 분류할 수 있다.

• 커밋 워크플로 훅 : git commit 명령으로 커밋을 할 때 실행하는 훅
• 이메일 워크플로 훅 : git am 명령으로 이메일을 통해 patch 파일을 적용할 때 실행하는 훅
• 기타 훅 : Rebase, Merge, Push 와 같은 이벤트를 실행할 때 실행하는 훅

Husky를 사용해보자

husky 설치

pnpm add --save-dev husky

husky init

pnpm exec husky init

lint-staged를 통해 변경한 파일에만 hook 적용하기

lint-staged란 linter가 오직 stage 상태의 파일에만 적용될 수 있도록 도와주는 Node.js 패키지다. 보다 효율적으로 lint가 돌아가게끔 해줄 수 있다.

lint-staged 설치

pnpm add --save-dev lint-staged

package.json에 script 추가

"lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "eslint --cache --fix",
      "prettier --write"
    ]
  },

eslint cache?

lint 검사를 진행할때 기존에 검사를 했던 부분은 .eslintcache 에 저장하여 건너뛰고, 새롭게 수정된 부분만 lint 검사를 진행한다.

pre-commit 파일 수정

husky에서 lint-staged를 실행하도록 다음과 같이 pre-commit 파일을 수정해준다.

.husky / pre-commit

echo "let's check the code! =^ . ｡.^="

pnpm lint-staged

lint-staged를 이용한 검사에 통과하지 못했다면?

이렇게 husky를 활용하면 commit 단계에서 lint검사와 포맷팅 검사를 수행할 수 있다!

크로스 체크를 진행할 겸 github action을 활용한 lint 테스트와 build 테스트도 기존과 동일하기 진행하고 있다.

출처

husky 공식문서

husky 로 git hook 하자

husky & lint-staged로 린트 검사 자동화하기