Git : VS code에서 Git / Github 사용해보기

stack overflow와 GitHub는 코딩을 하다보면 정말 많이 가보게되는 사이트입니다.

문제가 잘 해결 안될때 구글링해보면 대다수 이 두 사이트에서 답을 찾게 되는 경우가 많습니다.

 

stack overflow에서는 문제가 발생했을 때 솔루션을 많이 참조하게되고,

GitHub에서는 예제 코드들을 많이 다운로드 받아볼 수 있습니다.

 

GitHub는 Git(깃) 이라는 Version Control System을 기반으로한 코드 공유 기능을 제공합니다.

작업 중인 Programming Project들도 GitHub에 올려서,

  ① 개인 보관용으로 사용하거나,

  ② 타인에게 공유하거나, 공동 작업을 하는 경우에도 사용 가능합니다.

 

VS code에서는 Git을 사용한 버젼 콘트롤을 기본 지원합니다.

추가로, GitHub와 연동해서 내가 작업 중인 코드를 GitHub에 올리거나,

GitHub에 공유된 코드를 로컬PC에 다운받아서 편집/실행해볼 수 있습니다.

이번 포스트에서는 Git에 대해 간단히 알아보고, 설치 후 사용해보려고합니다.

 

본격적으로 Git을 사용해보기에 앞서서 Git에 대해 조금 이해하고 가겠습니다.

 

Git

• Git은 Local Computer 안에서 VCS(Version Control System)의 용도만으로도 사용할 수 있습니다.

초창기 처음 프로그래밍을 하던 당시, 완성된 프로젝트를 업그레이드할 경우,

매번 기존 작업을 별도로 백업(다른 곳에 저장)해 두곤 했습니다.

그나마도 깜빡하는 경우에는, 정말 끔찍한 상황이 발생하는 경우도 많았습니다.

 

Git을 사용하게되면, 언제든 필요한 시점으로 되돌려보낼 수 있으므로 백업 등의 작업이 불필요해집니다.

추가로 언제 무엇을 수정했는지도 쉽게 확인 가능해집니다.

 

• GitHub와 같은 Remote 저장소를 같이 활요하게되면, 공동 작업 및 코드 공유가 가능해집니다.

별도로 다른 사람들과의 공동 작업이 없으니, Remote 저장소까지는 필요없겠지라고 생각할 수도 있겠습니다만,

개인 작업만 하는 경우에도, PC를 옮기거나, 여러 대의 PC에서 작업하는 경우 등, 활용도는 다양합니다.

 

• 먼저, 작업 위치에 따른 Git의 flow를 살펴 보겠습니다.

간단히 아래와 같이 표현해봤습니다.

① Working Directory : 현재 PC에서 작업 중인 Project Folder 입니다.

② Staging Area : 여기는 임시 작업장입니다. 수정이 발생한 파일들을 add하여 Staging Area에 두고, 작업이 끝나면 commit을 통해 정식 저장소(Local Repository)에 넣어주게 됩니다.

③ .git directory(Local Repository) : git을 init해주면 Working directory 아래에 [Working directory]\.git 이라는 폴더가 생기고 해당 폴더가 Local Repository가 됩니다. 변경되는 이력들 중 commit된 내용들은 모두 해당 폴더에 저장되게 됩니다.

④ GitHub(Remote Repository) : Local Repository에 보관된 내용은 GitHub에 push해서 저장할 수 있습니다.

 

Remote Repository까지 보관이 완료된 내용들은 다른 작업자 또는 다른 PC에서 언제든지 접근해서 pull, clone을 통해 소스를 받고 작업이 가능해집니다. 처음 보면 복잡할 수 있습니다만, 몇 번 작업해보다보면 쉽게 기억할 수 있습니다.

• 다음은 branch 작업에 따른 flow입니다.

아래 그림을 보면 최초 만들어진 master branch가 있습니다.

예를 들어 처음 ver0.0의 소스코드 작업이 완료되었다고 생각해보죠.

위 작업위치에 따른 flow에서, Remote Repository까지 작업을 끝냈다고 가정하면,

commit/push된 첫번째 소스코드가 master branch가 됩니다.

 

