🙈 Prologue

이번에 새로운 프로젝트를 세팅하며 이 프로젝트가 추후 다양한 사람들에 의해 수정될 것을 고려하여 테스트 및 린트가 자동적으로 이뤄질 수 있도록 세팅이 필요하다고 생각하였습니다. 그래서 husky를 린트 및 테스트를 자동화시키며 그 과정을 기록하였습니다.

husky를 통해 구현하고자 한 영역은 아래와 같이 4가지였습니다.

1. commit시 스테이징된 파일에 대해서 eslint, prettier, stylelint 검사
2. 스테이징 파일에 테스트코드가 포함되어 있을 경우 테스트코드 실행
3. 린트에 맞지 않는 부분은 자동으로 fix되어 커밋
4. 테스트코드에서 오류가 나는 경우 커밋되지 않도록

1. 사전에 세팅해야 하는 것

일단 해당 테스트와 린트를 자동화시키기에 앞서 팀 내에서 정한 컨벤션에 따라 eslint와 prettier, stylelint를 설정하였고 jest세팅을 하였습니다. 이후, 해당 작업들이 cli로 직접 하지 않아도 커밋시 이뤄질 수 있도록 아래 두 가지 라이브러리를 설치하였습니다.

yarn add -D husky lint-staged

husky는 프론트엔드 개발 환경에서 git hooks를 손쉽게 제어하도록 도와주는 라이브러리입니다. git에 대한 특정 이벤트가 발생했을 때, 특정 스크립트가 실행되도록 도와줍니다. git hooks를 제어하는 것에 해당 라이브러리를 도입한 이유는 원격 레포에서 공유되어야 하는 프로젝트라고 생각하여서였습니다. .git 디렉터리에 저장되는 경우 원격으로 저장하고 관리하기 어려워 해당 라이브러리를 도입하였습니다.
lint-staged는 변경된 파일만 린트를 적용하고 테스트하기 위해 도입하였습니다. 기존에 커밋할 때마다 모든 파일들에 대해 린트가 검사되는 코드 베이스에서 작업해본 적이 있었는데, 파일 품이 커질수록 테스트 시간이 너무 길어졌던 경험이 있어 staging된 파일에 대해서만 린트와 테스트가 실행될 수 있도록 해당 라이브러리를 도입하였습니다.

2. 자동화시킬 스크립트 등록하기

1. package.json에 lint-staged를 설정합니다.

     "lint-staged": {
       "*.{ts,tsx}": [
         "eslint --fix",
         "prettier --write",
         "stylelint --ignore-path .gitignore '**/*.(css|tsx)' --fix",
         "jest --ci",
         "git add"
       ],
       "*.+{json|css|md}": [
         "eslint --fix",
         "prettier --write",
         "stylelint --ignore-path .gitignore '**/*.(css|tsx)' --fix",
         "git add"
       ]
     }

   저는 앞서 설정해준 린트와 테스트가 staged 상태에서 이뤄질 수 있도록 스크립트를 설정해주었습니다.

2. 아래 명령어를 통해 pre-commit시 lint-staged 스크립트가 실행될 수 있도록 지정해줍니다.

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

위와 같은 과정을 통해 스테이징된 파일에 대해 린트 및 테스트가 자동적으로 이뤄질 수 있도록 설정할 수 있었습니다 :)