Ch 21. VS Code랑 깃허브 연동하기

저장소 만들기

 

1. 먼저 'proj_git'이라는 새로운 폴더를 만든 후 VS Code를 실행하여 [File] → [Open Folder]를 클릭합니다. 그리고 [proj_git]을 선택합니다. [proj_git] 폴더가 작업 폴더로 추가되었다면 왼쪽 탐색기 창에 [proj_git]이라는 폴더 이름이 나타날 것입니다. 

 

저장소 초기화하기

 

1. VS Code 사이드바에서 위에서 세번째 아이콘을 클릭하면 레포지토리를 초기화하라고 화면에 나옵니다. [Initalize Repository]를 클릭합니다. 

 

 

깃 설정하기

 

1. 화면이 바뀌는데, 여기에서 [Terminal] → [New Terminal]을 클릭합니다. 

 

 

2. 터미널 창에 아래와 같이 입력합니다. 

 

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

 

 

버전 만들기

 

파일 만들기

 

1. 다시 사이드바에서 탐색기 창 (맨 위에서 첫번째)으로 돌아옵니다. 'New File'을 클릭합니다. 파일 이름은 'work.txt'라고 입력하고 Enter를 누릅니다. 

 

 

2. work.txt 파일이 만들어지면서 work.txt 파일을 편집할 수 있도록 창이 열립니다. 간단히 'Hello World!'라고 입력하고, Ctrl+S를 눌러 저장합니다. 그러면 아래와 같이 사이드바에  1이라는 숫자가 표시됩니다. 파일 1개에 수정 사항이 있다는 의미입니다. 

 

 

스테이징하기

 

1. 사이드바에서 소스 제어 아이콘을 클릭합니다. [Changes]에 work.txt 파일이 나타나있습니다. 

 

 

2. 여기에서 '+' 아이콘을 클릭합니다. '+' 아이콘은 현재 파일을 스테이지에 올리는 것을 나타냅니다. 

 

3. [Changes]에 있던 파일이 [Staged Changes]로 옮겨졌습니다. 스테이징된 파일 오른쪽에 'A'라고 표시되어있는데, 이는 인덱스가 추가되었다는 의미입니다. 

 

 

커밋하기

 

1. 스테이징했으면 커밋을 할 수 있습니다. 커밋 메시지를 입력한 후 [Commit]을 클릭합니다. 

 

 

2. 커밋을 마치면 소스 제어 아이콘에 있던 숫자가 없어집니다. 

 

 

한번에 여러 파일 스테이징 및 커밋하기

 

1. 이번에는 파일 두 개를 한번에 스테이징하고 커밋해보겠습니다. 'work2.txt'라고 파일 이름을 입력하고, 아무 내용이나 내용을 입력합니다. 'work3.txt' 파일도 새로 만들어주고, 아무 내용이나 작성합니다. 

 

 

 

2. 사이드바에서 소스 제어 아이콘을 클릭합니다. [Changes]에 파일 2개가 있습니다. '+'를 클릭하여 파일 2개를 스테이지에 각각 올립니다. 

 

 

3. 두 파일이 모두 [Staged Changes]에 들어가 있으면 커밋 메시지를 입력하고, [Commit]을 클릭합니다. 

 

 

한번에 스테이징과 커밋하기

한 번이라도 커밋을 한 파일이라면 스테이징과 커밋을 한 번에 처리할 수 있습니다. 

 

1. work.txt 파일을 열어, 추가로 'Ice'를 입력하고 저장합니다. 

 

 

2. 변경 사항이 있으므로 소스 제어 아이콘에 1이 표시됩니다. 소스제어 창으로 이동하면, work.txt 파일 오른쪽에 M이라고 표시되어 있습니다. M은 수정되었다는 의미입니다. M이라고 표시된 변경 사항은 스테이징을 따로 해주지 않아도 커밋 메시지를 입력하고 [Commit]을 클릭하면 스테이징과 커밋이 바로 진행됩니다. 

 

 

3. 이때 스테이징 없이 커밋할 것인지 묻는 창이 새로 뜨는데, [Yes]라고 클릭합니다.  

 

 

터미널 창에서 깃 로그 입력하기

 