자, 시간이 지났는데, 갑자기 새로운 기능(Feature1)을 추가해야겠다는 생각이 났네요.

이런 경우 feature1 이라는 branch를 하나 생성하고, master branch가 아닌 feature1 branch에서 작업을 진행하는겁니다.

 

최종적으로 master에 merge를 하기 전까지는 master branch는 그대로 유지되므로, 혹시라도 다른 작업자가 GibHub에서 다운로드해서 Feature2를 작업한다고해도 원 master branch의 코드를 가져와서 작업 가능해집니다. 또 다른 작업자가 Feature3 작업을 위해 feature3 branch를 생성하게되면, Feature1까지 반영이 완료된 master branch를 가져가서 작업하게 되는거죠. 

 

자! 이제 실제 VS code에서 Git을 써 보겠습니다.

먼저 VS code를 실행하고, Primary Side Bar에서 SOURCE CONTROL 아이콘을 클릭합니다.

현재는 Git이 PC에 설치되어있지않은 상태로, Git을 다운로드 하라는 가이드가 보이네요.

파란색 버튼을 클릭해서 설치를 시작합니다.

경고 메세지가 뜹니다만, 그냥 Open하시면 됩니다.

저는 64-bit Windows를 사용 중이므로, 64-bit Git for Windows Setup 을 클릭해서

64-bit 버젼을 다운로드하고 실행해줍니다.

다운로드 받은 Git PC 버젼 설치를 시작합니다.

설치 옵션에서 저는 Windows Explorer integration을 제외했습니다.

윈도우즈 탐색기에 Git 옵션을 보여주는 옵션인데, 굳이 사용할 일이 없어서요. 필요하신 분은 선택하시면됩니다.

아래와 같이 다음에 나오는 시작메뉴 등록도 선택 해제했습니다.

Git는 대부분 command 창에서 사용하게되서 굳이 시작메뉴 등록도 불필요해보여서요. 마찬가지로 필요하신 분들은! 선택하시면됩니다.

default Editor 선택 화면입니다. 저는 Visual Studio Code를 선택해주었습니다.

다음은 개행문자 처리방식에 대한 선택입니다.

일반적으로 "Enter"키로 입력하는 개행문자는 Windows와 Linux/Mac에서 차이가 있습니다.

사실 예전의 타자기 동작 방식에서 온 것을 Windows는 DOS시절부터 Full로 다 사용했고,

Unix 기반의 OS들은 축약해서 사용한다고 하더군요.

• Windows : CR+LF (\r\n)
• Unix / Linux / Mac : LF (\n)

참고로... CR과 LF는 아래와 같은 의미입니다. 어린 시절에 타자기를 만져봤던 기억이 새록새록하네요.

• CR (Carriage Return) : 타자기를 보면 자판을 누를 때 먹지위를 활자가 붙은 해머가 때려서 글자를 입력하는데, 이 때 글자를 오른쪽으로 써나가기 위해 종이가 물려있는 Carriage가 좌측으로 이동하게됩니다. 해당 Carriage를 다시 우측끝으로 보내서 첫줄부터 입력하게 만드는 걸 Carriage Return이라고합니다.
• LF (Line Feed) : 롤러에 말려있는 종이를 라인 한 줄 만큼 말아서 다음 행으로 넘기는 걸 Line Feed라고합니다.

암튼, 저는 Checkout(로컬 PC에 다운로드)할 때는 Windows 스타일로 자동으로 변환해주고,

Commit(저장소에 업로드)할 때는 Unix 스타일로 자동으로 변환해주도록 선택했습니다.

설치가 완료되었습니다.

 

VS code로 돌아가보서 SOURCE CONTROL을 reload 해줍니다. (아래 노란 박스 안에 있는 reload 클릭)

2개의 버튼이 보입니다.

• Initialize Repository : 앞서 설명한 Local Repository를 생성하는 버튼입니다.
• Publish to GitHub : 마찬가지로 앞서 나온 Remote Repository를 생성하는 버튼입니다.

마지막으로 사용자 이름과 e-mail 주소 등록을 해줘야합니다. 안해주면 나중에 경고창이 뜨게 되니 지금 해줍시다.

 

