문제 상황

협업을 하다보면 포매팅이나 린팅 관련해서 문제가 생기는 경우가 많습니다. 누구는 에디터의 자동 수정 기능을 켜고 누구는 켜지 않는 경우도 있고, 사용하는 에디터가 달라서 자동 포매팅을 해도 스타일이 맞춰지지 않는 경우도 있습니다. 이러한 문제를 해결하는 좋은 방법이 있습니다. 커밋할 때 CLI 툴을 이용해 포매터와 린터를 적용하는 게 그것이죠.

이렇게 하면 여러가지 장점이 있는데요, 2가지만 꼽고 넘어가겠습니다.

• 커밋할 떄 일어나므로 자동 수정이 개발을 방해하지 않습니다.
• CLI 툴을 사용하므로 에디터 룰 떄문에 포매팅이 달라지는 문제가 발생하지 않습니다.

새로운 문제

Git 훅을 이용해서 포매팅을 하는 건 좋은데, 그렇게 하려고 들면 새로운 문제들이 생깁니다. 하나씩 짚어보겠습니다.

Git 훅 설치

보안상의 이유로 git clone을 해도 깃 훅이 구성되지 않습니다. 따라서 clone 할 때마다 직접 깃 훅을 설정해줘야합니다.

자동 수정 범위

pre-commit 훅에서 파일을 포매팅한다고 해봅시다. prettier -w . 처럼 하는 경우, 현재 커밋이랑 관련 없는 파일들까지 포매팅이 되어버립니다. 이러면 훅 실행 시간도 길어지고, 원하지 않는 변경사항들이 생기게 됩니다. 그리고 prettier -w .의 경우 Working tree의 파일들을 대상으로 돌기 떄문에, 동작이 이상해집니다. Staging area에 있는 파일에 문법 오류가 있어도 Working tree의 파일이 문법적으로 올바르다면 훅이 성공해버립니다.

해결법

위의 두 문제를 해결하기 위해 나온 node.js 툴들이 있습니다. husky 와 lint-staged가 그것인데요, 하나씩 알아보겠습니다.

lint-staged: 원하는 파일만 수정

lint-staged는 위의 문제를 해결하기 위해, Staging area에 있는 파일들만을 대상으로 명령어를 돌려줍니다.

설치

node.js 패키지 매니저로 lint-staged 패키지를 설치하시면 됩니다.

# npm
npm i -D lint-staged
# yarn
yarn add -D lint-staged
# pnpm
pnpm i -D lint-staged

package.json 구성

타입스크립트와 자바스크립트를 eslint를 이용해서 자동 수정하는 경우, 아래처럼 설정하면 됩니다.

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

lint-staged는 name, scripts, dependencies 처럼 최상단에 있어야합니다.

husky: Git 훅 관리

• 홈페이지

설치

node.js 패키지 매니저로 husky 패키지를 설치하시면 됩니다.

# npm
npm i -D husky
# yarn
yarn add -D husky
# pnpm
pnpm i -D husky

기본 구성

husky를 통해 Git 훅을 관라히기 위해선 일단 아래 명렁어를 한번 실행하셔야합니다.

npx husky install

이러면 .husky 폴더가 생성되고, Git 훅이 .husky 폴더의 파일들과 연결됩니다. 그런데 위에서도 얘기했지만 git clone 은 레포지토리의 코드를 실행해주지 않습니다. 그래서 node.js의 prepare 스크립트를 사용합니다. prepare 스크립트는 npm i 같은 의존성 설치 스크립트가 전부 실행된 뒤에 실행됩니다.

package.json 파일의 scripts => prepare 에 husky install을 넣어줍니다. 없는 경우 새로 만드시면 됩니다.

{
  "scripts": {
    "prepare": "husky install"
  }
}

이렇게 해놓으면 glt clone 이후 npm i, yarn, pnpm i등을 할 때 Git 훅이 자동으로 구성됩니다.

pre-commit 훅 구성

저희는 위에서 lint-staged를 구성했으므로, 커밋 이전에 lint-staged를 실행하기만 하면 됩니다. 하는 방법은 다음과 같습니다.

npx husky add .husky/pre-commit "npx lint-staged"

이렇게 하신 뒤, .husky 폴더도 Git을 이용해 추적하시면 됩니다.

결론

오늘은 lint-staged와 husky를 구성하는 방법에 대해 알아봤는데요, 레포지토리 관리 자동화는 매우 중요한 작업이므로 앞으로도 자주 다루겠습니다.