husky와 commitlint로 jira 이슈번호 자동화 시키기

😚 이거 왜 필요한가요?

최근 팀 차원에서 jira를 도입하게 되었는데 

기왕 사용하는 거 조금 더 편하고 잘 사용해보고자 개발 환경을 구성해보았습니다.

 

지라의 이슈는 이런 형태로 구성되어있는데요

이렇게 이슈를 생성하게 되면 자동으로 해당 이슈에 대하여 이슈번호가 할당됩니다.

이런 형태입니다. 여기에서 이슈번호는 WPA-91이 되며

이슈번호의 알파벳 프로젝트 차원에서 관리할 수 있습니다.

이렇게 만들어진 이슈는 이슈번호를 통해서 브랜치 , 커밋과 연동이 가능합니다.

 

 

하지만 그렇게 브랜치, 커밋을 연동하기 위해서는

깃허브와 지라를 먼저 통합하는 과정이 필요합니다.

깃허브와 지라의 통합은 Github for Jira 라는 앱을 통하여 할 수 있습니다.

 

chrome에서는 무한로딩 -> 에러가 발생하는 문제가 있었는데

비단 저뿐만 아니라 다른 사람들도 심심찮게 겪는 문제인 것 같더라구요

safari에서는 또 되어가지고 어떻게 어떻게 연동을 끝냈습니다.

 

다음과 같이 할당된 이슈번호를 넣어서 브랜치를 생성하고 커밋을 수행하면

다음과 같이 jira와 잘 연동되어서 트래킹할 수 있어지는 것을 확인할 수 있습니다.

그런데 여기에서 제약조건을 발견할 수 있는데요

바로 커밋메시지와 브랜치명에 반드시 이슈번호가 들어가야지만 지라와의 원활한 통합이 가능하다는 것입니다.

 

브랜치명이야 한번만 만들면 되는것이지만 커밋은 자주할 수 밖에 없는데

커밋할때마다 나의 이슈번호를 기억하고 메시지에 넣어주는 것은 상당히 고통스러운 일입니다.

따라서 브랜치명에서 설정된 이슈번호를 커밋을 할때 자동으로 가져와서

커밋메시지에 추가되도록 해준다면 훨씬 쾌적한 개발이 가능할 것 입니다.

 

이렇게 커밋, 푸시 등의 작업 과정에서 어떠한 일을 수행해야 하는 경우에

git hook을 사용하는 것을 고려할 수 있는데요

husky라는 라이브러리는 git hook을 조금 더 쉽게 사용할 수 있도록 도와주는 라이브러리입니다.

 

husky의 셋업 방법에 관해서는 이 글에서는 다루지 않겠습니다.

예전에 다룬 글이 있으니 궁금하신 분들은 참고...해보세요...

npx husky add .husky/prepare-commit-msg '대충 코드 내용 안넣어도 상관 없음'

허스키가 셋업된 환경에서 다음 명령어를 통하여

prepare-commit-msg를 사용하겠다는 명시를 해주겠습니다.

prepare-coomit-msg는 커밋메시지를 준비하는 단계에서 실행되는 깃훅입니다.

---

😎 커밋린트도 해보자

기왕 설정하는 김에 커밋에 대한 컨벤션도 만들면 좋을 듯 합니다.

커밋단계에서 양식에 맞는 커밋인지 확인하고 옳지않은 커밋을 리젝하는 것을 도와주는

commitlint도 설치해주겠습니다.

https://commitlint.js.org/#/

commitlint - Lint commit messages

공식문서를 따라가면 어렵지 않게 셋업을 마칠 수 있습니다.

npm install @commitlint/cli @commitlint/config-conventional --save-dev
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

다음과 같이 cli와 config-conventional을 설치해주겠습니다.

npm i -D commitlint-plugin-function-rules

그리고 유용하게 사용할 수 있는 플러그인도 하나 설치해줄게요

echo로 시작하는 명령어를 잘 입력해주셨다면 루트폴더에 다음과 같은 이름의 파일이 생성되어있을 것입니다.

 

commitlint.config.js

config.js를 다음과 같이 수정해주겠습니다.

module.exports = {
  extends: [],
  plugins: ["commitlint-plugin-function-rules"],
  rules: {
    "function-rules/scope-enum": [
      2, // level: error
      "always",
      (parsed) => {
        return [true];
      },
    ],
  },
};

config-conventional은 extends 자리에 들어가주면 되는데

기본적으로 지키면 좋은 커밋 룰들을 세팅해주고 지키지않으면 커밋을 막아주는 확장입니다.

