💡 들어가기 앞서..

해당 포스팅은 프로젝트를 진행하는데 있어서
저희 팀원분들께 레퍼런스를 제공해드리기 위해 직접 작성한 내용임을 미리 알립니다!

가능하다면 이미 잘 설명되어있는 타 레퍼런스를 팀원분들께 공유드리려 했지만,
깃모지에 대한 설명은 잘 나와있는 반면,
사용하는 방법에 대해서 설명이 된 글이 적어서 직접 작성하게 되었습니다.

또한 해당 방법은 깃모지를 사용하는 여러 방법 중
깃모지 익스텐션 + 소스제어의 방식으로 진행하는 방법입니다.

피드백 주신다면 감사히 받겠습니다!!

---

🙄왜 깃모지를 쓰는건가?

사실 깃모지는 프로젝트를 진행하는데 있어서 필수사항은 아닙니다.

마치 책에서 중요한 내용을 찾았을 때,
형광펜 대신 검은색 볼펜으로 밑줄을 그을 수 있는 것 처럼요.

하지만, 검은색 볼펜 보다는 형광펜 으로 중요한 부분을 표시해두면,
이후에 표시해둔 내용을 다시 찾기에도 훨씬 수월하고, 보기에도 깔끔해보일겁니다.

이러한 부분에 있어서 깃모지또한 일맥상통한 부분이 있다고 생각합니다.

기존에 많은분들께서 커밋을 진행할 때

위의 사진과 같이 커밋을 추가하여 PR에 반영하셨으리라고 생각합니다.

하지만 PR을 통해 커밋내역을 확인하는데 있어 커밋을 작성하시는 개개인에 따라서,
그리고 작업의 내용에 따라서도 가독성이 달라 한눈에 확인하기 어려울 수 있습니다.

하지만, 깃모지를 사용함으로써
제 3자가 전체적인 커밋 내용을 눈으로 대강 확인하더라도

비교적 어떤 작업을 진행했는지
이모지가 중복되는 커밋들을 바탕으로
한눈에 쉽게 추론할 수 있다는 장점이 있습니다.

이는 사람의 시선이 좌 -> 우로 진행되기 때문입니다.

해당 내용은 제가 과거에 유튜브를 운영한 경험에서도 썸네일을 제작하며 직접 확인할 수 있었던 내용입니다. 이에 대한 좀더 심층적인 내용은 해당 글을 참고해주시면 감사하겠습니다!

서두가 많이 길었는데, 이제 본론으로 들어가도록 해보겠습니다!

🔧 먼저 ‘소스제어’에 대해 알고계신가요?

💡 (사실 깃모지보다 더 중요한 친구입니다. 나중에도 요긴하게 사용하실거에용 )

그동안 많은분들께서

git add (~파일경로)
git commit -m "feat: 어쩌구저쩌구~" 

와 같이
직접 타이핑을 하셔서 커밋을 올리셨을겁니다.

하지만 작업을 진행하다보니

아래의 사진처럼 오타도 간혹 발생하게 되고,

상세한 커밋을 위해 git add의 파일을 하나하나 지정해주고,

잘못 add 할 시에는 취소명령어도 입력 해야하고 등등..

타이핑의 불편한점이 많으셨으리라고 예상됩니다.

(그놈의 햣 ㅁㅇㅇ)

이럴때 클릭 몇번으로 add와 commit을 진행할 수 있는 기능이 있는데,

이게바로 소스 제어 라는 기능입니다.

소스 제어는 표준적인 VScode의 좌측 메뉴바에 위치하고 있으며,
위의 브랜치 모양으로 된 버튼을 클릭해주시면 사용할 수 있습니다!

(위의 gif처럼 작업 한 내용은 실시간으로 소스 제어에 담기게 됩니다.)

이 소스 제어 에서는 여러분들께서 작업하신 모든 내용이 변경 사항 에 모두 담기게 되는데,

여기서 git add 로 묶어주고싶은 작업들을 간단하게 묶어줄 수 있습니다.

