[Git] 비주얼 스튜디오 코드 ( vscode ) 에서 깃헙 ( github ) 연동 하는 방법

본 포스팅에서는 비주얼 스튜디오 코드에서 원격 저장소인 깃헙과 연동하고 작성한 소스 코드를 간편하게 commit 및 push 하는 방법에 대해 다루어 보겠습니다.

1. git 설치 확인

먼저 vscode를 실행시킨 후 F1 키를 눌러서 명령어 검색창을 띄워줍니다. 그리고 ‘git clone’ 을 검색해줍니다.

git clone 명령어 체크

만약 여기서 ‘No matching commands’ 등의 메시지가 보인다면, git이 설치되어있지 않은 것이기 때문에 먼저 설치해주셔야 됩니다.

아래 포스팅에서 OS 별 설치방법에 대해 자세히 다루었으니 참고해주세요.

2. 연동하기

설치가 되어있거나 완료했다면, 이제 세번째 ‘Source Control’ 버튼을 눌러주세요.

Source Control 버튼

버튼을 누르시면, 두가지의 선택지가 보이실텐데요. ‘Open Folder’ 옵션은 이미 로컬 컴퓨터에 존재하는 repository를 여는 것을 의미하고, ‘Clone Repository’ 옵션을 선택하셔야 아직 git clone 하지 않은 repository를 github에서부터 연동할 수 있습니다.

Clone Repository

이제 이렇게 검색창 같이 뜨는 것을 확인하실텐데요. 여기서 직접 repository URL을 넣어주셔도 되고, Clone from GitHub을 눌러서 로그인하셔도 됩니다.

Clone from Github

단 하나의 repository만 clone 하시거나 다른 사람의 public repository를 가져오시고 싶은 경우 직접 URL을 넣으시는 걸 추천합니다.

본인의 github 계정을 연동해서 여러 repository를 관리하시고 싶으시면 ‘Clone from Github’ 버튼을 눌러 github 계정 자체를 연동하시는 걸 추천드립니다.

2-1 직접 repository URL 넣기

직접 URL을 넣으시는 경우, github에 로그인 하셔서 해당 repository 페이지에서 URL을 복사 넣어주시면 됩니다.

repository 페이지에서 초록색 ‘<> Code’ 버튼을 누르고 밑에 나오는 주소를 복사하시면 됩니다.

repository 주소

다시 vscode로 돌아와서 복사한 주소를 ‘Clone Repository’를 누른후 붙여넣어 주시면 됩니다.

주소 붙여넣기

이후 이렇게 repository를 저장할 곳을 정할 수 있습니다.

repository 경로 설정

2-2 계정 연동하기 ( Clone from Github )

만약 직접 repository URL을 넣지 않고 ‘Clone from Github’ 버튼을 통해 계정을 연동하시는 경우 로그인 창이 뜨면 github 에 로그인 해주시면 되고, 권한을 부여해주시면 됩니다.

vscode 계정 연결

github 계정이 성공적으로 연동 되었다면, 계정에 있는 repository 목록들이 뜨고, 선택하셔서 clone 해오시기만 하면 됩니다.

계정 연결후 repository 선택

repository 저장 경로 설정

선택하시면, 이렇게 repository를 clone할 위치를 정하실 수 있고, ‘Select as Repository Destination’을 누르면 git clone을 실행합니다.

3. commit, push 하기

vscode에서 git repository 폴더를 여신 후 ‘Source Control’ 패널로 들어가면, 아래와 같은 화면이 보입니다.

임의로 hello_world.txt의 변경사항을 만들고 commit과 push까지 해보겠습니다.

소스코드 변경사항

이렇게 변경사항을 만들고 저장해주면 왼쪽에 어떤 파일에 변동사항이 있는지 알려줍니다. 파란색 ‘Commit’ 버튼을 눌러줍니다.

commit

만약 처음 git을 설치하고 첫 commit을 하시는 경우 “Make sure you configure your ‘user.name’ and ‘user.email’ in git” 과 같은 메시지가 보이실 수 있습니다.

이때 터미널이나 CMD를 여시고, name 과 email을 세팅하는 명령어를 실행시켜주시면 됩니다.

git config --global user.email "github 계정 이메일"
git config --global user.name "github에 쓰이는 이름"

다시 돌아가서 버튼을 누르시면 commit을 확인하는 메시지가 뜨는데 그냥 ‘Yes’를 눌러주시면 되고 commit 할때마다 눌러주는게 귀찮으시다면 ‘Always’를 눌러주시면 됩니다.

commit 확인

이제 첫번째 줄에다가 해당되는 commit message를 적어주시면 됩니다.

Commit message 작성

다 적으셨다면, 오른쪽 위 체크마크 버튼을 누르시면 commit이 끝납니다.

commit 완료

이제 ‘Sync Changes’ 버튼을 누르고,

git push

‘Ok’를 누르면 push가 되고,

push 확인

Github에서 commit을 확인하실 수 있습니다.

commit push 후 확인하기

답글 남기기