저는 커스터마이징을 할거니까 아까 깔아둔 플러그인을 넣어주고 rules에서 플러그인을 이용할것입니다.

 

function-rules/scope-enum은 커밋메시지를 매개변수로 전달받아서

그 매개변수를 자바스크립트 문법으로 검사해보고 통과시키고싶으면 [true] 

실패시키고싶으면 [false]를 반환시키면 되는 간단한 사용법을 가지고 있습니다.

{
  type: null,
  scope: null,
  subject: null,
  merge: null,
  header: 'WPA-91-:sparkles: 이런형태에요',
  body: null,
  footer: null,
  notes: [],
  references: [],
  mentions: [],
  revert: null,
  raw: 'WPA-91-:sparkles: 이런형태에요\n\n'
}

parsed 매개변수의 형태는 다음과 같습니다.

이 값들을 잘 조합해서 하고싶은걸 만들면 됩니다.

이제 허스키와 통합해주겠습니다.

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

아까 prepare-commit-msg 만들던거랑 똑같은 명령어입니다.

뒤의 코드 내용은 commitlint 문서에서 제공해주는 코드 그대로입니다.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit ${1}

.husky/commit-msg 파일을 열어보면 이렇게 잘 만들어진것을 볼 수 있습니다.

룰은 하고싶은대로 설정해보시면 될 것 같고..

function-rule/scope-enum플러그인을 통해 함수와 매개변수 형태로 관리하면

자바스크립트에 익숙하신 분들은 아마 야무지게 원하는 코드를 짜실 수 있을 거라고 생각해요

 

이제 하이라이트인 커밋메시지 자동화를 수행해봅시다.

---

😉 브랜치에 있는 이슈를 커밋에다가 갖다 붙이기

아까 처음에 위에서 만든 .husky/prepare-commit-msg 를 작성해주겠습니다.

해야할 일은 간단합니다.

1. 브랜치명을 뽑아서 가져오고

2. 브랜치명에서 이슈티켓번호만 추출한다음

3. 입력받은 커밋메시지의 앞에 이슈티켓번호를 붙여준다.

 

이 세가지 일을 잘 수행하면 우리가 원하는 일이 이루어질것입니다.

.husky/prepare-commit-msg

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
echo 'wait add jira issue number we found from branch name'

BRANCH_NAME=$(git symbolic-ref -q HEAD)
BRANCH_NAME=${BRANCH_NAME##*/} # Remove everything before the last /
ISSUE_TICKET=$(echo "$BRANCH_NAME" | sed -n 's/^\([A-Z]*-[0-9]*\)-\(.*\)$/\1/p')

# Check if ISSUE_TICKET is not empty
if [ -n "$ISSUE_TICKET" ]; then
  # Output extracted Jira 이슈 티켓 번호
  echo "Extracted Jira 이슈 티켓 번호: $ISSUE_TICKET"

  # Read the commit message from the temporary file
  COMMIT_MSG_FILE=$1
  COMMIT_MSG=$(cat $COMMIT_MSG_FILE)

  # Prepend Jira 이슈 티켓 번호 to the commit message with a hyphen and remove the space
  echo "$ISSUE_TICKET-$COMMIT_MSG" > $COMMIT_MSG_FILE
fi

이건 제가 원하는 형태로 만든 지라 이슈티켓입니다.

브랜치이름을 가져오고 브랜치이름에서 쓸데없는것을 제거한 다음

이슈번호만 뽑아온뒤

만약 이슈번호가 존재한다면 커밋메시지 앞에 붙여줍니다.

결론적으로 git commit -m 'hi' 를 했다면

ISS-532-hi 의 형태로 커밋이 찍히게된다는 것이죠!

 

git commit -m '' 을 하기가 싫으니까 스크립트로 커밋도 만들어주겠습니다.

  "scripts": {
    "commit": "git commit -m"
  },

package.json에서 스크립트 명령어를 추가해줬습니다.

 

결론적으로 이렇게 잘 출력이 되는것을 볼 수 있습니다.

이슈티켓번호는 WPA-91이고 적절히 커밋이 되는 모습입니다.

중간의 객체는 이해를 돕기 위해 commitlint.config.js에서 설정된 것이니

그것만 지워주시면 완성입니다.

---

🤪 마치며

환경설정도 많이 당해보다보니 예전보다는 해결속도도 빨라지고

심신의 안정도 잘 유지할 수 있게 되더라구요

해내고 나면 뿌듯하니까 여러분도 한번 해보시는 것을 추천드리면서

마무리 하도록 하겠습니다.

 

읽어주셔서 감사합니다.