[Terminal] → [New Terminal]을 클릭하여 터미널 창에 'git log'라고 입력하면 커밋들이 나타납니다. (HEAD -> main)이라고 되어있는 부분이 가장 최신 커밋입니다. 

 

 


깃허브 연동하기

 

깃허브 원격 저장소와 연동하기

 

1. 깃허브에서 원하는 저장소 주소를 HTTPS로 복사해옵니다. VS Code로 이동해서 소스 제어 창을 엽니다. ••• 아이콘을 클릭해 [Remote] → [Add Remote]를 클릭합니다.

 

 

2. 화면 위쪽 입력 창에 아까 복사한 원격 저장소 주소를 입력하고 Enter를 누릅니다. 원격 저장소 이름을 입력하고 다시 Enter를 누릅니다. 

 

 

 

원격 저장소로 푸시하기

 

1. 소스 제어 창을 열고 ••• 아이콘을 클릭해서 [Pull, Push] → [Push to...]를 클릭합니다. 

 

 

2. 아래와 같이 아까 직접 입력한 원격 저장소가 화면 위쪽에 나타납니다. 원하는 저장소를 클릭하면 지역 저장소에 있던 파일들이 깃허브로 바로 푸시됩니다. 

 

 

3. 깃허브 저장소로 접속하면 방금 푸시한 파일들이 올라와있는 것을 볼 수 있습니다. 

 

 


브랜치 관리하기

 

새로운 브랜치 만들기 

 

1. 소스 제어 창에서 ••• 아이콘을 클릭해서 [Branch] → [Create Branch]를 선택합니다. 새로운 브랜치 이름을 입력합니다. 저는 ' newBranch'라고 하겠습니다. 

 

 

 

2. newBranch 브랜치가 만들어지면서 해당 브랜치로 전환됩니다. VS Code의 상태 표시줄을 보면 처음에 main이었던 브랜치가 newBranch로 바뀐 것을 알 수 있습니다. 

 

 

새로운 브랜치에서 커밋하기

 

1. 사이드 바에서 탐색기 창으로 이동한 후에, 현재 브랜치에 work4.txt 파일을 만들고 'fourth'를 입력합니다. 

 

 

2. work4.txt 파일을 커밋하겠습니다. 사이드바에서 소스 제어 창으로 이동합니다. '+'를 클릭해서 스테이징합니다. 

 

 

3. 커밋 메시지를 입력한 후 [Commit]을 클릭하여 커밋합니다. 

 

 

다른 브랜치로 전환하기

 

1. VS Code 가장 왼쪽 하단에 브랜치 이름이 나타나는데, 이 부분을 클릭하면 브랜치 이름이 나타납니다. 그 중에서 main 브랜치를 선택합니다. 

 

 

2. 왼쪽 하단을 보면 main으로 바뀐 것을 확인할 수 있습니다. 그리고, newBranch에서 작업했던 work4.txt는 main 브랜치에서 볼 수 없습니다. work4.txt는 newBranch에서 만들어서 커밋한 파일이기 때문입니다. 

 

 

 

새로운 브랜치를 원격 저장소로 푸시하기

 

1. 소스 제어 창에서 ••• 아이콘을 클릭해서 [Pull, Push] → [Push to]를 선택합니다. 그리고 푸시할 원격 저장소를 선택합니다. 

 

2. 깃허브에서 원격 저장소를 살펴보면 main 부분을 클릭하여 newBranch를 클릭합니다. 

 

 

3. 제대로 푸시된 것을 확인할 수 있습니다.

 

 

 

브랜치 병합하기

 

1. main 브랜치로 전환을 한 후, 소스 제어 창에서 ••• 아이콘을 클릭해서 [Branch] → [Merge Branch]를 선택합니다. 

 

 

2. 병합할 브랜치를 선택합니다. 

 

 

3. newBranch가 main 브랜치로 병합되면서, newBranch에서 만들었던 work4.txt를 main 브랜치에서도 볼 수 있습니다. 

 

 

 

 

 

이 글은 Do it! 지옥에서 온 문서 관리자 깃&깃허브 입문 책을 보며 공부하여 작성한 글입니다.