제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

개발 툴

대상자

• 프론트엔드/백엔드 개발자
• 초보자 ~ 중급자 (Git Hooks와 ESLint/Prettier 기본 지식 필요)

핵심 요약

• Husky는 Git Hooks를 간편하게 활용할 수 있는 도구로, pre-commit, pre-push, commit-msg 등에서 코드 품질 검증을 자동화
• ESLint + Prettier와 결합해 console.log() 제거, 코드 포맷 규칙 강제, 커밋 메시지 표준화를 실현
• 자동화된 검증 프로세스로 production 배포 시 오류 발생률 감소

섹션별 세부 요약

1. Husky 설치 및 초기 설정

• pnpm add -D husky 명령어로 설치 후, package.json에 "prepare": "husky install" 스크립트 추가
• pnpm run prepare 명령어 실행으로 Husky 환경 구성

2. pre-commit 훅 설정

• eslint와 prettier 스크립트를 package.json에 정의
• npx husky add .husky/pre-commit "pnpm run lint && pnpm run format" 명령어로 훅 생성

3. ESLint 규칙 추가 (console.log 차단)

• eslint-plugin-no-console 플러그인 설치 후 .eslintrc.js에 규칙 적용
• no-console: ['error', { allow: ['warn', 'error'] }] 설정으로 console.log() 사용 금지

4. 커밋 메시지 표준화 (Conventional Commits)

• @commitlint/config-conventional 설치 후 .husky/commit-msg 훅 추가
• npx --no -- commitlint --edit "$1" 명령어로 커밋 메시지 형식 검증

결론

• Husky + ESLint + Prettier 조합으로 코드 품질 관리 자동화 실현
• commit-msg 훅을 통해 커밋 메시지 형식을 강제해 팀 협업 효율성 향상
• 자동 검증 프로세스를 통해 production 환경 오류 예방 및 유지보수성 증대