[macOS] 로컬 저장소를 GitHub 원격 저장소에 push하기 (feat. VSCode)

Scope

나도 git을 통해 협업은 해본적이 없고, 그저 업무 중 연구 소장님께 코드 리뷰를 부탁드릴 때 '링크'를 드리면 편리하기 때문에 사용하기 시작했었다.

그 외 대부분은 개인 프로젝트를 관리하는 정도로만 사용하였고, 아주 가~끔 GitHub에 private로 올릴 필요가 생길때가 있다.

이럴 때 "어, 지금 로컬 저장소를 원격 저장소에 push할 때 어떻게 세팅했었더라?" 하게 된다.

딱 이 시나리오에 맞는 범위만 다룰 것이다.

---

0. 준비물

1. git 설치 : 당연히 본인 컴퓨터에 git이 필수적으로 설치되어 있어야 한다. (설치법은 간단하기 때문에 알아서 구글링으로 설치)

2. IDE : 옵션 사항이다. 사실 터미널 창만 있어도 사용 가능한데, CLI가 익숙하지 않은 사람이 있을 수 있다. 이럴 때 도움이 되는게 VSCode다. 사실 이게 내 주력 IDE이기 때문에 다른걸 써보지 못했다.

3. git 관리 프로그램 : 이 또한 옵션 사항이다. CLI가 익숙하지 않은 사람은 IDE 또한 익숙하지 않을 수 있다(VSCode라면 더더욱). Source Tree, GitKraken, GitHub Desktop 등, git 인터페이스를 GUI로 만들어 준 응용 프로그램들이 많다.

나는 그냥 VSCode의 터미널 창을 활용해서 사용한다.

---

1. 기본 셋업

나는 위와 같이 smartballboy_src 폴더 전체를 git으로 관리하려고 한다.

매우 우스운 상황은 애초에 git을 사용하면 저렇게 많은 revision이 생겨나지 않았을텐데 다 내가 게을러서...

해당 폴더를 VSCode에서 열어준다.

