[VSCODE] VSCode에 Git 사용하기

VSCode 에 Git 사용하기

이번에 진행되는 프로젝트는 Angular2 UX Component 변경 처리와 Ionic2 기반의 웹앱 Boilerplate 구성하는 것이다.

사용할 개발 툴은 무료이면서 Front-End 와 같은 개발에 많이 사용되는 VSCode를 선택했기 때문에 Git를 연동해서 사용하는 방법을 정리해 놓도록 한다.

크게 로컬에서 프로젝트를 생성하고 Git 에 연결하는 방법과 Git 에 있는 프로젝트를 로컬로 Clone 하는 방법 의 두 가지 중에 하나를 사용하게 된다.

클론해서 시작하는 것으로 크게 어려운 것이 없으므로 여기서는 로컬에서 프로젝트를 생성하는 부분에 대해서만 알아보도록 한다.

Importants

VSCode 는 Git 연계만 지원할 뿐 Git 자체를 지원하는 것은 아니기 때문에 반드시 Git 를 사전에 설치하고 관련된 사용자 정보등의 설정을 해 놓았다는 것을 가정하고 진행한다.

Git 설치 및 구성 방법은 검색해 보면 많은 정보들이 존재하므로 이를 참고해서 처리하도록 한다.

¶Local Project 로 시작하기

¶Local Folder 지정

VSCode 에서 프로젝트에 사용할 특정 폴더를 선택해서 지정하도록 한다.

¶Git 초기화

좌측에 있는 소스제어 메뉴를 클릭하면 리포지토리 초기화 및 추가 메뉴 (SCM 공급자변경) 를 확인할 수 있다.

VSCode 는 기본적으로 Git 가 기본 소스제어로 설정되어 있으므로 초기화 버튼을 클릭해서 초기화하면 된다.

화면상으로 크게 변화는 없지만 해당 폴더에 가 보면 .git 폴더가 생성된 것을 확인할 수 있다.

¶Git Stage 관리하기

지금까지는 단지 프로젝트 폴더에 Local Git 정보만 구성한 것이다. 이제 간단하게 readme.md 파일을 하나 생성해 보도록 한다.

위의 그림에서 보이는 것과 같이 파일을 하나 생성하면 왼쪽의 메뉴에 있는 저장소 아이콘 에 추가/변경된 파일 갯수가 보이는 것을 확인할 수 있다.

아직은 변경된 것만 관리되고 있을 뿐이고 버전관리 대상이 아니기 때문에 이 파일을 Stage 처리를 해 주어야 한다.

위의 그림에서 보이는 것 처럼 해당 파일에 마우스를 위치시키면 + 아이콘이 보이고 클릭하면 Stage 처리된다.

만일 여러 개의 파일들을 모두 한번에 처리할 경우는 CHANGES 에 마우스를 위치시키면 대상 파일들을 모두 Stage 처리할 수 있다. 취소가 필요한 경우는 상단에 ... 클릭하면 추가 명령어들과 Stage 취소를 할 수 있다.

Stage 처리한 후에 해당 파일을 변경헀다면 변경된 파일에 M 상태를 나타내는 아이콘이 표시된다.

당연히 변경된 파일을 선택하면 변경된 내용을 확인할 수 있다. 위에서 생성했던 readme.md 파일을 선택하면 readme.md (Working Tree) 파일에서 stage 처리 후에 변경된 내용을 확인할 수 있다.

¶Git Commit

이제 로컬 Git 상에서 Stage 처리 (Git 의 버전관리를 위해 Add 된 상태) 를 했으므로 Git 에 Commit 를 해서 버전관리를 해 줘야 한다.

위의 그림과 같이 작업된 내용을 유추할 수 있는 메시지를 입력하고 Commit 아이콘을 클릭하면 된다.

당연한 말이지만 Commit 이 되면 stage 상태에 있던 파일들이 Local Git 저장소로 반영된 것이기 때문에 CHANGED 정보는 초기화 된다.

¶Remote Git 추가

현재 VSCode 버전에서는 원격 Repository를 UI 에서 연결하는 방법은 없기 때문에 (있는데 못 찾았을 수도 ㅠㅠ) 터미널을 열고 아래의 명령을 통해서 원격 Repository 를 연결해야 한다.

$ git remote add origin "github 등에서 생성한 프로젝트 Repository URL"

Notes

터미널을 여는 방법은 Git 추가메뉴인 ... 에서 Git 출력 표시 를 선택한 후에 터미널을 선택해도 되고 Ctrl + ` 키를 눌러서 열어도 된다. 단, 기본은 PowerShell 로 되어 있으므로 Cmd 창과 같이 사용하려면 ‘VSCode 설정 및 팁들 (계속 갱신)’ 게시글을 참고해서 설정을 변경해 주면 된다.

원격 Repository 정보가 추가되면 왼쪽 하단에 클라우드 업로드 처럼 보이는 아이콘이 생성된다. (아래의 원격 브랜치 설정 이미지 참고)

¶Remote Git 로 Push 하기

Remote Git 정보를 추가했지만 아직 로컬에서 원격의 브랜치를 연결한 것은 아니기 때문에 이를 연결해 주는 작업을 아래와 같이 수행하면 된다.

브랜치 연결이 되면 클라우드 업로드 아이콘이 동기화 아이콘으로 변경된다.

이제 로컬에서 관리되고 있는 git repository를 원격 repository에 적용해 줘야 한다.

원격 Repository에 처리하기 위해서는 계정 정보를 입력해야 한다. 만일 다른 프로그램에서 이미 연결해서 사용 중이라면 계정 정보가 남아있기 때문에 그냥 넘어갈 수도 있지만 그렇지 않다면 아래의 그림과 같이 계정정보를 묻게 된다.

¶오류 처리

¶Git: Can’t push refs to remote. Run ‘Pull’ first to integrate your changes.

위의 오류는 로컬 Repository의 변경을 적용하기 전에 이미 원격 Repository에서 변경이 발생한 것으로 Merge 가 필요한 상태이므로 원격 저장소의 정보를 로컬에 병합해 줘야 한다.

$ git pull origin master

¶Git: Refusing to merge unrelated histories.

위의 오류는 로컬과 원격이 동일한 Base 에서 시작하지 않았기 때문에 Merge 중에 연관되지 않은 기록이 존재한다는 것으로 아래의 명령을 통해서 이런 내용들을 모두 수용하는 것으로 처리를 하면 된다.

$ git pull origin master --allow-unrelated-histories

¶Git: There is no tracking information for the current branch

위의 오류는 로컬 Repository가 원격 Repository와 어떤 브랜치로 연결되어야 하는지에 대한 정보가 부족해서 생기는 것으로 아래의 명령으로 브랜치를 연결해 주면 된다.

git branch --set-upstream-to=origin/<브랜치명>

일반적으로 로컬 Repository는 기본적으로 master로 지정되므로 이를 사용하면 된다. 만일 다른 브랜치를 클론 받은 상태라면 해당 브랜치를 지정하면 된다.