협업을 위한 - Gitmoji 도입해보기

왜 도입을..?

항상 팀단위(모르는 사람끼리 하는 프로젝트, 학교 선후배간, 회사에서)에서의 프로젝트에서 무언가를 도입하거나 바꾸려고 할때는 Why?를 먼저 생각해봐야한다

그래서 왜 도입을 하려고 하는지에 대해서 생각해보면...

 

장점

• 글자를 읽을 필요 없이 어떤 커밋을 했는지 이모지를 보고 파악이 가능하다
• 커밋 기록이 아이콘으로 남게 되어서 귀엽다ㅋ

단점

• 은 맨 밑에서 다룰 예정이다

일단 이건 기술적으로 스택이나 아키텍처나 바뀌는게 아닌 거기때문에 일단 도입해보고 나중에 회고해보자

 

Gitmoji란?

Gitmoji는 눈치채신 분들도 있겠지만 Git + Emoji의 합성어이다

모든 커밋 앞에 이모지를 붙이는 행위를 뜻한다

깃모지를 사용하면 커밋의 목적이나 의도를 쉽게 파악 가능하다고 한다

그리고 이모지가 이모티콘이 아닌가? 라고 생각 하실 수 있지만 어원이 아예 관련 없단다....헐ㅋ

 

 

공식 사이트 및 깃허브

https://gitmoji.dev/

gitmoji

https://github.com/carloscuesta/gitmoji

GitHub - carloscuesta/gitmoji: An emoji guide for your commit messages. 😜

인상적인 이모지는 poop, alien이다 ㅋㅋㅋ

내용을 읽어보면 poop - 개선이 필요한 나쁜 코드를 작성한다, alien은 알수없는 외부의 API때문에 코드가 업뎃됏단다. 근데 이모지가 더 귀엽다 외계인......ㅋ

 

자주 사용하는 깃모지

음 이전에 작성한 https://code-boki.tistory.com/182

협업을 위한 - 커밋 규칙과 이슈번호 사용 그리고 템플릿 만들기

이 포스팅과 연관해서 feat, fix, refactor, test, chore, docs, ops, bug 정도를 추려보았다

기능	깃모지	코드	설명	요약/대체
init project	🎉	:tada:	Begin a project.	프로젝트 생성
feat	✨	:sparkles:	Introduce new features.	기능추가
fix:typo	✏️	:pencil2:	Fix typos.	오타 수정
fix:bug	🐛	:bug:	Fix a bug.	버그 수정
fix:simple	🩹	:adhesive_bandage:	Simple fix for a non-critical issue.	간단한 수정
fix:lint	🚨	:rotating_light:	Fix compiler / linter warnings.	컴파일러/린트 경고 수정
hotfix	🚑️	:ambulance:	Critical hotfix.	긴급 수정
refactor	♻️	:recycle:	Refactor code.	코드 리팩토링
test	✅	:white_check_mark:	Add, update, or pass tests.	테스트 코드 작성
chore	⚰️	:coffin:	Remove dead code.	단순작업
docs	📝	:memo:	Add or update documentation.	문서 작성
ops:ci	💚	:green_heart:	Fix CI Build.	CI - 지속통합
ops:cd	🚀	:rocket:	Deploy stuff.	CD - 지속배포
ops:infra	🧱	:bricks:	Infrastructure related changes.	인프라 관련 변경

 

 

사용방법

1. CLI - 단순 사용

• Git commit 메시지를 작성할때 https://gitmoji.dev/ 를 보고 찾아서 작성하는 방법

git add .
git commit -m ":poop: just test"
git push origin main

 

결과

 

2. CLI - 패키지 설치 사용

• Windows(npm을 이용)

npm i -g gitmoji-cli

• MacOS(homebrew 또는 npm을 이용)

brew install gitmoji

• 도움말

gitmoji --help

• 깃모지로 커밋 메시지 작성

git add .
gitmoji -c
- 이모지 선택 -
commit title: ~
commit message: ~

결과

