⚡️ VSCode 내장 GIT 사용법 총정리

GIT GUI

GIT은 CLI 툴이다. GIT의 모든 기능은 CLI 터미널로 사용이 가능하다.

그래프 같은 시각적인 요소도 텍스트를 이용하여 그래픽 표현이 가능하다.

하지만 텍스트로 이루어진 화면은 가독성이 그렇게 좋지 않으며, 몇몇 기능은 시각적 표현이 필요할 경우가 있다.

 

GIT GUI란, Graphical User Interface의 약자로 초보자가 명령이나 작업을 이해하기 쉽도록 프로젝트 히스토리를 UI로 시각화 하여 도와주는 도구이다.

GIT GUI 툴의 종류는 다음과 같다.

• github desktop
• SourceTree
• GitKraken
• Fork
• SmartGit
• Git Cola
• GitForce
• Giggle
• Magit
• Egit
• Gitg

보라색으로 표기한 GIT GUI툴들이 가장 인기있고 자주 쓰인다.

이 툴들은 매우 훌륭하며 필자도 얼마전 까지 Fork를 썼지만, 코딩에디터에서 코딩하다 커밋하기 위해 다른 에디터로 왔다갔다 하는 점에서 불편함을 느끼기 시작했다.

터미널 명령어 입력도 따로 CMD를 띄우지않고 VSCode에 내장된 터미널로 처리하고 있어, GIT CLI뿐만 아니라 GIT GUI 기능도 VSCode에서 제대로 써볼수 있지 않을까 해서 학습할겸 포스팅 해본다.

VSCode의 내장된 GIT GUI 기능은 UI/UX 측면에서 썩 좋지는 않지만, 확실히 터미널로 GIT을 다루는 것보다 훨씬 편하게 커밋할수있다.

더군다나 VSCode의 Extension 툴들과 연동해 고급기능들을 사용할수 있다는 강력한 강점을 지니고 있어 유료 IDE인 IndelliJ나 WebStorm 부럽지 않게 기능을 이용할 수 있다.

이번 강의에선 전반적인 VSCode GIT GUI 사용법을 익혀보고, VSCode Extension를 추가로 설치해서 다른 유료 에디터(IntelliJ, WebStorm) 수준의 IDE를 구축하는 시간을 가져보겠다. 

---

VSCode - GIT 익스텐션 추천

VSCode에 내장된 GIT만을 이용하기에는 기능이나 UI가 약간 아쉽고 딸린다.

하짐나 유저들이 많든 훌륭한 VSCode 익스텐션으로 값비싼 유료 IDE 못지않은 기능들을 제공하니 한번 둘러보는 것도 나쁘지 않다. (이번 강의글에서도 중간중간에 익스텐션을 소개할 예정이다)

[VSCode] 💽 GIT - Extension 💯 추천 (2022-05-17 업뎃)

---

VSCode - GIT GUI 사용법

 

VSCode - git init

처음 VSCode를 새창으로 실행하면 다음과 같은 창이 보일 것이다.

폴더를 하나 열어보자.

 

왼쪽 사이드바 메뉴에서 GIT 아이콘을 클릭하면, [ 리포지토리 초기화 ] 버튼이 보일 것이다.

이 버튼이 git init 명령어를 GUI로 표현한 버튼이라고 보면 된다.

[ 리포지토리 초기화 ] 버튼을 누르면 다음과 같이 .git 숨김폴더가 추가됨을 확인 할 수 있다.

 

 

VSCode - git add / git status

GIT 폴더에 다음과 같이 아무 txt 파일들을 추가해보자.

그러면 파일 우측에 U 라고 빨간 글씨(에디터 코드색상 템플릿에 따라 달라질수도 있다)가 표시되어 있을 텐데, 이는 

GIT이 아직 관리를 안하는 파일 Untracked의 약자이다.

실제로 터미널에 git status를 쳐보면 출력되는 정보와 표시가 같음을 알수 있다.

 

왼쪽 사이드바에 GIT 아이콘을 보면 3 이라고 숫자가 표시되어있는데, 이는 변경사항 파일이 3개 있다는 의미이다.

