[Node.JS] VSCode GitHub 연동하기

VSCode GitHub 연동 

다음으로 VSCode와 GitHub를 연동하는 과정에 대해 살펴보도록 하자.

현재 GitHub 다음 URL에는 Node JS 기반 Template Code를 업로드 해 두었다.

https://github.com/sonnaraon/Nodejs_Template

sonnaraon/Nodejs_Template

해당 Repository는 계속 업데이트 해 나갈 예정이며, 본 가이드에서는 GiHub와의 연동에 초점을 맞춰 진행해 보자.

먼저 VSCode 왼쪽 메뉴 바 중 세번째 Source Control을 선택하자. (Ctrl + Shift + G)

친절하게 가이드가 나와 있는데, 로컬 환경에 Git이 설치되어 있지 않다면, Install Git을 선택하자.

Git은 다음에서 다운로드 받을 수 있다.

다운로드 URL : https://git-scm.com/

Git

Git 설치 방법은 생략한다. Next를 10번 남짓 누르면 설치가 완료될 것이다.

Git 설치가 완료되면 Git Path를 인식시켜 주기 위해서 VSCode를 한번 Restart 시켜 주는 것이 좋다.

다음과 같이 git version 확인 후 git code를 직접 다운로드 받아 보도록 하자.

먼저 Terminal 창에서 git init & git remote add origin https://github.com/[ID]/[Repository] 형태로 git 연결 준비를 한다.

다음으로 Git Repository로부터 Package를 다운로드 받기 위해 Source Control >> 상단 ... >> Pull from을 선택한다.

이때 앞서 입력한 origin Repository를 선택할 수 있도록 활성화 되며, branch를 선택하면 다운로드가 진행된다.

다음과 같이 GitHub로 부터 내려 받은 Node.js Template Package를 살펴보자.

public, router, views, app.js 등이 있으며, 이에 대한 설명과 활용 방법에 대해서는 차차 살펴보도록하자.

 GitHub Commit & Push 

마지막으로 GitHub에 Commit & Push를 하는 방법에 대해 살펴보자.

마찬가지로 Ctrl + Shift + G로 Source Control 창으로 이동하자.

여기서 GitHub와 VSCode간 Commit 절차는 다음과 같이 진행된다.

 

Changes >> Staged Changes >> Commit >> Push

- Changes : GitHub와 다른 버전의 파일

- Staged Changes : Commit 할 준비가 완료된 파일

- Commit : Push하기 위한 파일의 Revision 및 .git 구성

- Push : 파일 Git Repository에 업로드

 

Push From을 선택하여 앞서 추가한 Git Repository URL을 선택하면, 다음과 같이 GitHub Login 창이 오픈된다.

ID / PW를 입력하면, Push까지 완료된다.

 

오늘 포스팅에서는 VSCode 기본 환경 구성 및 Node.js Project를 생성하고, GitHub와의 연동을 통해 프로젝트를 진행하는 초기 단계에서 VSCode를 세팅하는 과정에 대해 살펴보았다.

다음 포스팅에서는 보다 본격적으로 Node.js에 대해 살펴보고, Node.js 프로젝트를 손쉽게 시작하는 출발점에 대해 살펴보자.