[ 프로젝트 세팅 ] Nest.js + Husky + CommitLint + Gitmoji 세팅

개발

[ 프로젝트 세팅 ] Nest.js + Husky + CommitLint + Gitmoji 세팅

Crmal 2023. 9. 12. 16:40

Nest.js를 이용한 개인 프로젝트중 Commit Convention을 만드는 연습을 진행하기로 했습니다. 이를 이용한 다양한 기능으로 Husky, CommitLint + Gitmoji가 있습니다.

Husky란?

Git는 Hook이라는 기능을 가지고 있습니다. Git에서 특정 이벤트(add, commit, push 등)를 실행할 때, 그 이벤트에 Hook을 설정하여 Hook에 설정된 스크립트를 실행할 수 있습니다.

간단하게 설명하자면 git commit, push 등의 이벤트가 실행될때 설정된 스크립트를 실행하는것을 말합니다. 이를 이용하여 eslint, prettier등의 기능을 이용하여 협업을 진행할때 코드를 일정하게 맞추는 기능을 합니다.

이 프로젝트에서 진행될 기능은

commit시 eslint검사, perttier적용을 자동으로 진행해줍니다.
commit 메세지에 특정 단어로 시작하지 않으면 커밋을 하지 못하게 막습니다 (Why? 커밋 메세지를 맞추어 나중에 커밋 메세지를 보고 파악하기 쉽기 때문)

Commit-lint란

위에 작성한 기능 2번인 커밋 컨벤션을 관리하기위해 사용되는 도구로 특정 커밋메세지에 대해 lint검사를 진행해줍니다.
커밋 컨벤션을 JSON형태로 지정해줄수 있습니다.

Gitmoji란

커밋 컨벤션을 feat, build, bug등등 간단한 단어로 하는 경우도 있지만 이모지를 이용하여 다양한 방식과 조금의 귀여움을 챙길수 있습니다.

다양한 아이콘들이 많지만 제가 기본 세팅으로 사용할 아이콘들은 다음과 같습니다.

아이콘	코드	설명	원문
✨	:sparkles:	새 기능	Introduce new features.
📝	:memo:	문서 추가/수정	Add or update documentation.
✏️	:pencil2:	간단한 수정	Fix typos
🐛	:bug:	버그 수정	Fix a bug.
🩹	:adhesive_bandage:	크리티컬 하지 않은 버그 수정	Simple fix for a non-critical issue.
♻️	:recycle:	코드 리팩토링	Refactor code.
🔥	:fire:	코드/파일 삭제	Remove code or files.

지금부터 세팅할 프로젝트를 완성하면 다음과 같이 커밋이 찍히는것을 확인 할 수 있습니다.

세팅

1. Gitmoji 세팅

$ brew install gitmoji

Mac 기준 brew를 통하여 install을 해주시면

다음과 같이 gitmoji -c로 다양한 이모지를 방향키로 선택후 엔터를 입력하면 커밋메세지를 쓸 수 있습니다.

2. Husky 설치

$ yarn add -D husky
$ yarn -D lint-staged

husyk와 lint-staged 를 devdependencies에 설치해줍니다. (Why? 커밋을 도와주는 도구이지 개발에 필요한 부분은 아니기 때문)

2-1 package.json

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

최상단 루트들은 따로 검사하지않고 src폴더 안에 파일들만 검사하도록 하였습니다.

2-2 .husky

$ yarn husky add .husky/pre-commit

다음 명령어를 입력시 pre-commit이 생깁니다 (commit-msg는 이후 커밋컨벤션에 이용 할 예정이니 같이 입력해주셔도 됩니다)

다음과 같이 파일 작성을 해줍니다.

# pre-commit

. "$(dirname -- "$0")/_/husky.sh"

yarn lint-staged

여기까지 진행시 lint검사는 완료입니다.

3. Commit-msg 연동

$ yarn husky add .husky/commit-msg

으로 commit-msg를 만들어주고 다음과 같이 입력해줍니다.

# commit-msg

. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

~~(yarn으로 하고 싶었지만.. 오류 해결중 입니다 해결되면 다시 포스팅 예정)~~

yarn add -D eslint-plugin-import eslint-config-airbnb-base

추가로 위의 코드는 제 eslint가 aribnb를 사용하기에 필요한 라이브러리 추가 설치가 있었습니다. 아닌분들은 따로 안하셔도 될것 같습니다.

이후 파일 최상단에 두개의 파일을 만들어줍니다

// commitlint.config.js 
const commitConvention = require('./commit-convention.js');

module.exports = {
  // extends: ['@commitlint/config-conventional'],
  rules: { 'type-enum': [2, 'always', commitConvention] },
};

extends의 주석 부분은 @commitlint/config-conventional을 설치후 사용하면 커스텀이 아닌 일반적인 세팅으로 가능합니다

rules부분에 type-enum만 넣었으나 이부분은 commitConvention의 배열으로 시작하는 커밋만 커밋 가능한 룰이며 다른 룰도 많으니 찾아서 사용해보시면 도움이 될 것 같습니다.

module.exports = [
  ':sparkles:',
  ':memo:',
  ':pencil2:',
  ':bug:',
  ':adhesive_bandage:',
  ':recycle:',
  ':fire:',
];

이부분은 각 프로젝트마다 추가해주시면 됩니다

이렇게 되면 끝입니다.

실제 사용으로는

커밋명을 test로 입력 했을시 지정해둔 값으로 시작하지 않기때문에 커밋이 안되는걸 확인 할 수 있습니다.

gitmoji -c를 이용하여 커밋을 찍어보겠습니다

다음과 같이 자동으로 커밋명에 :sparkles: 가 들어가면서 커밋이 되는것을 확인 할 수 있습니다.

저작자표시