Git - Commit Message Style Guide (2)

✨ 깃 커밋 메세지를 간단하게 써보자

요즘 GitHub를 좀 더 체계적으로 관리하려고 하다 보니 어떤 상황에 어떤 prefix(Gitmoji)를 써야하는지 헷갈리는 상황이 생겼다.

특히 커밋 메시지에서 Gitmoji를 사용할 때, 매번 이모지를 찾아서 작성하는게 다소 번거롭게 느껴지기도 했다.

그래서 이를 쉽게 도와줄 수 있는 라이브러리가 있는지 살펴보게 되었고, cz-customizable를 사용하는 방식을 알게 되어 적용하게 되었다.

💡 cz-customizable이란?

cz-customizable은 커밋 메시지를 쉽게 작성할 수 있도록 도와주는 커밋 도구로, npx cz를 실행하면, 커밋 메세지를 단계별로 물어보는데 미리 설정한 템플릿에 따라 커밋 메시지를 자동으로 작성해준다.

이를 통해 여러 명이 협업하는 프로젝트에서도 통일된 메시지를 유지할 수 있다.

📦 설치 방법

먼저 필요한 라이브러리를 설치해보자.

• commitizen
• cz-customizable

npm install -D commitizen cz-customizable

그리고 package.json에 다음처럼 설정한다.

{
    "config": {
        "commitizen": {
            "path": "cz-customizable"
        }
    }
}

⚒️ cz-config.js 작성하기

프로젝트 루트에 cz-config.js 파일을 만들고, 아래와 같이 작성했다. value 부분에는 prefix로 필요한 내용을 작성해주면 되는데, 이때 emoji를 작성하면, 커밋 할 때 일일히 emoji를 찾아서 작성할 번거로움이 줄어든다.

module.exports = {
  types: [
    { value: "🚀 feat", name: "🚀 feat: 새로운 기능 추가" },
    { value: "🐛 fix", name: "🐛 fix: 버그 수정" },
    { value: "♻️ refactor", name: "♻️ refactor: 리팩토링 (기능 변화 없음)" },
    { value: "📝 docs", name: "📝 docs: 문서 수정 (README 등)" },
    { value: "🎨 style", name: "🎨 style: 코드 스타일 변경 (포맷, 공백 등)" },
    { value: "✅ test", name: "✅ test: 테스트 코드 추가/수정" },
    {
      value: "🔧 config",
      name: "🔧 config: 설정 파일 수정 (ESLint, Babel 등)",
    },
    { value: "💄 design", name: "💄 design: UI/디자인 수정 (기능 변화 없음)" },
    { value: "🔀 rename", name: "🔀 rename: 파일/폴더 이름 변경" },
    { value: "🧹 chore", name: "🧹 chore: 기타 변경 (패키지 정리, 주석 등)" },
    { value: "⚙️ ci", name: "⚙️ ci: CI/CD 관련 설정 변경" },
    { value: "🎉 init", name: "🎉 init: 초기 커밋" },
  ],
  messages: {
    type: "어떤 종류의 변경인가요?:",
    scope: "변경 범위(옵션):",
    subject: "제목:\n",
    body: "본문 (Optional):\n",
    footer: "이슈 번호(Optional):",
    confirmCommit: "이 커밋 메시지로 커밋할까요?",
  },
  skipQuestions: ["breaking", "scope"],
  footerPrefix: "",
}

🧪 커밋하는 방법

git add .

일단 동일하게 깃 스테이징을 올려준다. 그 다음에 git commit -m 으로 커밋을 작성하는 것이 아니라 아래와 같이 작성한다.

npx cz

그러면 위에서 설정해 둔 프롬포트가 표시되는데, 프롬포트가 안내하는 순서대로 커밋 메세지를 작성해주면, 커밋 메시지가 작성된다.

🗂️참고 사이트

• https://www.npmjs.com/package/cz-customizable