vscode github 연결하는 방법
vscode github 연결하는 방법은 조금 복잡해 보일 수도 있습니다.
지난 포스팅 글 vscode git 연동 개념과 장점 쉽게 이해하기 내용을 보시고, 오늘 포스팅 순서를 따라서 하시면 아주 간단하게 연결할 수 있습니다.
이 글은 vscode를 설치했고 github.com에 로그인을 했다는 전제 하에서 작성하였습니다. 혹시 필요한 분들을 위해서 공식 URL을 알려드립니다.
[1 단계] 로컬드라이브 시작
아주 초기 단계부터 설명하겠습니다. 우선 vscode를 실행하고, 빨간색 표시한 (1)번인 EXPLORER 메뉴를 선택합니다. EXPLORER이라는 메뉴명은 화면 화면 위쪽에 나타납니다. 이제 (2)와 같이 “open folder”가 나타나는데 이 단추를 누릅니다. 참고로 vscode를 이미 설치해서 사용하고 있지만, github를 연결하지는 않은 경우에는 아래와 같은 화면이 나오지 않을 수도 있습니다. 그럴 경우에는 아래의 4단계 로 넘어가서, 이미 지정하여 사용하는 디렉토리(로컬드라이브의 저장소)를 지정하면 되겠습니다.
[2 단계] 로컬드라이브 만들기
open folder 단추를 누르면 파일탐색기 상자가 나타납니다. 여기서 마우스 오른쪽 단추를 눌러 새폴더를 선택합니다. 로컬디스크에 새폴더를 만드는 이유는 앞으로 github와 연결될 디렉토리로 사용하기 위해서입니다. 이 디렉토리를 반드시 vscode에서 만들 필요는 없지만, 지금은 이 방식대로 진행하는 것이 연결 방법을 설명하기 위해서는 더 편합니다.
[3 단계] 로컬드라이브 네이밍
이 글에서는 새폴더의 이름을 (1)과 같이 “vscode_github”라고 하겠습니다. 물론 여러분 마음대로 네이밍하면 됩니다. 디렉토리를 만든 후 (2)번의 폴더 선택 단추를 눌러서 완료합니다.
[4 단계] vscode에서 로컬드라이브 불러오기
이제 방금 만든 “vscode_githup” 디렉토리를 vscode 프로그램에서 불러오겠습니다. 우선 (1)번의 SOURCE CONTROL 단추를 누릅니다. 그러면 (2)번의 Initialize Repository 버튼이 나타나는데요, 이 단추를 누릅니다. 여기까지 하셨으면 vscode에서 앞으로 사용할 로컬드라이브의 기본 저장소를 지정한 것입니다.
[5 단계] 파일만들기
이 단계에서는 저장소 리렉토리에 소스코드 등이 들어 있는 실제 파일을 만들어 보겠습니다. 물론 내용은 없는 비어있는 파일입니다. 파일명은 “vsgit_1.txt”로 하겠습니다. 물론 파일명은 여러분이 마음대로 지정하시면 됩니다. 자, 이제 (1)을 눌러 EXPLORER 메뉴로 들어갑니다. 그러면 (2)와 같은 아이콘이 생깁니다.
혹시 안보이면 메뉴바를 오른쪽으로 조금 잡아당기면 나타날 것입니다. (2)번의 아이콘은 file create 메뉴입니다. 이 단추를 누르면 (3)번에 입력할 수 있게 되는데요, 여기서 “vsgit_1.txt”을 입력하고 엔터를 치면 파일이 생성됩니다. 즉, “vscode_github”이라는 저장소에 “vsgit_1.txt”이라는 파일이 생긴 것입니다.
처음 해 보시는 분이라면 윈도즈의 파일 탐색기를 열어서 해당 디렉토리에 그 파일이 있는지 한번 보시는 것도 좋겠습니다.
[6 단계] 파일의 내용 입력하기
이제 “vsgit_1.txt” 파일에 소스코드 혹은 글자를 넣어서 저장해 보는 단계입니다. 화면의 오른쪽에 보면 에디팅 화면이 나오는데요, 거기에 “code 1″이라고 입력해 봅니다. 그리고 (2)번의 SOURCE CONTROL 메뉴를 선택합니다. 그러면 (3)번과 같은 입력화면이 나오는데요, 이건 “vsgit_1.txt”라는 파일의 내용인 소스코드가 변경될 경우 그 버전을 관리하기 위해 지정하는 버전명입니다. 버전 관리는 github에서 하게 되므로, 여기서는 일단 입력만하고 자세한 내용은 뒤의 단계에서 보여드리겠습니다.
일단 (3)번의 입력창에 “v1″이라고 쓰겠습니다. 물론 이 명칭은 여러분이 마음대로 지정할 수 있습니다. 그리고 (4)번의 Commit 단추를 누르면 저장이 됩니다. 즉, “code 1″이라는 내용을 담은 “vsgit_1.txt”이라는 파일로 저장되는 것입니다.
vscode의 옵션에 따라서는 (5)번과 같은 대화창이 나오기도 하는데요, 그럴 경우에는 Save All & Commit Changes 단추를 눌러 주세요.
[7 단계] github 시작
자 이제 github으로 가서 vscode로 만들어 둔 디렉토리인 “vscode_github”과 연결할 새로운 디렉토리를 만들겠습니다. github에 로그인을 한 후 대쉬보드로 들어가서 (1)과 같은 New 단추를 눌러줍니다.
[8 단계] github에서 원격 디렉토리 만들기
그러면 Create a new repository라는 화면으로 바뀌고, (1) 입력창이 뜹니다. 여기에 “github_vscode”라고 입력하겠습니다. 이 명칭도 여러분이 마음대로 네이밍할 수 있습니다. 화면의 약간 아래쪽에 (2)번과 같이 Public으로 할 것인지 Private으로 할 것인지 선택하게 되어 있는데, 여기서는 디폴트값인 Public으로 그대로 두겠습니다. 그 외 다른 옵션들도 모두 디폴트값으로 두고 화면을 아래로 스크롤 하면 (3)번과 같은 Create repository 단추가 보입니다. 이 단추를 누르면 github 쪽에도 저장소인 원격 디렉토리가 만들어 지게 됩니다.
[9 단계] 원격 디렉토리 주소 복사
이제 방금 만든 “github_vscode”라는 github 저장소를 vscode에 연결하기 위해 주소를 복사하는 과정입니다. Create Repository를 누르면 아래와 같은 화면이 나옵니다. 주소가 자동으로 생기는거죠. 이 주소를 블럭 설정하여 복사하기를 할 수도 있지만, 그냥 블럭없이도 (2)번의 단추를 누르면 주소가 복사 됩니다.
[10 단계] vscode와 연결 시작
다시 vscode 화면으로 돌아 옵니다. 위의 [6 단계]의 화면으로 들어가서 (1)번과 같이 “…”이라는 메뉴를 선택해 주세요. 그러면 리스트 박스가 나오면서 (2)번의 Remote 메뉴와 그 옆에 (3)번의 Add Remote 메뉴가 나옵니다. (3)번의 메뉴를 눌러 주세요.
[11 단계] vscode에 URL 입력
화면의 오른쪽 위, 즉 편집화면의 위쪽을 보면 “Provide repository URL or Pick a repository source”라는 입력창이 뜹니다. 여기에 연결한 github 저장소의 URL을 입력하라는 뜻이죠. 우리는 [9 단계]에서 복사한 URL이 있으므로, 이 입력창에 들어가서 붙여넣기(Ctrl V)를 눌러주면 됩니다. 그러면 (2)와 같이 만들어 지는데, 여기서 엔터를 치면 (3)번과 같이 remote name을 입력하라는 입력창이 나옵니다. remote name이란 URL이 기니까, 그냥 간단하게 부를 별명을 만들라는 의미인데, 통상적으로는 “origin”을 많이 사용합니다. 즉, 여러분에게 origin이란 [8 단계]에서 github에 만들어 둔 “github_vscode” 디렉토리를 말합니다.
[12 단계] 로컬드라이브 파일을 github으로
이제 [6 단계]에서 만든 “vsgit_1.txt” 파일의 v1을 github으로 올리기 위한 과정입니다. (1)과 같이 Publish Branch 단추를 누르고, (2)와 같이 Commit 버튼을 누르면 해당 파일이 원격서버인 github로 올라가서 저장되게 됩니다. 이때 이 저장소를 신뢰하느냐라는 취지의 질문 상자가 나오는 경우도 있습니다. 당연히 우리가 github에 만든 디렉토리니까 신뢰할 수 있으므로 OK 버튼을 누르시면 됩니다. 자 이제 github로 가서 실제로 파일이 올라와 있는지 확인해 보러 가겠습니다.
[13 단계] github에서 확인
다시 github로 갑니다. 그리고 [8 단계]에서 만들었던 “github_vscode” 디렉토리를 찾아 들어가 보겠습니다. 쉽게 (1)번과 같은 디렉토리 단추를 찾을 수 있는데요, 이 단추를 누르면 (2)번과 같이 “v1″이라는 버전으로 “vsgit_1.txt” 파일이 저장되어 있는 것을 확인 할 수 있습니다.
[14 단계] 로컬드라이브의 파일 수정하기
여기서 만약 “vsgit_1.txt”라는 파일을 편집해서 소스코드의 내용을 수정/추가한다면 어떨까요. 우선 (1)번과 같이 편집화면에서 “code_2″라는 텍스트를 한 줄 넣어 보겠습니다. 그러면 파일명은 같지만 버전이 다른 파일을 만들어야겠죠. (2)의 화면에 “v2″라고 버전을 써 주고, (3)을 눌러 로컬디스크에 Commit하고, (4)를 눌러 원격서버인 github와 Sync 시킵니다. 앞으로는 어떤 변경이 있다면 Commit하고 Sync하고… 이걸 반복하시면 됩니다. 필요하면 버전명칭은 입력해 주시면 되는데, 가능하면 Commit 전에 버전명칭을 입력하는 습관을 갖는 것도 좋겠습니다.
[15 단계] 수정된 파일의 github 싱크 확인
자 이제 마지막 단계입니다. [14 단계]에서 만든 v2 버전의 “vsgit_1.txt” 파일이 어떻게 되었을지, github에 가서 확인해 보시기 바랍니다.
지금까지 연결하는 방법을 알아봤는데요, github의 꽃은 역시 공유와 협업입니다.
다음 글에서는 각기 다른 두 사람이 동일한 파일을 편집, 저장, Sync하면서 협업을 해 나가는 방법을 설명하겠습니다.