[KT AIVLE 3기] Github vscode와 연동하기

 

STEP 1. Github 가입하기

예전에 만들어놓은 Github 아이디가 존재해서, 따로 추가 가입 없이 원래 아이디로 진행하겠다. 가입은 아래 사이트에서 하면 된다.

https://github.com/

 

 

STEP 2. Repository 생성

 

Github 로그인을 하면 우측 상단에 + 버튼이 있고, 이를 클릭하면 New repository가 있다.

클릭 후 새 Repository를 생성해준다.

 

Repository name에 생성할 레포의 이름을 적어주고, Public과 Private 중 선택을 한 후 맨 밑의 Create repository를 클릭하면 레포지토리가 생성된다.

 

이 때 Public은 모든 사람이 볼 수 있는, Private는 개인 또는 공유한 사람만 볼 수 있는 레포지토리를 의미한다.

나는 블로그 작성을 위해 Public으로 생성했다.

 

 

STEP 3. File 작성 및 Commit

 

 

gerbon이라는 이름의 레포지토리가 생겼다. 이제 파일을 생성해보자.

하늘색 배경 아래쪽의 [Creating a new file]을 클릭해준다.

 

 

gerbon / Name your file... 이라는 빈 칸이 생기는데, 여기에 파일이름.확장자로 입력해주면 된다.

텍스트 파일을 생성하고 싶으면 test.txt

파이썬 파일을 생성하고 싶으면 test.py 이런 식이다.

 

 

간단하게 아무 내용이나 적고, commit new file 을 클릭하면 파일 작성 및 커밋까지 완료할 수 있다.

 

 

첫 번째 test 파일이 만들어졌다. 우측 중앙쪽의 보면 1 commit이란 숫자를 잘 기억해두도록 하자.

 

 

STEP 4. File 수정 및 버전 확인

 

test.txt 클릭 시 나오는 화면이다. 우측의 연필 모양을 클릭하게 되면 파일을 수정할 수 있다.

 

 

간단히 한 문장을 추가로 입력한 후 Commit changes를 눌러주면 수정이 완료된다.

 

 

이후 우측 History를 누르면 그동안의 히스토리를 확인해볼 수 있다.

 

 

히스토리 확인창에서 7자의 암호같은 버튼을 클릭하면 버전 간의 차이를 비교해서 볼 수 있고,

< > 버튼을 클릭하면 그 버전 시점의 파일 = 스냅샷(Snapshot)을 확인할 수 있다.

 

 

STEP 5. SSH key 생성 및 등록(VScode 설치 및 최적화 전제)

 

먼저 터미널을 GIT Bash로 열어준 후, 

$ ssh-keygen 명령어를 이용하면 공개키를 생성할 수 있다.

 

$ ls -al /c/Users/User/.ssh/ 로 id_rsa 와 id_rsa.pub가 잘 생성되었는지 확인한다.

ls는 해당 위치에 존재하는 파일 리스트들을 보여주고, -al은 권한 등 정보를 모두 보여주는 명령어다.

 

id_rsa & id_rsa.pub이 잘 생성되었음을 확인할 수 있다.

 

$ cat /c/Users/User/.ssh/id_rsa.pub

cat은 파일을 읽어주는 명령어다. cat으로 id_rsa.pub = 공개키를 확인한다.

 

ssh-rsa부터 끝까지 복사해두면 된다.

https://github.com/settings/keys

GitHub: Let’s build from here

해당 사이트로 이동하여 New SSH key 클릭 -> Key에 복사해둔 key를 입력해주고 Add SSH Key를 클릭하면 완료된다.

 

이런 식으로 등록이 되면 완료! 이제 Git을 이용해보자.

위에서 작성했던 파일에 들어가 < > Code 버튼을 클릭하면 주소를 확인할 수 있다.

SSH를 사용했으므로 SSH 주소를 복사하면 된다.

 

복사 후 VScode로 이동한다. Ctrl + Shift + G (소스 제어) -> 리포지토리 복제 클릭 -> 상단에 URL 입력

