Husky의 동작 과정과 원리

husky

 

Husky는 Git Hook을 활용하여 코드 품질을 유지하고 오류가 포함된 코드가 커밋되는 것을 방지하는 도구다.

Git Hook이란 Git의 특정 이벤트(예: 커밋, 푸시)가 발생할 때 실행되는 스크립트인데,

Husky는 이를 활용하여 자동으로 ESLint, Prettier, 테스트 실행 등을 수행할 수 있다.

 

✅ 1. Husky 패키지 설치

npm install --save-dev husky lint-staged

	•	husky → Git Hook을 제어하는 패키지
	•	lint-staged → 변경된 파일만 ESLint, Prettier 등을 실행

✅ 설치 완료 후, package.json을 보면 devDependencies에 추가됨.

 

📌 2. Husky 활성화 (husky install)

설치 후 Husky를 활성화해야 Git Hook이 동작함.

npx husky install
👉 이 명령어를 실행하면 .husky/ 폴더가 생성되고, Git Hook이 활성화됨.

✅ Git Hook이 적용되었는지 확인하려면:

ls -al .husky


📌 출력 예시 (pre-commit 훅이 설정되면 추가됨)
total 8
drwxr-xr-x  3 user  staff  96 Mar 16 10:20 .
drwxr-xr-x  9 user  staff  288 Mar 16 10:20 ..
-rwxr-xr-x  1 user  staff  57 Mar 16 10:20 pre-commit

 

📌 3. pre-commit 훅 설정 (ESLint & Prettier 실행)

이제 커밋 전에 자동으로 ESLint & Prettier를 실행하도록 설정하자.

✅ pre-commit 훅 추가

npx husky add .husky/pre-commit "npx lint-staged"
chmod +x .husky/pre-commit  # 실행 권한 부여 (Mac/Linux)

✅ 이제 git commit 실행 시, lint-staged가 자동 실행됨!

 

📌 4. lint-staged 설정 (변경된 파일만 검사)

Husky가 pre-commit 훅에서 lint-staged를 실행하도록 설정했으니,

이제 어떤 파일을 검사할지 설정해야함.

✅ package.json에 lint-staged 추가

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

✅ 이제 커밋할 때 변경된 .js, .ts 파일만 자동으로 ESLint & Prettier가 실행됨!

 

 

🔥 Husky의 동작 과정

Husky는 크게 5단계로 동작한다.

 

📌 1. Husky가 Git Hook을 감지하고 실행 준비

✅ Husky는 package.json의 husky 설정을 읽고, 어떤 Git Hook을 실행할지 감지함.

✅ 예를 들어 pre-commit 훅이 설정되어 있다면, 커밋을 시도할 때 실행할 준비를 함.

 

예제: package.json에서 pre-commit 훅 설정

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

📌 이 설정이 의미하는 것은

• git commit을 실행할 때 Husky가 자동으로 lint-staged를 실행함.

• lint-staged는 변경된 파일들만 ESLint, Prettier 등을 실행해서 코드 스타일을 정리함.

 

📌 2. git commit 실행 시 Husky가 pre-commit 훅을 실행

✅ Husky는 커밋을 실행하는 순간(git commit -m "메시지") pre-commit 훅을 감지하고 실행함.

✅ pre-commit이 실행되면, 설정한 스크립트(예: lint-staged)가 자동으로 실행됨.

예제: 커밋 시도

git commit -m "feat: 새로운 기능 추가"

📌 이 순간, Husky는 pre-commit 훅을 실행!

 

📌 3. lint-staged가 변경된 파일을 검사하고 수정

✅ pre-commit 훅에서 실행된 lint-staged는 변경된 파일들만 검사 및 수정함.

✅ .lintstagedrc 파일에 설정한 규칙에 따라 ESLint, Prettier 등을 실행함.

예제: .lintstagedrc 설정

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

📌 이 설정이 의미하는 것은?
	•변경된 모든 .js, .jsx, .ts, .tsx 파일에 eslint --fix 및 prettier --write 적용
	•코드 스타일 자동 정리 + 린트 오류 수정

 

📌 4. 코드 오류가 있으면 커밋이 차단됨 🚨

✅ lint-staged 실행 결과 ESLint 오류나 Prettier 스타일 오류가 있다면 커밋이 차단됨.

✅ 개발자는 오류를 수정한 후 다시 커밋해야 함.

예제: 커밋 차단 메시지

✖ eslint --fix failed

🚨 ERROR: Lint errors found! Fix them before committing.

📌 즉, Husky 덕분에 오류가 있는 코드가 Git에 올라가는 걸 방지할 수 있음.

 

📌 5. 오류가 없으면 커밋 성공 ✅

✅ 코드가 깨끗하고 ESLint, Prettier를 통과하면 커밋이 정상적으로 진행됨!

✅ 이후 git push를 실행하면 푸시됨.

예제: 커밋 성공

✅ Linting passed, committing...
[main 1a2b3c4] feat: 새로운 기능 추가
 1 file changed, 10 insertions(+), 2 deletions(-)
 
 📌 Husky 덕분에 코드 품질이 유지된 채로 커밋이 성공적으로 완료됨.

 

🔥 Husky의 원리

Husky는 내부적으로 Git Hook을 활용하여 자동화된 스크립트를 실행하는 방식으로 동작한다.

즉, Git의 .git/hooks 디렉터리에 있는 Hook 스크립트를 자동으로 실행하는 것이 핵심 원리다.

 

📌 1. Git Hook의 기본 구조

Git Hook은 .git/hooks 폴더에 특정 이벤트 발생 시 실행되는 스크립트 파일이 있다.

.git/hooks/
├── pre-commit
├── commit-msg
├── pre-push
└── other-hooks...

 

📌 2. Husky가 하는 역할

1️⃣ husky install을 실행하면 .git/hooks/ 디렉토리에 Husky 관련 스크립트가 자동으로 추가됨.

2️⃣ git commit 실행 시 Husky가 자동으로 pre-commit 훅을 실행

3️⃣ pre-commit 훅이 실행되면, lint-staged 같은 도구를 실행하여 코드 검사

4️⃣ 오류가 있으면 커밋을 차단하고, 오류가 없으면 정상적으로 커밋

✅ 즉, Git Hook을 활용해 커밋 전에 자동으로 코드 스타일을 검사하고 정리하는 것이 Husky의 핵심 원리이다.

 

Husky의 장점으로는...

✅ 자동 코드 품질 유지: 개발자가 실수해도 Husky가 알아서 검사

✅ 불필요한 코드 리뷰 감소: 린트 오류를 사전에 방지하여 코드 리뷰 시간을 절약

✅ 팀 프로젝트에서 강제 적용 가능: 팀원들이 Husky를 설정하면 동일한 코드 스타일 유지

✅ CI/CD와 연동 가능: pre-push 훅을 사용해 배포 전 테스트 자동 실행 가능

 

Husky 동작 과정을 최종적으로 정리해보자면,

1️⃣ 개발자가 git commit 실행

2️⃣ Husky가 pre-commit 훅을 감지하고 실행

3️⃣ lint-staged가 실행되어 변경된 파일을 검사 & 자동 수정

4️⃣ 오류가 있으면 커밋 차단 🚨

5️⃣ 오류가 없으면 정상적으로 커밋 완료 ✅

 

✅ 결과적으로, Husky를 사용하면 코드 품질을 유지하면서도 Git 워크플로우에 자연스럽게 녹아들어 개발자가 편하게 사용할 수 있음.