[VSCode]Visual Studio Code 에서 Git 사용하기

■ Visual Studio Code(VSCode) 란? 

Visual Studio Code(이하 VSCode)는 MS에서 제공하는 크로스 플랫폼 에디터로 다양한 언어를 서포트 하며 IntelliSense, Debugging, Built-in Git, Extensions 등의 기능를 제공 합니다. 

기존에 Front-End 개발에 Sublime Text를 사용하셨던 분들도 최근에는 VSCode를 많이 사용하시는 것 같습니다. (무료, 오픈소스) 

다운로드는 https://code.visualstudio.com/ 에 접속하셔서 본인의 OS에 맞는 버전을 다운로드 받아 설치 하시면 됩니다. (Window, Linux, Mac 모두 지원)

■ Visual Studio Code 에서 Git 사용하기

[사용 버전] 

버전: 1.30.2 (system setup)

커밋: 61122f88f0bf01e2ac16bdb9e1bc4571755f5bd8

날짜: 2019-01-07T22:54:13.295Z

Electron: 2.0.12

Chrome: 61.0.3163.100

Node.js: 8.9.3

V8: 6.1.534.41

OS: Windows_NT x64 10.0.14393

VSCode는 Git 연계만 지원할 뿐 Git 자체를 지원하는 것은 아니기 때문에 Git을 우선 설치해야 합니다. Window Git 설치 및 기본 설정은 아래의 내용을 참고 하시면 됩니다.

2014/10/14 - [Software Engineering] - [GitHub]GitHub 와 msysGit

2017/02/04 - [Software Engineering] - [Git]git for window 설치

Git을 연동하는 방법은 크게 로컬에서 프로젝트를 생성하고 원격으로 Git에 연결하는 방법 과 Git에 생성된 프로젝트를 로컬로 clone 하는 방법 두 가지중 하나를 사용하시면 됩니다.

git clone 을 사용하는 방법은 크게 어려울 것이 없고, 명령어로 원격 리포지토리를 연결하는 방법은 아래의 내용을 참고 하시길 부탁드립니다.

2016/04/24 - [Software Engineering] - [Git]원격 리포지토리 송신

□ 1. Local Folder 지정

VSCode 에서 프로젝트에서 사용할 특정 폴더를 선택해야 지정합니다. (파일 > 폴더열기)

폴더를 선택하는 방법을 모르시는 분은 없다고 생각됩니다.

□ 2. Git 초기화

좌측 메뉴에서 소스제어 메뉴 선택후 레포지토리 초기화 버튼을 선택합니다. (아래 이미지 참고)

VSCode는 기본적으로 Git이 기본 소스제어로 설정되어 있습니다.

초기화 버튼을 선택하면 아래와 같은 화면이 표시되고 원하는 폴더를 선택하시면 됩니다.(기본적으로 최초 열었던 폴더가 표시되어 있음)

윈도우 디렉토리를 확인해 보면 .git 폴더가 생성 된 것을 확인 할 수 있습니다.

.git 폴더가 생성되면 VSCode 또한 아래와 같이 메뉴가 생성 되는 것을 확인 할 수 있습니다.

□ 3. Git Stage 관리

간단하게 파일을 하나 생성해 보도록 하겠습니다. github에 필요한 README.md 파일을 생성합니다.

아래 그림에 있는 것 처럼 좌측 메뉴의 탐색기 버튼을 누른 후 파일을 추가 해주면 소스제어 아아콘에 1이 표시되는 것을 보실 수 있습니다.

소스제어메뉴를 선택하면 아래와 같이 보여 지며 파일에 마우스를 위치하면 + (변경 내용 스테이징) 아이콘이 보여 집니다.

해당 아이콘을 선택하면 Stage 처리 됩니다.

Git Staging 에 대한 내용을 모르시는 분은 Git 문서를 참고 하시길 바랍니다. (https://git-scm.com/book/ko/v2)

간단히 말하면 repository에 반경되기전의 상태 즉, 수정된 파일이 커밋 되기 전의 상태 입니다. 그림으로 보면 아래와 같습니다

추가로 ... 메뉴를 선택하면 스테이징 취소 등의 작업을 진행 할 수 있습니다.

□ 4. Git commit

Staging 처리 되었으므로 commit 명령어를 통하여 git에 반영 하면 됩니다. VSCode 소스 제어에서 아래의 메뉴를 선택하시면 됩니다.

위의 메뉴를 선택하면 아래의 창이 표시됩니다. 명령어로 git commit -m "first commit" 을 입력하는 것과 동일합니다.

□ 5. Remote Git 추가

저는 이미 github 사이트를 통하여 javascript-study 라는 repository를 생성해 둔 상태이므로 remote repository에 연결 합니다.

글 서두에서도 말씀 드렸지만, 관련 내용에 대한 부분은 다른 글을 참고 하시면 됩니다.

VSCode를 통하여 remote 하는 방법이 메뉴얼에서 확인 되지 않으므로, 터미널을 통하여 아래의 명령어를 입력 해 줍니다.

git remote add origin "github 등에서 생성한 Repository URL"

위의 명령어가 적용되면 생성한 git 로컬 디렉토리에 있는 내용이 github Repository에 push 가능한 상태가 됩니다.

VSCode에서는 아래 쪽에 클라우드 아이콘이 생성 됩니다.

□ 6. Remote Git Push 하기

클라우드 아이콘을 선택하면 최초 접속이므로 아래와 같이 github 로그인 정보(username, password)를 묻는 창이 생성 됩니다.

정보 입력이 완료되면 github 사이트로 반영 됩니다. 반영 완료 후에 github 사이트를 확인해 보았습니다.

아래와 같이 정상적으로 파일이 반영 된것을 확인 하실 수 있습니다.

이후 작업도 동일한 형태로 진행 하시면 됩니다.

push 명령어는 ... 메뉴를 통하여 진행 가능 합니다. (git push -u origin master)

완료!!!