Husky와 Lint-staged란? 🤔
Husky와 Lint-staged는 코드 품질을 유지하고, 일관된 코드 스타일을 보장하기 위한 자동화 도구임. Husky는 Git 훅을 통해 특정 이벤트(예: 커밋, 푸시) 발생 시 자동으로 작업을 실행할 수 있게 해주며, Lint-staged는 커밋에 포함된 파일만 검사해 효율적인 코드 검사를 가능하게 함.
이 둘을 함께 사용하면, 코드 스타일 검사와 포맷팅을 커밋 전에 자동으로 수행해 팀 전체의 코드 일관성을 유지하고 코드 리뷰 시간을 줄일 수 있음.
Husky와 Lint-staged를 사용하는 이유 🔄
- 자동화된 코드 검사: 커밋 전에 코드 스타일과 규칙을 검사해 문제를 자동으로 감지하고 수정함.
- 일관성 유지: 팀원 간 코드 스타일을 통일해, 코드 리뷰에서 스타일 관련 논의를 줄이고 코드 품질을 유지할 수 있음.
- 코드 오류 예방: 코드 오류가 포함된 커밋을 방지해, 코드 베이스의 품질을 일정하게 유지할 수 있음.
Husky와 Lint-staged 설치 및 설정하기 📦
1) Husky와 Lint-staged 설치
먼저, 프로젝트에 Husky와 Lint-staged 패키지를 설치해야 함.
npm install husky lint-staged --save-dev설치 후, Husky를 초기화하여 Git 훅을 설정할 수 있음.
npx husky install이 명령어는 프로젝트 루트에 .husky/ 폴더를 생성하고, Git 훅을 활성화함.
2) Husky로 Git 훅 설정하기
Husky로 Git 훅을 설정하여, 특정 이벤트 발생 시 작업을 자동으로 실행할 수 있음. 예를 들어, 커밋 전에 pre-commit 훅을 설정하려면 아래 명령어를 입력함.
npx husky add .husky/pre-commit "npx lint-staged"이 명령어는 .husky/pre-commit 파일을 생성하고, 커밋 전에 lint-staged를 실행하도록 설정함. 이후 커밋할 때마다 lint-staged가 실행되며, 커밋된 파일을 검사함.
3) Lint-staged 설정하기
Lint-staged는 커밋할 파일만 검사하도록 설정할 수 있어, 더 빠르고 효율적인 검사 작업을 수행할 수 있음. package.json에 lint-staged 설정을 추가함.
{
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write"
]
}
}위 설정은 JavaScript 파일(*.js)에 대해 ESLint와 Prettier를 사용하여 스타일과 규칙 검사를 자동으로 수행함.
eslint --fix: 커밋할 파일에 ESLint 규칙을 적용하여 자동으로 수정.
prettier --write: Prettier로 코드 포맷팅을 자동으로 수행.
Husky와 Lint-staged 설정으로 얻을 수 있는 이점 🌟
- 자동화된 코드 정리: Lint-staged로 코드 스타일을 자동으로 정리해, 커밋할 때마다 일관된 코드 스타일을 유지할 수 있음.
- 코드 품질 유지: Husky의 Git 훅을 통해, 코드 품질과 스타일 검사를 자동화해 실수로 코드 규칙을 어기는 것을 방지함.
- 팀 협업 강화: 코드 스타일이 통일되면 코드 리뷰 시간을 절약할 수 있고, 코드 품질과 가독성이 개선됨.
- 개발 효율성 증대: 커밋 전에 자동화된 검사가 이루어져, 코드 베이스의 품질을 일정하게 유지할 수 있음.
고급 설정: 커밋 메시지 검사 및 푸시 전 검사 🛠️
Husky는 pre-commit뿐만 아니라 커밋 메시지 검사나 푸시 전 검사에도 사용할 수 있음.
1) 커밋 메시지 검사
커밋 메시지 규칙을 검토하는 Git 훅을 설정할 수 있음. 예를 들어, 커밋 메시지가 특정 형식을 준수하도록 검사하려면 다음과 같이 설정함.
npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'2) 푸시 전 검사
pre-push 훅을 추가하여 푸시 전에 테스트를 자동으로 실행할 수도 있음.
npx husky add .husky/pre-push "npm test"