이모지와 함께 타이틀과 메세지가 생긴 것을 볼 수 있다

+

사실 title, message는 기본 cli에서도 할 수 있다

git commit -m "Title" -m "Description ..........";

 

3. IntelliJ Plugin

Gitmoji 검색 후 설치

인텔리제이 Commit 탭에서 보면 못보던 아이콘이 생긴 것을 볼 수 있다

직접 선택하거나 검색해서 이용할 수도 있다!(feat, test, build...)

바로 그냥 Commit and Push...를 누르고(opt+cmd+K), 이후에 cmd+enter

결과!!

(깨알팁) UI에서도 한줄 띄우고 또다른 메세지를 입력하면 저렇게 커밋 메세지에 title와 description이 생기는 것을 볼 수 있다

 

4. VSCode Extension

gitmoji로 검색후 설치한다

깃 전용 메뉴에서 상단에 스마일 모양의 Gitmoji 아이콘이 생긴 것을 볼 수 있다!

검색도 지원한다

결과!!

잘 된다~~!

 

팁

• 이모지를 보고 변경 추적을 할 수 있다(✨ -> ✅ -> 🐛 -> ✅ -> 💚 -> 🚀)
  • 신규 기능 추가 -> 테스트 성공 -> 버그 수정 -> 테스트 성공 -> CI -> CD

• 이모지를 사용한다고 해도 이슈번호를 꼭 붙이자(관심사의 그룹화)
  • ✨ 로그인 api 추가 (#4)
  • ✅ 로그인 api 테스트 (#4)

 

아쉬운점

• 이모지를 찾기가 힘들다(단순 CLI 사용시)
• 이모지가 너무 많다(줄여줘.....아니 죽여줘...)
• MZ가 아닌 꼰대들은 싫어할 수 있다(이모지라니 너무 힙하자나..럭키비키⭐️)
• 익숙하지 않은 사람은 적응하기 어렵다(이건 git commit convention도 마찬가지라 생각한다)
• 같은 아이콘을 다른 의미로 사용할 수 있다(이것 또한 git commit convention도 마찬가지라 생각한다)

위의 두개는 숙련도가 요구되는 부분이며 text 규약이나 emoji 규약이나.. 팀 내에 정확한 전파문서가 있어야 한다고 본다

• 여러 방식마다 호환이 안되는것 같다. 어떤 커밋은 텍스트/어떤 커밋은 이모지...로 나온다(불편ㅠㅠ)

인텔리제이 git log

- 단순 CLI를 사용할 때는 :poop: 처럼 단순 텍스트로 나오고

- 패키지 매니저를 사용할 때는 이모지로 나오고

- 인텔리제이 플러그인을 사용할 때는 단순 텍스트로 나오고

- VScode 익스텐션을 사용할 때는 이모지로 나오고

아주 제멋대로다@@@

이 현상은 CLI - git log 명령어로 봐도 똑같다

 

추가로 난 🚧 이 이모지를 검색하고 싶어서 :construction:를 검색하면 안나오고 🚧 이렇게 검색해야 나온다

근데 poop은 텍스트로 검색해야된다.....;;

최종 결과

 

하지만... GitHub에서는 아이콘이 전부다 제대로 나온다!!

이게 text기반으로 가면 intelliJ에서 그냥 feat, fix 등으로 검색하면 관련 커밋이 나오는데...

CLI(simple, package) / IDE(intelliJ, vscode)마다 각각 다른 git log를 남기는게 좀 불편하다

그래서 커밋 형태를 text기반도 붙여서

[깃모지] <type>: [내용]

[깃모지] <type>: [내용]

ex)
✨ feat: add user list api

으로 할까도 고민중이다

 

추가로 그냥 데모프로젝트라서 이슈번호를 안붙인거지 실제로는

맨앞이나 맨 끝에 #4 처럼 이슈번호도 붙이도록 하자!

 

다음에는 인텔리제이로 코드리뷰하는 방법에 대해서 포스팅해보려고 한다