[VS Code] UI로 간단하게 Git 사용 (VSCode Git 초기 설치 및 세팅)

 

안녕하세요, 오늘은 대표 형상관리 툴인 Git을 VS Code에서 사용하기 위한 초기 설치 및 세팅을 해보도록 하겠습니다. 그리고 터미널에서 Git 커맨드를 입력하지 않고, VS Code의 UI를 이용하여 간단하게 신규 Git Repository를 생성하고 Commit / Push / Pull을 진행해보도록 하겠습니다. 

 

1. Git 설치

가장 먼저 Git이 설치되어 있어야 합니다. Windows OS 기준으로 아래 공식 사이트에서 자신의 bit에 맞는 설치 버전을 다운로드하여 설치를 진행하면 됩니다. 설치하면서 물어보는 게 많기는 한데, 하나하나 확인하기는 번거로워서 우선은 Default로 Next를 광클하여 설치를 하였습니다.

https://git-scm.com/download/win

git download

git 설치

 

2. VSCode Git 연동

Git 설치 후 VSCode를 실행합니다. 그런 다음 Git과 연동할 프로젝트 폴더를 오픈합니다. 여기서는 아래와 같이 README.md 파일이 1개 포함된 폴더를 한개 생성해서 연동을 해보도록 하겠습니다.

폴더 생성

 

VS Code에는 기본적으로 좌측 사이드 메뉴에, 따로 Extension을 설치하지 않아도 Git 메뉴가 있습니다. 이 메뉴를 클릭하여, "Initialize Repository"를 클릭합니다. git init 커맨드와 동일한 역할을 하는 버튼입니다.

git menu

 

Git init이 완료 되면, 아래와 같이 Source Control 메뉴에서 내가 생성하거나 수정한 파일이 Changes에 노출되는 것을 확인할 수 있습니다. 그러면 파일 하나하나 우측 + 버튼을 클릭하여 Stage 상태로 변경을 하거나 혹은 Chages 우측의 +(Stage All Changes) 버튼을 통해 모든 파일을 Stage 상태로 변경합니다. 이 것은 git add 커맨드와 동일한 작업입니다.

stage 버튼

 

Git add가 완료되면, 아래와 같이 해당 파일이 Staged Changes로 이동을 한 것을 확인할 수 있습니다. 그러면 Source Control 우측에 브이 모양의 Commit 버튼을 클릭하면 Commit Message를 입력할 수 있는 창이 오픈이 됩니다. 여기에 메시지를 입력하고 엔터를 누르면 정상적으로 커밋이 완료됩니다.

commit

 

처음 Git을 설치하여 첫 커밋을 하는 경우, 아래와 같이 Make sure you configure your 'user.name' and 'user.email' in git. 이라는 에러가 발생하면서 커밋이 안되는데, 시키는 그대로 user.name과 user.email을 세팅해주면 정상 커밋이 가능합니다.

user 미입력 시

 

CMD 등 아무 터미널 창을 실행하여, 아래와 같이 user email과 user name을 컨피그 전역에 저장하는 명령을 입력하여 세팅해줍니다.

git config --global user.email "abc@def.com"
git config --global user.name "name"

 

 

3. VSCode Github 연동

다음으로는 Github와 VS Code를 연동하여, 자동으로 Git Repository 신규로 생성하고 소스도 Push/Pull 해보도록 하겠습니다.

커밋이 완료되면 아래와 같이, "Publish Branch" 라는 버튼이 생성이 되는데 이 버튼을 클릭하면 아래와 같이 Private로 나만 볼 수 있도록 Git Repository를 생성할 건지, Public 하게 생성할 건지 선택을 하게 됩니다. 둘 중 원하는 것을 선택하여 버튼을 클릭하여 나의 Github에 자동으로 Repository가 생성되고 커밋된 소스가 Push 되는 것을 볼 수 있습니다.

publish branch

 

VSCode에서 GitHub를 처음에 사용을 하게되면, 아래와 같이 "The extension 'GitHub' wants to sign in using GitHub"이라는 메시지가 뜨면서 GitGub에 로그인하라고 알림 창이 뜨는데, Allow를 선택하면 웹 브라우저로 GitHub에 로그인을 할 수 있도록 연결이 됩니다. GitHub 아이디가 없으신 경우 생성하셔서 로그인을 하시면 됩니다. 크롬의 경우 로그인을 하면 "Visual Studio Code을(를) 여시겠습니까?" 알림이 뜨는데 항상 허용으로 체크하고 VS Code를 실행하면 로그인이 됩니다.

git 로그인

vscode 열기

 

이후 로컬에서 수정 후 수정된 파일을 Push하고자 할 때, 위에서 진행한 것과 동일하게 Stage > Commit을 거친 후 Source Control 우측의 ... 버튼을 클릭하여 Push를 클릭하면 수정 내용이 GitHub에 커밋이 됩니다.

git push

 

이렇게 Git 커맨드 없이 VS Code의 Git UI만 이용하여 간단하게 VS Code와 Git을 연동하여 사용해봤습니다. 이 작업은 GitHub에서 신규 Repository를 생성하여, 아래 커맨드를 입력한 작업과 동일한 작업입니다. 커맨드가 익숙하신 분들은 커맨드를 통해서 진행을 하시고, UI가 익숙하신 분들은 위와 같이 UI를 통해서도 대부분의 작업이 가능합니다.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/000/000.git
git push -u origin main