본문 바로가기

웹 개발/Frontend

Frontend) Git-husky가 무엇인가

 

1. Git Hooks이란?

  • 특정 상황에 특정 git 커맨드를 실행할 수 있는 기능 
  • 따로 설치할 필요는 없고 .git/hooks/ 파일에 들어가면 .sample 확장자로 되어 있는 파일들이 git 에서 지원하는 hook 들이다. 여기서 .sample 이라는 확장자를 지우면 각 상황에 hook들이 적용된다고 한다. 
  • hook 종류는 다음과 같다. 

 


 

2. Git Husky를 사용하는 이유 

위에서 소개한 git hooks 는 .git/hooks/에 저장되어 있는데 이는 git의 버전 관리 대상이 아니기 때문에 로컬에서만 적용되고 remote에 공유할 수가 없다. 이를 가능하게 하기 위해 husky를 사용할 수 있다. 

내가 속한 팀에서도 여러 개발자가 협업하는 프론트 프로젝트에 이를 도입해서 eslint 룰 관련 경고나 팀 내 코드 컨벤션 등을 관리하기 위해 pre-commit 즉, 커밋하기 전에 hook이 실행되게 하고 걸러야 하는 코드가 있는 경우에는 commit을 할 수 없도록 방지하고 있다. 귀찮기 하지만 여러명이 작업하는 코드가 더러워지기 쉬운데 이렇게라도 강제적으로 관리하면 훨씬 깔끔할 것이라고 생각한다. 

이미 많은 유명 프로젝트에서 husky를 사용하고 있다고 한다. ex) webpack, angular, typescript-eslint,rollup 등.. 


3. 사용법 

설치하기

$ npm install --save-dev husky

 정책 정의 

.huskyrc 또는 package.json에 정의한다. 

예를 들어 다음과 같이 정의하면 pre-commit 즉, 커밋이 실행되기 전에 Hello Gabia, woof!가 cli에 출력된다. 

{
    "hooks": {
        "pre-commit": "echo 'Hello Gabia, woof!'"
    }
}

 


4. 동작 방식

1. husky 모듈의 package.json파일에 보면 다음과 같이 scripts > install에 node husky install이라고 정의되어 있다. 

// ./nodr_modules/husky/package.json
{
    ...,
    "scripts": {
        ...,
        "install": "node husky install",
        ...,
    }
}

따라서 huksy 모듈이 설치되어 있는 프로젝트의 package.json 파일이 위치한 곳에서 npm install을 하면 자동으로 node husky install이라는 커멘드도 실행된다. 

2. node husky install이 실행되면 .git/hooks/ 폴더에 git hooks가 작성된다.

3. 작성된 훅들은 husky.sh를 실행시킨다.

4. husky.sh 는 package.json또는 .huskyrc 등에 정의된 훅들을 실행시킨다. 

npm install -> node husky install -> git hooks 작성 -> husky.sh 실행 -> huskyrc에 정의된 hooks 실행