Visual Studio code Git Graph 읽는 법 (UI)

Visual studio code의 Git Graph UI는 직관적인듯 직관적이지 않다. 

간단하게 한번 설명을 읽고나면 햇갈릴 일이 없다. 

해당 상태에 대해 설명을 해본다. 

v1 을 생성, add, commit, push 한후, v2를 add,commit,push를 통해 origin/master 에 등록을 하는 과정을 거쳤다. 

v3 는 add, commit을 마쳐서 local에는 등록이 완료 되었지만, origin 즉 remote branch에는 등록이 되지 않은 상태이다. 

 

즉 local의 경우 box안에 branch이름만 있고, remote는 remote respository의 이름과 branch의 이름이 같이 작성되어있다. 

또한 box 옆에는 commit 명이 작성되어 있다. 

파란색 동그라미는 Head의 위치를 뜻한다. 현재 Head 는 local의 master branch를 가리키고 있고, origin/master 는 local에 비해 1 커밋 뒤쳐진 상태이다. 

 

local과 remote의 commit이 같아지면 

다음과 같이 나타난다. 위 예제와 갑자기 달라져 햇갈릴 수 있지만, 보여주고자 한 의도는 동일하다. 

remote와 local의 commit이 같아지면 박스 내부의 UI가 branch | remote repository name 로 설정된다. 

 

(github 자체에서 master 라는 용어를 main으로 수정하였다. master slave라는 표현 자체가 문제가 되었다고 한다. 기능은 동일하다.)

 

그럼 dev | origin 옆의 main | origin은 뭘까? 킹리적 갓심으로는 dev|origin을 따온 branch로 보인다. 

 

확실하게 하기 위하여 dev branch에서 feature 브랜치를 따보자. 

(base) hajunuicBookPro:test hajunkim$ git checkout -b dev/feature
fatal: cannot lock ref 'refs/heads/dev/feature': 'refs/heads/dev' exists; cannot create 'refs/heads/dev/feature'

(base) hajunuicBookPro:test hajunkim$ git checkout -b feat/1
Switched to a new branch 'feat/1'

 

먼저 흥미로운 사실은 앞선 branch 와 동일한 이름을 참고하여 branch 이름을 생성하려하면 문제가 된다. dev/feature이라는 이름으로 branch를 만들 수는 없었지만, feat/1 이라는 이름으로는 만들 수 있다. 

현재 확인할 수 있는 것은 feat/1 branch는 "main | origin 에서 따온 dev | origin 의 branch"에서 다시 따온 branch이고 현재는 local에만 branch가 만들어진 상태라는 것을 확인 할 수 있다. 

 

이제 해당 branch 를 remote 에도 생성한 후, local branch에서 먼저 commit 을 수행해보자. 

(base) hajunuicBookPro:test hajunkim$ git push origin feat/1
Total 0 (delta 0), reused 0 (delta 0), pack-reused 0
remote: 
remote: Create a pull request for 'feat/1' on GitHub by visiting:
remote:      https://github.com/test-for-test-for-test/test/pull/new/feat/1
remote: 
To https://github.com/test-for-test-for-test/test.git
 * [new branch]      feat/1 -> feat/1

생성 완료하여 feat/1 | origin 으로 표기가 된다. 

 

local에 파일을 생성하여 commit해보자.

다음과 같이 local branch가 한단계 앞서 나가는 것을 볼 수 있다. 

이로써 vscode git graph UI 에 대한 이해를 마친다.