GIT 메뉴에 들어가 이 변경사항 파일들을 스테이징(git add) 시킬수있다.

파일 개별로 할수도 있고 한번에 할수도 있다.

 

 

VSCode - git restore --staged

스테이징을 취소할때는 다음 버튼을 눌러 간단히 add를 취소 할수 있다.

단, 수정(modified) 파일이 있다면, 모두 add해서 스테이징해야 취소할수 있다는 점은 유의 하자.

 

 

VSCode - .gitignore

vscode 익스텐션을 통해 간단히 .gitignore 파일을 생성할 수 있다.

gitignore - Visual Studio Marketplace

 

 

VSCode - git commit

커밋은 GIT GUI를 쓰는 가장 큰 이유이다.

아무래도 일일히 명령어로 커밋하기에는 손가락이 아프다..

간단한 버튼 조작으로 아주 간편하게 커밋이 가능하다.

 

Commit Message 에디터 익스텐션

Commit Message Editor - Visual Studio Marketplace

보다시피 VSCode의 커밋 메세지는 한칸으로 되어있다.

간단하게 커밋을 할경우는 문제없지만, 팀 협업으로 일할때는 커밋제목과 커밋내용을 길게 적어주어야 할 경우가 생긴다.

위의 익스텐션을 깔면 에디터 창에서 커밋 내용을 작성할 수 있다.

 

 

VSCode - gitmoji

깃모지는 깃 커밋에 이모티콘을 사용해 보다 시각적으로 커밋 메세지를 의미적으로 알아볼수있게 하는 기능이다.

[GIT] ⚡️ Gitmoji 사용법 (Gitmoji-cli)

 

VSCode에서 Gitmoji 관련 익스텐션을 깔면, GUI에서 아주 간단히 사용할수 있다.

다음 익스텐션을 설치하면 상단에 🙂 아이콘이 생기는데, 이를 클릭하면 각 이모지에 대한 사용처 의미와 함께 메뉴가 출력된다.

커밋 목적 의미와 맞게 이모지를 사용하면 시각적으로 뛰어난 커밋 로그를 구성할 수 있다.

Gitmoji - Visual Studio Marketplace

 

 

VSCode - git log

GIT 로그 또한 GIT GUI를 이용하는 가장 큰 이유 중 하나다.

GIT 터미널에선 git log --graph 명령어를 통해 텍스트로 이루어진 GIT 그래프를 봐왔다.

..솔직히 시각적으로 조잡하다.

 

Git Graph 익스텐션

VSCode에서는 기본적으로 GIT 그래프에 대한 그래픽 기능을 지원하지는 않는다.

하지만 VSCode 익스텐션에서 아주 고퀄의 기능을 제공한다.

Git Graph - Visual Studio Marketplace

단순 그래프 표현 뿐만 아니라, 파일 diff 및 상호작용을 지원한다.

이 하나만으로 GIT GUI툴을 사용하는 것과 다름이 없을 정도로 강력한 익스텐션 툴이다.

VSCode 에디터 하단메뉴의 Git Graph 를 누르면 해당 프로젝트의 GIT 로그를 볼수 있다.

 

Git History 익스텐션

이것도 git graph같이 그래츠 및 세부정보와 함께 로그를 볼수있는 익스텐션이다.

둘이 약간 기능적인 차이가 있어, 같이 써도 무방하다.

주로 개별 파일에 대한 히스토리 내역을 조회할때 자주 쓰인다.

 

 

VSCode - git diff

diff는 수정한 파일 내용을 커밋된 이전 파일 내용과 어느부분이 수정됬는지 수정내용을 표시하는 기능이다.

터미널에선 다음과 같이 표시해주는데, 솔직히 가독성이 매우 안좋다.

 

외부 diff 툴도 존재하지만, 간단하게 VSCode내에서 diff 상태를 그래픽적으로 볼수 있다.

우선 dog.txt 파일의 내용을 다음과 같이 수정해주었다.

 

그리고 GIT 메뉴에 가서 변경사항의 파일을 누르면 에디터 화면에 다음과 같이 두 파일의 차이 수정 내용이 표시되게 된다.

