VSCode에서 깃허브 연동 및 사용법 (커밋/푸시 명령어)

도커^docker로 Laravel 개발 환경을 구축하는 방법을 연재하고 있었는데, 갑자기 중간에 멈추고 깃허브^GitHub에 대한 포스팅을 한다.

도커에 대해서 포스팅하기 전에 깃허브에 대해서 먼저 포스팅하는 게 바른 순서였던 것 같다.

어쨌든 이번에는 비주얼 스튜디오 코드^{Visual Studio Code}로 깃허브에 코드를 커밋^commit, 푸시^push하는 방법을 올려보겠다.

생활코딩의 "Visual Studio Code에서 Git으로 협업하기" 수업

프로그래밍 독학은 생활코딩과 함께 (feat. Opentutorials.org)

프로그래밍을 혼자서 공부해보고 싶으신가요? 오픈튜토리얼스, 혹은 생활코딩이라고 불리는 아주 유용한 사이트를 소개하겠습니다.

이것 역시 생활코딩 유튜브 채널을 통해서 배울 수 있다.

Visual Studio Code에서 Git으로 협업하기

Visual studio code에서 git 을 다루는 방법에 대한 수업입니다.

www.youtube.com

생활코딩의 'Visual Studio Code에서 Git으로 협업하기' 수업 재생목록의 링크다.

오늘의 포스트에서 정리하는 내용은 이 재생목록의 첫 번째 영상에서 알려주는 내용인데, 포스트의 내용은 영상과 약간 차이가 있을 것 같다.

VSCode와 깃허브 연동하기

깃허브에 로그인을 한 후의 첫 화면이다.

화살표로 표시한 New 버튼을 클릭하면 새 Repository를 만들 수 있다.

Repository의 이름과 설명을 간단하게 작성했다.

그 외 다른 옵션은 아무것도 손대지 않았다.

Public과 Private의 차이 등은 생활코딩 영상에서 설명하고 있으니 딱히 설명하지 않고 넘어가겠다.

모든 준비가 끝나면 Create repository 버튼을 클릭하자.

그리고 이런 화면으로 넘어가면 HTTPS 형식의 web URL 혹은 SSH key를 복사해 두자.

둘의 차이는 나중에 따로 다룰지 어쩔지 모르겠는데, 깃허브 실습이라던지 일회성 접근일 경우에는 HTTPS, 개인 개발 환경이라면 SSH를 복사하자.

mkdir 디렉터리명

ubuntu를 실행시키고 이 명령어를 입력해서 원하는 이름의 디렉터리를 만든다.

cd 디렉터리명

그리고 이 명령어로 방금 만든 디렉터리로 들어간다.

code .

이 명령어로 VSCode에서 디렉터리를 연다.

VSCode가 열리면 왼쪽의 Source Control 아이콘을 클릭한 후, Initialize Repository 버튼을 클릭한다.

... 아이콘이 두 개가 있으니 헷갈리지 말자.

아래에 있는 ...을 클릭 후에 Remote > Add Remote... 를 클릭한다.

그리고 생활코딩 영상처럼 복사해 뒀던 HTTPS web URL이나 SSH key를 붙여 넣고 enter, 그리고 'origin'을 입력하고 enter 키를 누른다.

VSCode에서 왼쪽의 Explorer를 클릭하면, .git이라는 디렉터리가 생생되어있다.

이것이 있어야 VSCode에서 깃허브로 commit과 push를 할 수 있다.

commit과 push를 하기 위해 아무 파일이나 만들어 보자.

나는 이렇게 hello.html 파일을 만들었다.

다시 Source Control로 이동한 후에 커밋 메시지를 작성하고 Commit 버튼을 클릭한다.

이런 창이 뜨면 'Yes'를 클릭한다.

Publish Branch 버튼을 클릭한다.

그러면 깃허브에 첫 번째 commit을 push하게 된다.

다시 깃허브의 Repository로 돌아와서 새로고침을 하면 화면이 이렇게 바뀐다.

여기서 화살표로 표시한 부분을 클릭하면 커밋 목록을 볼 수 있다.

이후부터는 commit과 push를 터미널에 명령어를 입력해서 하자

경험상 앞으로 계속 commit과 push를 이렇게 VSCode에서 버튼을 클릭해서 하다 보면 언젠가 에러가 발생할 때가 있다.

그런 때마다 어떻게든 해결하기는 했지만, 꽤 시간을 잡아먹은 적이 많았다.

그러니 이후부터는 VSCode의 터미널을 이용해서 직접 명령어를 입력하도록 하자.

VSCode에서 상단 메뉴, Terminal > New Terminal을 클릭하면 하단에 명령어를 입력할 수 있는 터미널이 생긴다.

명령어로 깃허브에 commit, push 하는 명령어

git add .

1. 현재 디렉터리의 모든 파일을 Staging Area로 이동

git commit -m "messsage"

2. Staging의 파일들 commit 하기

git push

3. 저장소에 commit 반영하기

git pull

4. 저장소에서 commit 가지고 오기

git restore .

5. 모든 변경 사항을 버리고 원상태(마지막으로 commit 한 상태)로 돌아가기

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.