폴더 선택 후 엔터를 치면 완료다.

 

여기까지 아무런 문제가 없었다면 참 좋겠지만, 나는 계속 아래와 같은 메시지가 뜨고 무한로딩되는 문제가 생겼다.

위와 같은 문제가 계속 발생했다. ㅠㅠ...

 

그래서 그냥 계정 연동 시켜버렸다. 여전히 저 방식대로는 안된다.

 

2023-02-02 기준 원격으로 해결했다... 폴더 선택을 리포지토리 이름이랑 동일하게 해야 하나? -> 이러니까 되긴 함

 

$ git config --global user.name "깃허브닉네임"

$ git config --global user.email "이메일"

위 두 명령어로 계정 등록을 해줄 수 있다.

 

 

STEP 6. VScode에서 파일 커밋해보기

 

 

이제 VScode 상에서 파일을 다뤄보자.

 

 파일 수정

 

이렇게 이전 파일과 현재 파일의 차이를 확인할 수 있다.

+ 버튼에 마우스를 가까이 가져다대면 변경 내용 스테이징이라는 설명이 보인다.

 

스테이징(Staging): 나는 '무대에 올린다' 라는 의미로 해석했다. 스테이징을 아무것도 하지 않으면 커밋이 불가능하다.

만약 스테이징을 하지 않고 파일을 수정 후 커밋을 클릭하면

스테이지된 변경 사항이 없다. -> 모든 변경 사항을 스테이징하고 커밋할래? 라는 메시지가 뜨게 된다.

 

커밋을 해주면 이제 로컬 저장소(나의 컴퓨터)에 변경된 파일이 저장된다.

그렇다면 원격 저장소(깃허브 온라인)에는 어떻게 반영해줄까?

바로 PUSH(동기화) 기능으로 하면 된다.

 

변경 내용 동기화 = 푸시

 

푸시(변경 내용 동기화)를 해주었다면 자신의 깃허브 사이트에도 반영이 된 것을 확인할 수 있다.

어? 그럼 변경 사항이 여러개라면, 스테이징을 따로 해서 버전을 하나씩 저장할 수도 있겠네?

맞다. 

v1과 v1_2를 생성해보겠다.

 

 

변경 사항에 두 가지가 뜨지만, 이번에는 version1만 스테이징 해서 푸시까지 해보겠다.

 

스테이징된 변경 사항 커밋을 눌러주고 푸시해준다.

스테이징된 파일만 동기화(푸시)된 것을 확인할 수 있다!

 

 

 Fetch(페치) & Merge(머지) : Pull

 

 

혼자만 작업하면 편하겠지만, 개발 업무 특성상 분명 동시 작업이 필요할 때가 있을 것이다.

동시에 한 파일에 작업을 하게 되면 어떤 일이 일어날까?

 

VScode를 두개 켜서 동일한 파일을 동시에 수정해봤다.

 

창을 두개 켜서 동일한 파일을 따로 수정했다.

먼저 B를 커밋 & 푸시 후 A를 커밋하고 푸시(동기화)하게 되면,

 

 

병합 충돌이 있다는 메시지가 뜬다!

 

 

이런 식으로 병합(merge) 후 푸시해주면 문제 해결이다.

 

Git Graph 상에서 Merge into current branch 로 병합도 가능하다!

 

Fetch는 업데이트된 원격 저장소의 내용을 불러오는 역할을 한다.

 

내용을 간단히 정리하면

 

Staging: 반영할 변경 사항 올리기

Commit: 로컬 저장소(내 노트북)에서 변경 사항 저장

Push: 원격 저장소와 동기화 

Fetch: 원격 저장소(Github) 내용 불러오기

Merge: 병합하기

Pull: Fetch + Merge 

 

 

추가적으로 더 공부해야 마스터할 수 있겠지만, 일단은 이 정도만 알아도 깃허브 사용은 해볼 수 있을 것 같다. 앞으로의 교육과정들이 아주 기대된다.