혹은 위에서 설치한 GIT Graph 익스텐션 메뉴로 가서도 확인 할 수 있다.

 

 

VSCode - git remote

깃헙과 VSCode를 연결해보자.

우선 깃헙에서 새 프로젝트를 만들어 준다.

 

그리고 remotes 탭을 눌러서 + 버튼을 눌러 remote를 추가한다.

순서대로 remote 이름 (origin)을 입력하고 enter하고 깃저장소 URL을 쳐주면 된다.

 

 

VSCode - git push

원격저장소와 연결이 됬으면 이제 push를 해보자.

푸시를 하고 깃저장소를 새로고침하면 다음과 같이 업로드가 됨을 확인할수 있다.

 

 

VSCode - git pull

VSCode로 pull 동작을 확인해보자.

우선 깃헙 저장소에서 파일을 임의로 하나 삭제하고 커밋해보자.

 

이제 원격저장소 커밋과 로컬저장소 커밋 내용이 달라지게 되었다.

이제 pull을 통해 원격저장소의 커밋내용을 가져와보자.

 

 

VSCode - git clone

이번엔 위에서 올린 깃헙 저장소의 내용을 그대로 clone 해보자.

상단 메뉴바에서 VSCode 새창을 열어준다.

그리고 리포지토리 복제를 누르면 clone을 진행하게 된다.

 

이렇게 처음부터 복제하는 방법도 있고,

아니면 새폴더를 하나 만들어주고 VSCode로 열어주고, GIT 메뉴에서 [ 복제 ] 를 누르는 방법도 있다.

 

 

VSCode - git fetch

 

 

VSCode - git reset

커밋을 취소시키는 reset을 GUI로 사용해보자.

reset에는 3가지 옵션이 있다.

• –soft : index 보존(add한 상태, staged 상태), 워킹 디렉터리의 파일 보존. 즉 모두 보존.
• –mixed : index 취소(add하기 전 상태, unstaged 상태), 워킹 디렉터리의 파일 보존 (기본 옵션)
• –hard : index 취소(add하기 전 상태, unstaged 상태), 워킹 디렉터리의 파일 삭제. 즉 모두 취소. 작업내용 다 사라지니까 왠만하면 사용X

터미널에선 커밋 해시값 6자리를 입력해야하지만 GUI에서는 단순히 커밋 목록에 마우스를 옮겨 버튼만 누르면 되니 이또한 GIT GUI의 강점이라 말할 수 있다.

 

VSCode - git revert

reset이 커밋을 되돌리는거라면, revert는 커밋을 덮어쓰는 형식이다.

따라서 내용이 같은 새로운 커밋이 생성되게 된다.

 

 

VSCode - git branch / checkout

브랜치를 생성해보자.

기본적으로 브랜치 분기는 현재 커밋 내용을 바탕으로 복제되어 분기가 된다.

 

특정 커밋을 지정해서 브랜치를 생성해 분기할수도 있다.

 

위에서 설치한 GIT Graph 익스텐션에서도 바로 생성할 수도 있다.

 

 

VSCode - git merge

 

아니면 BRANCHES 사이드메뉴에서 우클릭을 누르고도 merge 할수 있다.

 

 

VSCode - git rebase

 

 

VSCode - git cherry-pick

VSCode 기본 GIT GUI에서는 체리픽을 따로 지원하지않는듯 하다.

위에서 설치한 Git Graph 익스텐션에서 간단하게 커밋 항목을 우클릭한 뒤 체리픽을 할 수 있다.

 

 

VSCode - git tag

 

태그 추가 + 버튼을 누르게 되면, 상단에 입력창이 나오게 되는데,

먼저 태그명을 입력해주고 Enter하면, 또다시 입력 창이 나오게 되는데 annotated 태그 메세지 입력하고 Enter를 누르게 되면 annotated 태그가 만들어지게 된다.

만일 annotated 태그 메세지를 입력하지 않고 빈칸으로 Enter치면 lightweight 태그로 처리 되게 된다.

 

따라서 다음과 같이 태그가 구성됨을 확인할수 있다.

 

 

VSCode - git stash