그리고 [Ctrl] + [Shift] + [`] 단축키를 입력하여 터미널 창을 열어준다.

위와 같이 쉘이 열리고 현재 작업중인 폴더에 자동으로 이동한 것을 볼 수 있다.

이게 매우 편하기 때문에 OS의 기본 터미널이 아닌 VSCode로 작업하는 것이 더 편하다.

 

1.1 git init

좌측의 tree 창에서 볼 수 있듯이 내가 관리하고자 하는 폴더에는 .vscode 폴더가 하나 존재한다.

이 폴더는 아두이노를 VSCode로 작업하기 위한 환경 설정이 담긴 폴더다.

마찬가지로 해당 폴더를 git으로 관리하려면 .git 폴더가 필요하다.

아래와 같이 입력하여 git을 시작한다.

git init

(원래는 저 문구가 영어로 떠야 하는데(Linux에서는 그랬다) 한국어로 나오니 좀 반갑기도 하고 무섭기도 하다.)

달라진 것들이 몇 가지 있다.

 

1. 터미널의 현재 위치를 나타내는 주소 끝에 master가 생겼다.

새롭게 git을 시작했으므로 노란색으로 디폴트 master 브랜치가 생긴 것이다.

 

2. 좌측 tree의 모든 폴더와 파일이 초록색으로 변했다.

그리고 추가로 U 라는 글씨가 생긴것을 볼 수 있다.

이 U는 VSCode에서 git을 사용할 때 지원해주는 기능인데, Untracked라는 뜻이다.

이 untracked는 밑에서 다시 살펴볼 수 있다.

정리하자면, 이제 git은 이 폴더 내에서 존재하는 모든 변화하는 모든 사항들을 기록할 것이다.

 

3. VSCode의 제일 좌측 Activity Bar에 Source Control 패널에 9라는 숫자가 생겨났다.

이 또한 VSCode가 지원하는 기능 중 하나라로, 이제 해당 폴더를 git이 지켜보고 있으니 지원하기 시작했다고 생각하면 된다.

정리하자면 "이제 해당 폴더는 git께서 굽어다보고 계신다"라고 생각하면 된다.

폴더내의 모든 폴더, 파일, 내용까지의 변화를 감시한다.

 

1.2 git config

아래 명령어를 입력해서 본인이 사용하고자 하는 GitHub의 username과 email을 입력한다.

    git config --global user.name "본인계정이름"
    git config --global user.email "본인이메일주소"

나는 이미 해당 맥북에 입력한 상태이므로 아래와 같이 제대로 입력 되었는지 확인만 했다.

 

1.3 git status

git status

위 명령어를 입력해본다.

현재 브랜치 master : 아~ 지금 내가 master 브랜치를 보고 있구나~

아직 커밋이 없습니다 : 아~ 아직 내가 커밋한 적이 없구나~

추적하지 않는 파일 : 아~ 아래 것들이 내가 커밋할 녀석들이구나~

 

이 내용들이 원래는 영어로 나와야 하는데 한국어로 나오니까 좀 낮설다.

정리하자면, git이 폴더를 감시하는것은 맞지만, 어떤 것을 감시할 것인지 우리가 추가해줘야 한다.

따라서 위에 터미널에서 빨간 색으로 표시된 .vscode/와 v0/ 폴더를 추가하라는 뜻이다.

대충

git : "내가 이 폴더를 감시중인데, 아래의 파일들이 새로 만들어진 듯 하니, 내 감시 목록에 올려라"

라는 뜻으로 이 감시 목록에 올리는 행위를 'add'라 한다.

 

1.4 git add

git add -A

위 명령어를 입력하면 현재 감시중이지 않은(untracked) 파일 및 폴더를 모두 감시 목록에 추가하겠다는 의미다.

1. master 브랜치 옆에 +가 생겼다.

말 그대로 untracked 되던 파일들을 add(+) 했으니 사용자에게 add한 사항이 있다는 걸 알려주기 위한 것이다.

정확히는 "add된 항목들이 있으니 commit해라"라는 뜻이다.

 

2. 좌측 tree에 U(untracked)가 A(added)로 바뀌었다.

다시 git status를 입력해보면 상태가 바뀐 것을 알 수 있다.

 

1.5 git commit

위에서 add한 파일들이 있는 공간을 스테이지(stage)라고 부른다.

선수들이 무대 위에 입장은 했는데, 아직 포토 타임이 시작되지 않은 것이다.

이제 이 파일들을 'git 마음속에 저-장'하기 위해 사진을 찍을 것이다.

git commit -m "이 순간을 기억하기 위해 사진에 적고싶은 한 마디"

-m 옵션 뒤에 메모하고 싶은 말을 적는다.

1. master 브랜치 옆의 + 표시가 사라지고 색이 초록색으로 바뀌었다.

2. 좌측 tree와 Source Control 패널이 깔끔해졌다.

왜 깔끔해졌는지는 git status를 입력해보면 알 수 있다.

git께서 깨끗하다고 하신다.

---

2. GitHub

여기까지의 진행 사항들을 그대로 GitHub에 private로 올릴 것이다.

 

2.1 GitHub 저장소 만들기

먼저 GitHub에 로그인한다.

우측 상단에 본인의 아이콘을 누르고 Your Repositories에 들어간다.

다시 우측 상단을 보면 새로운 저장소를 추가하는 버튼을 볼 수 있고, 해당 버튼을 누른다.

빨간색 *표가 있는 영역은 반드시 채워넣어야 하는 부분으로, 본인의 저장소 이름을 기입하면 된다.

정보를 입력했다면 Create repository 버튼을 누른다.

 

2.2 GitHub 원격 저장소에 로컬 저장소를 push 하기

짚고 넘어갈 용어들이 있다.

내 컴퓨터 상에 존재하는 저장소를 로컬 저장소(local repository)라 하고, GitHub와 같은 인터넷상에서 존재하는 저장소를 원격 저장소(remote repository)라고 한다.

원격 저장소를 활용하는 이유는 당연히 여러 기기에서(여러명이) 하나의 프로젝트를 관리할 수 있기 때문이다.

이렇게 원격 저장소에 로컬 저장소를 올리는 행위를 푸쉬(push)라고 한다.

당연히 반대의 행위는 풀(pull)이라고 하고 편하게 땡겨온다 한다.

Create repository 버튼을 누르면 위와 같은 화면을 볼 수 있다.

맨 위에는 내 원격 저장소의 링크가 생겨난 것을 볼 수 있고, 아래 3가지 옵션이 나와있다.

이 옵션들은 곧 만들어질 원격 저장소에 연결할 다른 저장소(나는 로컬 저장소에 해당된다)를 어떻게 업로드(push)하는지 알려주고 있다.

나는 이미 존재하는 로컬 저장소를 푸쉬할 것이므로 두 번째 명령어를 사용할 것이다.

push 전, git status를 통해 커밋할 내용이 남아있는지 확인한다.

그리고 git remote 명령어를 입력해 현재 링크된 원격 저장소가 있는지 확인한다.

아직 push하지 않았으니 아무것도 뜨지 않는 것이 정상이다.

git remote add origin https://github.com/darkasassin44/SmartBallboy.git
git branch -M main
git push -u origin main

위에 나온 세 줄을 그대로 VSCode의 터미널 창에 입력해준다.

처음 하는 경우 사용자의 로그인 정보를 물어볼텐데 이는 알아서 잘 입력한다.

잘 push 되었는지 확인하려면 열어놓았던 GitHub 페이지를 새로고침 해 본다.

이렇게 로컬 저장소를 원격 저장소로 push하기 끝.