① 먼저 VS code를 한 번 종료했다가 재실행해줍니다. 아래 명령어를 그냥 실행하면 Error가 발생하게됩니다.

 

② Editor창에서 Ctrl+` 를 입력하고, 터미널에 아래 명령어를 입력합니다.

이탤릭체 부분에 본인의 정보를 입력해 주면 됩니다.

 

git config --global user.name "John Doe"
git config --global user.email "johndoe@example.com"

 

Initialize Repository

우선은 Local repository를 만들어서 현재 작업 중인 Project 하나를 commit해보겠습니다.

위쪽 캡쳐화면에서 Initialize Repository 버튼을 클릭하면, 아래와 같은 화면이 됩니다.

 

Commit

노란 박스 표시 부분에 commit할 버젼에 대한 설명을 적고난 후,

Ctrl + Enter 또는 Commit 버튼을 눌러주면 Commit이 완료됩니다. (설명을 적지않으면 Commit이 되지않습니다.)

현재 열려있는 파일을을 전부 저장하고 Commit할지, 아니면 기존에 최종 저장된 상태(Stage에 올라가있는 상태 == 기존에 최종 저장한 상태)로 Commit할지를 물어봅니다. 저는 현재까지 작업을 모두 저장하고 올리는 걸로 선택했습니다.

Commit이 완료되었습니다!

 

자! 이제 수정 사항이 발생한 경우를 한 번 보여 드리겠습니다.

main.dart 파일에 print 문을 하나 추가하고, Ctrl + S를 입력하여 파일을 저장하면 아래와 같이 main.dart가 변경되었다는 표시가 보입니다. 이제 다시 Message 입력 칸에 설명을 적고 Ctrl + Enter를 입력하면 변경이 Local Repository에 저장되는 식입니다.

Commit 해보기 전에, 위에 노란 박스 표시된 부분 중 main.dart 파일명을 클릭해봅니다.

아래와 같이 좌측이 기존, 우측이 변경 후로 두 개의 파일을 비교해줍니다. 지금이야 간단한 변경이지만서도..

나중되면 정말 뭘 변경했는지도 모르는 경우가 발생할 때가 있고, 그런 경우 정말 편리하게 쓸 수 있게됩니다.

 

Discard changes

항상 수정한 내용이 맘에 들지는 않을겁니다. 원래대로 되돌리고 싶을때도 있겠죠.

방금 수정한 내용을 취소하고, 원래의 코드로 복구하겠습니다. 아래 표시된 Discard changes 버튼을 클릭하면 바로 복구 가능합니다. 아래 보시면 진짜 복구하느냐고 묻는데, Discard changes 해주시면 됩니다.

 

Branch

앞서 branch에 대해서도 설명을 했었는데요. 사용해보겠습니다.

두 가지 방법이 있습니다.

 

먼저 아래와 같이 클릭해서 들어가는 방법이 있고,

아니면, Ctrl+Shift+P 단축키로 명령 입력창을 엽니다. branch를 입력하면 관련된 명령어들이 나오니 선택하시면 됩니다.

입력창에 branch 이름을 입력하고 엔터를 치면 새로운 branch가 생성됩니다.

저는 feature1으로 해봤습니다. 자 이제 2군데에 현재의 branch가 표시됩니다.

Side panel의 Message 입력창과, VS code의 좌하단부에 branch명 표시부입니다.

실제 branch에 수정을 하고 master branch에 반영하는 작업을 해봐야겠죠.

우선은 main.dart에 아까와 마찬가지로 print문을 하나 넣어서 수정해봅니다.

수정 후에는 Message에 feature1 0.0이라고 적고 commit하겠습니다.

완료되면 좌측 Side panel에 표시되었던 Changes 부분이 사라지게됩니다.

 

자 이제, master branch로 가서 작업을 합니다.

VS code 좌하단부의 branch 표시부를 클릭하면 선택 창이 위쪽에 뜨니,

master를 선택해서 작업 branch를 master로 변경해줍니다.

master branch로 변경되면, 아래와 같이 feature1 branch에서 추가했던 print문이 사라진걸 확인하실 수 있습니다.

아래와 같이 메뉴을 통해, 또는 Ctrl+Shift+P 에서 merge branch를 검색해서 Merge Branch...를 실행해줍니다.

이후 입력창에서 feature1을 선택해주면 feature1의 변경사항을 master에 적용하게됩니다. 완료되면 main.dart에 feature1 branch에서 수정한 print문이 추가된 것을 확인하실 수 있습니다.

기본적인 설명은 다 된것 같습니다.

추가로 GitHub와의 연동은 별도 포스트에서 다루려고합니다.

 

마지막 참고로!

git을 통해 수정된 내용이나, 로컬에서 저장했던 이력들은 VS code의 EXPLORER탭 중 TIMELINE에서 확인이 가능합니다.

위 캡쳐화면에서 TIMELINE 부분을 클릭하면 아래와 같이 기존의 이력들이 뜨고 각 아이템을 클릭해보시면 변경 내용을 확인할 수 있습니다. 도움이 되시면 좋겠네요.

 

로컬에서의 Version 관리는 로컬 컴퓨터에 Git 설치로 충분합니다만,

PC간에 이동하면서 사용을 원하거나, 여러 사람이 함께 작업을 하려면 별도의 Git Server가 필요합니다.

 

집에서 사용하는 NAS에 Git Server를 설치해서 사용해본 적도 있습니다만,

GitHub는 무료로 Git Server 기능을 제공합니다.

 

VS code와 GitHub를 연동해서 사용해보겠습니다.

 

먼저 GitHub에 가입하겠습니다.

https://github.com으로 가서 우측 상단의 Sign up 버튼을 클릭해줍니다.

이메일 주소/Pasword/User명을 입력하고, 광고 수신 여부를 체크한 후 간단한 퍼즐을 풀면,

등록한 이메일로 보안코드를 보내줍니다. 이메일을 확인해서 보안 코드를 풀어주고나면 간단한 개인 정보를 묻습니다.

마지막으로 Free version을 쓸 것인지, 요금제 가입을 할 지 물어보는데, Free로도 개인적인 코딩에는 충분합니다.

 

이제 VS code와 GitHub를 연동시켜주겠습니다.

VS code 상에서, 이전 포스팅에서 진행한 것과 같이 로컬 저장소에 Commit이 완료된 프로젝트를 열어보겠습니다.

좌측 사이드 패널에서 Source Control icon을 클릭해주고, Publish Branch 버튼을 클릭합니다.

GitHub에 Sign in 하겠다는 메세지가 뜨는데 Allow 해줍니다.

자동으로 GitHub Authorizatin 페이지로 이동하게됩니다. Authorize Visual-Studio-Code 버튼을 클릭해줍니다.

팝업창이 뜨면 "항상 vscode.dev에서 연결된 앱에 있는 이 유형의 링크를 열도록 허용" 을 체크하고, 열기 버튼을 클릭해줍니다.

VS code로 복귀해서 팝업창이 뜨게됩니다. "Don't ask again for this extension"을 체크해주고, Open합니다.

자동으로 현재 project명으로 GitHub Repository(저장소) 위치가 입력됩니다. 변경하고 싶으면 변경 후에,

아래쪽 Publish to GitHub private repository 를 클릭해주면, GitHub로 업로드를 시작합니다.

(저의 경우는 1차 시도에 VS code가 멈춰버려서, VS code를 재실행 후에 실행했고, 문제없이 올라갔습니다.)

도중에 Device authentication 방식을 문의하는데, 매번 브라우저로 authentication을 할지, 아니면 device code를 등록할지 물어봅니다. 혹시 백그라운드에 해당 팝업창이 떠서 기다리고 있을수도 있으니 아무런 반응이 없으면, VS code를 잠깐 백그라운드로 내려보세요. 저는 해당 창에서 code로 등록하는 방식을 택했습니다. 화면에 보이는 code를 기억하고, 그 아래 표시된 링크로 이동합니다. 새로 열린 웹페이지에서 해당 코드를 입력하고, Authorize GitCredentialManager를 클릭해주면 됩니다.

 

2종의 팝업이 뜨는데요. 

Open on GitHub를 클릭하면 브라우저 상에서 저장소의 내용을 확인할 수 있습니다.

한 번 들어가서 확인해보시죠~

 

아래쪽은 주기적으로 서버에서 내용을 로컬 저장소로 가져올 것이냐는 질문인데, 저는 Yes를 선택했습니다. 다른 PC에서 작업하게 되면 자동으로 로컬 서버로 변경 내용을 가져와주므로, merge 작업만 해주면됩니다.

(Fetch, Merge 등의 용어는 이전 포스팅을 참조하세요.)

 

이제 해당 코드를 다른 컴퓨터에서 작업해보겠습니다.

지금까지 작업해온 PC가 아닌 다른 PC에서 작업을 시작합니다.

GitHub.com으로 이동해서, Sign in 해줍니다. Sign in 후 화면에서 좌상단을 보면 기존에 생성해둔 저장소 리스트가 보입니다. 해당 링크를 클릭해서 저장소로 들어갑니다.

가운데 부분에 보이는 Code를 클릭하고, copy 버튼을 클릭해서 주소를 복사해둡니다.

 

이제 VS code를 열고, Ctrl + Shift + P 를 입력해서 command창을 엽니다. git clone을 검색해보면 Git: Clone 커맨드가 보일겁니다. 클릭해줍니다.

아까 복사했던 GitHub 저장소 주소를 입력을 요구하는데, Ctrl+V로 아까 복사한 주소를 붙여넣기하고 Clone from URL을 클릭해주면됩니다.

이제 해당 Project를 어디에 저장할지 물어보는데, Project 명의 폴더를 자동으로 생성해주므로, 해당 Project가 들어갈 부모 폴더를 선택해주면됩니다. 지금의 경우는 2개의 PC에 같은 GitHub ID를 사용한 경우로, 2개의 PC에서 똑같이 GitHub 연결 세팅을 해주었다면 사용에 문제가 없을 겁니다.

 

자 이제 다른 사용자에게 해당 코드를 공유하려고하면 어떻게할까요?

우선 해당 GitHub Repository의 Settings → Collaborators → Add People을 차례로 클릭하고 추가하고자하는 사용자를 추가하면됩니다.

 

추가하고자하는 사용자의 email 주소를 입력하고, 사용자를 클릭한 후에 "Select a collaborator above" 를 클릭해줍니다.

추가한 이메일로 초대장이 발송되니, 메일함을 확인해서 초대장을 열면 아래 같이 GitHub로 연결됩니다.

Allow 해주시면 해당 저장소 접근 권한이 생깁니다. 앞으로 추가된 사용자도 해당 GitHub repository에서 코드를 가져오고 수정할 수 있습니다.

자 이제 어느 PC에서나, 또는 추가된 어느 사용자나 작업 후 sync(push)를 해주면 GitHub repository에 반영되고, 모두가 변경사항을 볼 수 있습니다.

 

GitHub를 통해 변경사항을 공유해봅시다.

우선은 한 PC에서 테스트를 위한 코드 변경을 하고, Ctrl + S로 저장을 한 후에, Commit 메세지를 작성하고, Commit 버튼으로 로컬 서버에 우선 반영합니다. (Commit 메세지가 없으면 Commit 되지않으니 주의!!)

이제 아래와 같이 GitHub repository에 push할 수 있게 sync changes 버튼이 뜨게됩니다.

클릭하여 GitHub repo에 반영해 줍니다.

이제 GitHub repo에 가서 코드를 확인해보면 아래와 같이 변경이 잘 반영되어있는 것을 볼 수 있습니다.

이제 다른 PC로 이동해보겠습니다.

해당 Project를 열고, Source control 패널을 열면, 아래와 같이 Sync changes 버튼이 활성화됩니다.

클릭해보니, 저장된 부분이 잘 반영되네요.

참고로 VS code에서 Publish하는 경우 기본 세팅이 Private으로 설정되어, 본인 또는 추가한 ID만 코드 View/Edit 권한이 생깁니다. 본인의 코드를 모두에게 공유하고자하시는 분들은 해당 GitHub repo의 Settings → Collaborators → Who has access의 Manage → Change repository visibility 를 통해 public으로 변경하시면 모든 GitHub 사용자에게 View 권한이 생기게됩니다. 참고하세요~

 

모두 좋은 하루 되시길바랍니다.