코드 정렬 강제로 하기

먼저 이 글이 나오기까지 여러 역경과 고난이 있었음을 알립니다.

코드의 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것을 목적으로 우리 팀은 Prettier와 ESLint를 사용 중이였다.

하지만 협업을 하면서 꼭 규칙을 안지키는 사람이 있기 마련이다.

나의 경우에는 회사에서 이러한 경험을 겪었다. 커밋 시 작업하지 않은 라인까지 수정되는 일이 잦아져서 몇 번이나 지켜달라고 말씀을 전했지만..

이런 태도로 나오셨다..🤯

그래서 프로젝트 매니저와 회의 끝에 Git-Hooks를 이용해 pre-commit단계에서 강제로 Prettier와 ESLint를 돌려주기로 했다.

Husky 적용

먼저 Git-Hooks를 간단하게 적용하기 위해 Husky 모듈을 사용해서 구현을 하였다.
다 구현을 하고 테스트를 하던 도중 문제점이 있었다.

바로 사용 중인 외부 GUI Client에서 Husky가 동작을 안하는 이슈였다.[1] [2] [3]
버전 업그레이드를 하면 해당 문제는 해결이 되는 것으로 보였지만, 그럴 수 없는 환경이였다.

Git bash나 VSCode에서는 동작을 하는데 Git Kraken, 이클립스로 Git을 사용하는 사람도 있었기에 해당 방법 대신 다른 방법을 모색했다.

simple-git-hooks 적용

그래서 조금 더 원시적인 방법으로 접근을 할 수 있는 simple-git-hooks이라는 모듈을 사용했다.
package.json에 미리 git-hooks 파일에 넣을 코드를 스크립트로 작성 후 터미널에서 해당 스크립트를 입력하면 .git/hook폴더 안에 자동으로 git-hooks파일이 생성된다.

다만 .git 폴더는 버전관리 대상이 아니므로 repository에 올라가지 않는다.
그래서 해당 프로젝트의 개발자들이 모두 로컬 환경에서 simple-git-hooks로 정의된 스크립트를 실행해야한다.

//대략적인 프로젝트 구조

/project
  .git
  /sub1
    ...Java project
  /sub2
    package.json
    ...Javascript React project

먼저 Prettier와 ESLint 적용을 위해 모듈을 받아주자.

yarn add prettier
yarn add lint-staged

simple-git-hooks을 이용할 예정이니 simple-git-hooks도 받는다.

yarn add simple-git-hooks

package.json에 정상적으로 추가가 됐음을 확인 했으면 사용할 스크립트를 작성해주자.

  "dependencies": {
      "prettier": "^2.4.1",
      "lint-staged": "^11.2.6",
      "simple-git-hooks": "^2.7.0",
  }

postinstall이라는 스크립트로 simple-git-hooks을 실행시키고, simple-git-hooks는 .git/hooks폴더에 pre-commit이라는 파일을 생성한다.

  "scripts": {
    "postinstall": "yarn simple-git-hooks"
  },
  "simple-git-hooks": {
    "pre-commit": "yarn --cwd sub2 lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "prettier --write ",
      "eslint --fix"
    ]
  },

실제 생성된 .git/hooks/pre-commit 파일을 확인해보면 다음과 같다.

#!/bin/sh

yarn --cwd sub2 lint-staged

앞으로는 개발자가 git commit 명령을 실행하면 pre-commit 훅이 명령을 가로채서 yarn --cwd sub2 lint-staged를 실행하고 나서, 실제 git commit을 실행한다.

자, 그럼 모두에게 공유는 어떻게 해?

쉽다. 간단하다.
위에 작업한 package.json이 repository에 올라간 상황이면 간단하게 모두가 Git-hooks 설정을 공유할 수 있다.

일단 해당 repository을 pull받자.

이후 2단계만 거치면 된다.

yarn install
//기존에 yarn 받으셨어도 새로 받으셔야됩니다.

yarn postinstall
//yarn install이 끝나면 위 명령어를 입력해 git hooks 파일을 생성해 줍니다.

네, 끝입니다.

다만 실수로 yarn postinstall 명령을 실행하지 않으면, 훅 파일이 생성되지 않아서 훅이 동작하지 않는다. 그래서 git clone 후에 필수로 실행해야 하는 yarn install 명령 이후, 자동으로 훅을 생성하도록 postinstall 스크립트도 꼭 함께 실행해 주어야한다.