상황: husky 폴더가 .git 폴더보다 하위에 있는 폴더 구조.
문제: husky와 git 파일은 동일 선상에 없으면 돌아가지 않는다.
해결: package.json에 script 추가, husky 파일에 코드 추가
문제 상황
├── project
│ ├── git //git 폴더
│ ├── backend
│ └── frontend
│ └── husky //허스키 폴더가 git 폴더 보다 하위에 있다.
│ ├──commit-msg
│ ├── pre-commit
│ └── pre-push프로젝트 폴더 구조는 위와 같다.
backend 폴더와 frontend 폴더가 한 곳에 있다.
커밋을 포함해 깃 관리를 project 최상 위에서 하고 있다.
그래서 git 폴더가 최상위에 있는 상황이다.
git init 명령어를 실행하면 현재 디렉토리가 Git 저장소로 초기화. 이때 .git이라는 숨겨진 디렉토리가 생성된다. .git 폴더 안에는 Git이 버전 관리를 수행하는 데 필요한 파일과 데이터가 저장됩니다.
백과 프런트를 한 곳에서 관리하기로 했기 때문에 이런 폴더 구조가 생겼다.
이러한 상황에서 frontend 폴더 안에 있는 코드만 husky를 사용해 린트 등을 검사하고 싶었다.
Husky는 Git 훅(Git Hooks)을 쉽게 설정하고 관리할 수 있게 도와주는 도구다.
Git 훅은 Git에서 특정 이벤트가 발생할 때 자동으로 실행되는 스크립트다.
예를 들어, 커밋을 하기 전에 코드 스타일을 검사하거나, 푸시 전에 테스트를 실행하는 등의 작업을 자동화할 수 있다.
그러나 역시나 husky는 돌아가지 않았다.
git 폴더의 위치 때문일 수도 있겠다는 생각이 들었다.
아무래도 git 관리를 담당하고 있는 폴더와 husk는 같은 선상에 있어야 하지 않을까?
정답이었다.
문제 1
간단한 해결책으로는 npm이나 yarn으로 최상 위에 husky를 설치하고 husky 폴더를 최상 위로 뺴는 방법이 있었다.
그러나 그렇게 되면 backend 코드에도 frontend lint나 fomatter등이 적용되고 말거다. 그러므로 이 방법은 사용할 수 없다.
해결책 2
//package.json
"scripts": {
"postinstall": "cd .. && husky ./frontend/.husky"
},
먼저 frontend 안에 있는 package.json에 script를 추가했다.
scritps
scripts는 package.json 파일 내에서 정의되는 속성 중 하나다. Node.js 프로젝트에서 자주 사용하는 명령어들을 관리하고 자동화하는 역할을 한다. 프로젝트 작업에 필요한 명령어들을 간편하게 실행할 수 있도록 도와준다.
postinstall
postinstall은 install 명령어가 실행된 후 자동으로 실행된다. 즉, 프로젝트에 필요한 패키지들을 설치한 후에 postinstall 스크립트가 실행되도록 설정해준다.
husky 패키지는 설치된 후 husky install 이라는 명령어가 실행되어야 하기 때문에 패키지가 설치 된 후 실행되는 라이프 사이클 스크립트를 사용해야 합니다. NPM을 사용하는 경우 prepare라는 스크립트를 사용할 수 있지만 Yarn 2+은 prepare 스크립트를 지원하지 않기 때문에 postinstall이라는 스크립트를 사용해야 한다.
"cd .. && husky ./frontend/.husky"
cd .. 으로 일단 상위 폴더로 이동한다. -> 상위 폴더에서 frontend/.husky 폴더에 있는 Husky 설정을 설치하고 적용한다.
문제 2
위 과정을 완료하면 husky가 돌아는 간다.
그러나 문제는 잘 안 돌아간다.
husky 폴더 안에 있는 이 3가지 파일을 작성했다.
- commit-msg (커밋 메시지가 특정 규칙을 따르는지 검사)
- pre-commit (커밋이 실행되기 전에 실행됩니다.)
- pre-push(코드를 원격 저장소로 푸시하기 전에 실행됩니다.)
커밋 전에, 푸쉬 전에 코드를 검사하고자 했다.
그런데 이번 문제는 기 때문에 발생한다.
husky가 실행될 때 위에 cd ..으로 인해 최상위에 있게 된다.
그런데 lint 관련 설정 파일이 frontend 폴더 안에 있어서 lint를 제대로 검사해주지 못한다.
해결
cd ./frontend
명령어를 husky 파일에 추가해준다.
// commit-msg
#!/bin/sh
cd ./frontend
npx --no-install commitlint --edit "$1"
cd ./frontend는 현재 디렉토리에서 frontend라는 폴더로 이동하라는 뜻입니다.
이유는, commitlint의 설정 파일 또는 실행 환경이 frontend 폴더 안에 존재하기 때문입니다.
정리
husky와 git 폴더는 같은 선상에 있어야 돌아간다.
그러나 만일 다른 경우 package.json 의 postintall scripts를 활용해 같은 선상에서 husky를 적용할 수 있도록 한다.