말로 설명하기보다는 사진을 통한 간단한 예시를 추가해보겠습니당

저는 이렇게 header.module.scss와 index.tsx라는 파일에 주석을 넣은 상태이고,

이 두 내용을 git add 하려고 합니다.

(실제 플젝에선 주석만 add 하는 경우가 흔하진 않겠지만요..ㅎㅎ 단순 예시라고 생각해주세요!)

방법은 진짜 간단합니다. 2초도 안되서 끝납니다

그냥 변경 사항 탭에서 git add 를 하고싶은 파일만 선택한 후

🖱️ 우클릭 → 변경 내용 스테이징

의 방법으로 추가하시거나,

+ 기호를 누르셔서 원하시는 변경 내역을 골라 직접 추가해주셔도 됩니다.

이렇게 하면 스테이징 된 변경 사항 이라는 이름으로 방금 선택한 파일들이 등록됩니다.

이게 끝이에요!

이러면 git add는 진행이 완료가 된겁니다.

git commit은 눈치가 빠르신 분들이라면 이미 알고 계셨겠지만,

여기에 커밋 메세지 적어주시고 커밋 버튼을 누르면 끝입니다.

참 쉽죠?

한번에 여러가지 작업을 진행했을 때

이런식으로 원하는 내용만 골라서

커밋을 진행하기 훨씬 수월하기 때문에,

좀 더 세세하고 정성가득한 커밋을 작성하기가

훨씬 수월해집니다.

스테이징 (git add)을 취소하는 방법은 옆의 - 아이콘을 누르거나,

🖱️ 우클릭 → 변경 내용 스테이징 취소

편하신대로 사용하시면 됩니다~~

⚠️ 단, 스테이징 된 변경사항이 아닌, 그냥 변경 사항을 취소시 가장 최근 커밋내용 시점으로 되돌아가니 주의해주세요.

🤔 그럼 깃모지는 어떻게 쓰면되는거죠?

여기까지 소스제어에 대해서 이해하고 계신 여러분이라면,

깃모지는 사실 1+1으로 드리는 사은품이라고 생각하시면 됩니다.

깃모지라고 해서 특별할건 없고,

직접 이모티콘을 복사 & 붙여넣기 해서

커밋 메세지 맨 앞에 넣어주시기만 해도 끝입니다.

(이거 진짜입니다..)

그런데 이모지를 직접 Win + . 을 통해서 필요한 이모지를 하나하나 불러오거나

복사를 해오는 그 자체도 굉장히 귀찮은 작업이 아닐 수 없는데,

이런 부수적인 과정을 없애주는게

바로 아래의 Gitmoji 익스텐션입니다.

먼저 extention 에 가셔서 gitmoji를 검색하신 후, 상단의
다운로드 수가 제일 많은 친구를 설치해주세용.

그러면 준비는 끝입니다.

그리고 아까 그 소스 제어로 오시게 되면,

갑자기 이전에 없던 스마일 모양의 버튼이 생긴걸 확인하실 수 있는데,

클릭하시게 되면

모든 이모티콘들을 종류별로 전부 보여주게 됩니다.

여기서 사용하고자 하는 이모티콘을 선택해주게 되면..

(저는 맨 위의 팔렛트 모양의 아이콘을 선택해볼게여)

이렇게 자동으로 맨 앞에 커밋 메세지와 한칸 띄어서 이모지를 추가해주게 됩니다.

(여담으로 맘에드는 이모지가 없다면 외부에서 복사해오신 후 붙여넣기해도 적용이 됩니다.)

이후 완성된 커밋을 적용한 뒤,

git push origin ~~~ 과 같이 push를 진행해주시면 끝입니다!

---

위의 내용에 대해서 숙지하셔서

프로젝트를 좀 더 수월하게 진행하셨으면 좋겠습니다!

혹여나 잘못되거나 누락된 부분이 있다고 하시면 피드백은 언제든지 환영입니다.