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도 설치해주겠습니다.
commitlint - Lint commit messages
commitlint.js.org
공식문서를 따라가면 어렵지 않게 셋업을 마칠 수 있습니다.
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에서 설정된 것이니
그것만 지워주시면 완성입니다.
🤪 마치며
환경설정도 많이 당해보다보니 예전보다는 해결속도도 빨라지고
심신의 안정도 잘 유지할 수 있게 되더라구요
해내고 나면 뿌듯하니까 여러분도 한번 해보시는 것을 추천드리면서
마무리 하도록 하겠습니다.
읽어주셔서 감사합니다.