깃허브 VS Code Commit 하기

깃허브를 이용할 때 VS Code Commit 세팅을 통해 편리하게 Git(깃)을 포함한 소스 코드 버전 관리가 가능합니다. 터미널에서 직접 깃 명령어를 실행하지 않고 원격 저장소를 지역 저장소로 복제할 수 있습니다. 그리고 지역 저장소에서 새로운 커밋을 생성하고, 다시 원격 저장소에 반영할 수 있습니다.

이번 포스트에서는 이러한 작업을 하는 방법을 알아보도록 하겠습니다. 혹시 깃 설치 및 깃허브 가입이 되어 있지 않으시면 깃(Git) 설치하기 와 나만의 무료 웹사이트 제작 4부 – 배포(feat. Netlify) 포스트에서 확인하시기 바랍니다.

* 혹시 그림이 작게 느껴져서 잘 안보이시는 분은 해당 그림을 클릭해서 크게 보실 수 있습니다.

1. 깃허브 원격 저장소 생성 

깃허브에 로그인 하시면 맨 윗줄에 Dashboard 포함된 라인에서 ① ‘+’ 표시를 클릭합니다. ② 새로운 원격 저장소(new repository) 생성을 시작할 수 있습니다. ③ 적당한 저장소 이름(repository name)을 작성한 뒤 ④ create repository 클릭하여 저장소 생성을 완료합니다. ④ 이후 다음 웹페이지에서 https로 시작하는 주소를 보여주는데 ⑤ 클립보드 모양을 클릭해서 그 주소를 복사합니다.

2. 원격 저장소 지역 저장소로 복제(Clone)

VS Code를 실행하고 File-New Window를 클릭하여 새 작업창을 오픈합니다. ① 좌측 소스 코드 버전 관리 버튼( )을 클릭하고, ② 저장소 복사(Clone Repository)를 실행합니다. 주소를 입력하는 창이 나타나는데, ③ 조금 전 복사했던 HTTPS 주소(원격 저장소 주소)를 붙혀넣고 엔터키를 누릅니다.

원격 저장소를 ① 로컬 컴퓨터에 저장할 위치(지역 저장소 폴더로, 저는 Documents\vscode-test)를 선택한 후 ② ‘Select Repository Location‘을 클릭하면 우측 하단 알림창을 뜹니다. ③ ‘Open’을 클릭하면 현재 열려있는 VS Code 창에서 복제한 저장소가 오픈됩니다. 좌측 상단 EXPLORER 섹션(vs code 탐색기)에 원격 저장소 복제 위치 폴더( VSCODE-TEST)가 표시됩니다.

이 작업을 통해서 원격 저장소와 지역 저장소가 서로 연결의 기반을 마련했다고 보시면 됩니다.

3. 깃 사용자 정보 등록

VS Code에서 커밋 처리를 하기 위해서는 먼저 깃 사용자 정보(사용자 이름, 사용자 이메일주소)를 등록해야 합니다. 만약에 여러 사람이 작업을 한다고 했을 때, 누가 어떤 작업을 했는지 알 수 있는 표시를 위한 절차라고 보시면 됩니다. VS Code 터미널 창을 열어서 다음 명령어를 순차적으로 실행합니다. 

git config user.name "사용자 이름"
git config user.email "사용자 이메일주소"

4. 파일 추가 및 VS Code Commit 생성

이제 실제 새로운 파일을 작성해서 커밋 생성 작업을 수행해보겠습니다. ① New File 아이콘을 클릭하여 원격 저장소 복제 위치 폴더(지역 저장소) 내에 ② ‘README.md’ 파일을 생성하고, ③ 내용 입력창에 아무 내용이나 입력합니다. 그러면 좌측 소스 코드 버전 관리 아이콘에 숫자 1(⑤)이 표시됩니다. 이것은 새로운 변경 내역이 존재한다는 것을 자동으로 알려주는 겁니다.

참고로, 파일에 변경사항이 생겼는데 저장이 되지 않았을 경우 ④ 처럼 흰색점이 표시가 됩니다. Ctrl + S를 눌러 변경사항을 저장하면 그 표시가 사라집니다.

① 소스 코드 버전 관리 아이콘을 클릭하고 ② ‘+’ 를 클릭하면 README.md 파일이 ③ Staged 상태가 됩니다. ④ 커밋 메시지를 입력하고 ⑤ ‘Commit’ 버튼을 클릭합니다. 입력한 커밋 메시지는 추후 이 단계에서 무슨 작업을 했는지 알기 위한 기록용 텍스트로 이해하시면 됩니다.

5. 원격 저장소 커밋 등록

지금까지의 작업은 지역 저장소(내 컴퓨터)에서의 버전 관리를 위한 프로세스를 진행한 겁니다. 이제 이런 작업을 세트로 원격 저장소로 넘기는 작업을 해보겠습니다. 이전 단계의 화면에서 ① 3점 메뉴(Views and More Actions…)를 클릭하고 ② Push 를 클릭하여 원격 저장소(깃허브)로 README.md 파일을 업로드 합니다.

깃허브로 가서 저장소에 접속해보면 아래와 같이 ① 파일(README.md)이 업로드 된 것을 확인할 수 있습니다. 그리고 ② 커밋 메시지(init)도 확인되고 업로드한 파일의 ③ 세부내용도 확인이 됩니다.

정리하기

이번 포스트에서는 깃허브와 VS Code를 연동하는 방법에 대해서 알아보았습니다. 우선, 깃허브에서 원격 저장소를 생성하고 그 곳에 지역 저장소로 복제 했습니다. 나중에 버전 관리 확인을 위한 툴로 사용하기 위해 깃 사용자 정보를 등록 후 파일을 추가하고 Commit을 실행했습니다. 마지막으로 내 컴퓨터에서 완료한 작업 일체를 원격 저장소로 옮기는 프로세스를 통해 로컬에서 깃허브 서버로 업로드를 마쳤습니다.

깃과 깃허브의 세계는 또 다른 심오함이 있는데 이 부분은 추후 다루도록 하겠습니다.

오늘도 어렵게 보이지만 실상 몇번 해보면 별거 없는 깃허브-VS Code 연동하기를 알아보았습니다. 참고로 GitHub RStudio 연동하기 포스트를 통해 또 다른 깃허브와의 연동하는 방법을 익히실 수도 있습니다.

제 2의 인생 만들기 도우미, Life2.0: IT Playground에 테리였습니다.

‘secondlife.lol’의 모든 콘텐츠는 저작권법의 보호를 받습니다. 무단 전재와 복사, 배포 등을 금합니다.