📌 husky 란 무엇인가?

• git hook 사용을 도와주는 라이브러리 이다.
• git 을 사용할 때 특정 스크립트를 실행시킬 수 있는 라이브러리다.

👉 git hook 은 무엇인가?

• git 에서 어떤 특정 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있다.
• git commit 이나 git push 와 같은 특정 이벤트가 일어나기 전에 우리가 원하는 스크립트를 실행하기 위해서 git 이벤트 사이에 갈고리 (hook) 를 걸어주는 것이다. 이것을 git hook 제어라고 한다.
• 이러한 git hook 제어를 위해 husky 라이브러리를 사용한다.
• 이 hook 은 client hook 과 server hook 으로 나뉘게 된다.
  client hook 은 commit 이나 merge 할 때 실행된다.
server hook 은 push 할 때 server 에서 실행된다.

✔️ 어떻게 사용하는가?

• 대표적인 사용 예시로는 prettier, lint, test 가 있다.
• 협업 도중에, prettier 나 lint 가 적용되지 않고 git 에 올라오는 경우가 존재한다. 이런 경우에 자동으로 eslint 나 prettier가 작동하게 할 수 있어서 굉장히 유용하다.
• 코드를 수정하며 기능적인 부분들이 바뀌게되면, 이에따라 테스트 코듣 실행을 해야한다. 그러한 것들을 github actions 에서 미리 실행해 볼 수도 있다.

1. yarn add husky --dev 를 통한 설치
2. package.json 에 코드 작성

"script": {
  "prepare": "husky install",

3. yarn prepare 를 통한 husky 폴더 생성
   • 특정 이벤트에 실행할 스크립트를 넣어준다.
   • 실제 git의 hook 과 동일하다.

• commit 했을 때 lint를 실행하고 push 했을 때 test를 실행하는 예시코드

"scripts": {
    "lint:fix": "eslint src --ext .ts --parser-options=project:'tsconfig.json' --fix",
     lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "yarn lint:fix",
      "prettier --write"
    ]
  },

📌 lint-staged 란 무엇인가?

• 파일들이 git add로 커밋 대상이 된 상태를 stage 상태라고 한다. stage 상태의 git 파일에 대해 lint와 우리가 설정해둔 명령어를 실행해주는 라이브러리다.

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

📌Reference

• https://go2zo.github.io/blog/2021/05/23/husky-v6/
• https://github.com/typicode/husky/issues/949
• https://taegon.kim/archives/10276
• https://dev-syhy.tistory.com/57
• https://shiningjean.tistory.com/86
• https://velog.io/@do_dadu/husky-lint-staged%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90-sub-ESLint-%EC%9E%90%EB%8F%99%ED%99%94%ED%95%98%EA%B8%B0