Visual Studio Code에 GitHub 연동하기(+ Git파일의 4가지 상태)

목차

• Visual Studio Code 설치방법
• Git 저장소(repository) 만들고 GitHub와 연동하는법
• Git 파일의 4가지 상태

 

Visual Studio Code 설치방법

  Git과 Github를 사용하기 이전에 계속 Git Bash로 명령어를 입력하기 보다 UI로 편하게 제어하도록 Visual Studio Code를 설치해서 사용하도록 하자.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

  Visual Studio Code에는 Stable과 Insiders이렇게 2가지 버전이 있다. Stable은 영어 뜻 그대로 안정적으로 사용할 수 있는 버전, Insiders는 업데이트가 빨라서 최신 버전의 기능을 사용할 수 있지만 불안정하거나 버그가 발생할 확률이 존재한다. Git을 사용하는데 최신 버전은 중요하지 않으므로 우리는 Stable을 다운받아 사용하도록 하자.

 

(1) 동의를 선택하고 다음 버튼을 누른다.

 

(2) 설치할 디렉토리를 설정하고 다음 버튼을 누른다.

 

(3) 시작 메뉴 폴더를 만들지 물어보는데 그냥 다음 버튼을 누르자.

 

(4) 필요한 항목이 있다면 추가로 선택하고 다음 버튼을 눌러서 설치를 완료하자.

Git 저장소(repository) 만들고 GitHub와 연동하는법

  Git은 주로 다음 두 가지 중 한 가지 방법으로 Git저장소를 쓴다.

(1) 기존 로컬 디렉토리를 Git 저장소로 만들기

  Visual Studio Code를 열어서 왼쪽 메뉴중에 Explorer -> Open Folder를 클릭해서 버전관리를 하고 싶은 프로젝트의 디렉토리를 선택해준다. 본인은 여기서 C:\GitTest 디렉토리를 선택했고, index.html과 icon이미지 파일이 있다.

 

상단메뉴에서 Terminal->New Terminal을 클릭한다.

 

  이제 Terminal에서 git init 명령을 입력해주자. 해당 명령어를 입력하면 .git 이라는 하위 디렉토리를 생성해주는데, 저장소에 필요한 뼈대 파일이 들어있다. 하지만 지금까지의 명령만으로는 프로젝트 내부의 어떤 파일도 버전 관리 항목에 들어가지 않는데, 여기서 git add와 git commit 명령으로 commit을 해주어야 파일 버전 관리를 시작한다.

  git add 명령은 버전 관리를 새롭게 추적할 파일을 추가할 때 사용하는 명령어이다. 해당 명령어를 입력받은 파일은 Workspace에서 Staging Area(index)로 추가된 Staged 상태의 파일이다.

  git add . 명령을 입력하면 Workspace에 있는 파일 중 내용 변경이 있는 모든 파일을 선택하는 명령어인데, 프로젝트 내부 파일의 어떤 파일도 버전 관리 항목에 없으므로 해당 명령어를 입력했다. 만약 추가할 파일을 선택하고 싶을때는 git add 파일이름.확장자 이렇게 입력만 하면 된다.

# Example
git add NewFile.txt

 

  git commit 명령은 commit한 시점의 내용을 스냅샷으로 저장하고, 해당 스냅샷에 대한 commit 객체를 만드는 명령어이다. Staging Area(index)에 넣은 모든 Staged 상태의 파일을 commit해준다(Committed).

 

  git commit -m “comment” 에서 -m은 commit 메시지를 파라미터로 넘기는 것인데, -m를 하나만 쓰면 제목만 -m를 두개 쓰면 제목과 Description이 된다.

git commit -m “Reversion.0”

 

git commit -m “Reversion.0” -m “add code” 

SMALL

  이제 Git저장소 만드는 작업을 완료했으니 원격 저장소인 GitHub와 연동을 시켜보자. GitHub를 회원가입 후 상단 오른쪽 메뉴 중 New repository를 클릭해 GitHub내에 새로운 원격 저장소를 만든다.

 

  Repository name으로 방금까지 작업해온 프로젝트인 GitTest를 입력하고 하단의 Create repository을 눌러서 GibHub저장소를 만들어 준다. 로컬 디렉토리 프로젝트의 이름과 GitHub 저장소의 이름이 동일할 필요는 없지만, 혼동을 방지하기 위해 이름을 동일하게 해서 진행한다.

  이제 GitHub에 새로운 저장소가 만들어졌으니 로컬에 있는 프로젝트의 파일을 GitHub에 올리는 작업을 진행할 것이다. 다시 Visual Studio Code로 돌아가서 Terminal에 git remote add origin https주소를 입력해 준다. https는 빨간색 네모칸에 있는 주소를 복사해서 넣으면 된다.

 

  다음으로 git push origin master를 입력하면 GitHub저장소에 로컬 디렉토리 프로젝트의 파일이 추가 된 것을 볼수있다.

 

(2) Git 저장소에서 Clone 하는 방법

  이번에는 GitHub저장소를 Clone하는 방법에 대해서 알아보자. git clone 명령을 사용하게 되면 해당 프로젝트에 대한 히스토리(버전)를 전부 받아올수 있다. Clone에 사용될 GitHub저장소는 방금까지 작업했던 GitTest를 로컬에서 삭제하고 clone해서 다시 받아올 것이다.

  Code를 클릭하면 Clone을 하기 위한 저장소에 대한 주소 정보가 나온다. 여기서는 HTTPS를 이용할 것이다. 먼저 해당 주소를 복사하자.

  Visual Studio Code를 열어서 Explorer -> Clone Repository를 클릭해 방금 복사한 HTTPS주소를 입력하고 저장할 로컬 디렉토리를 설정만 해주면 완료이다.

 

Git 파일의 4가지 상태

  Git의 workspace(워킹 디렉토리)의 모든 파일에는 크게 Tracked(관리대상) Untracked(비관리대상)으로 나뉘고, Tracked파일은 또 다시 Unmodified(수정하지 않음), Modified(수정됨), Staged(커밋으로 저장소에 기록될 파일)로 나뉜다.

Tracked : 이미 스냅샷에 포함되어 있는 파일

• Unmodified : 최신 버전의 스냅샷 내용과 완전히 일치한 상태. 처음 clone을 했을 때 모든 파일이 이 상태이다. 수정을 하게 되면 Modified 상태로 변경되고, git rm을 사용하면 Untracked상태로 변경된다.
• Modified : 마지막 commit이후 파일이 수정된 상태. git add 명령을 통해 Staged 상태로 변경하거나, git checkout 명령을 통해 Unmodified 상태로 돌아갈 수 있다.
• Staged : commit으로 곧 저장소에 기록될 상태. Git commit 이후에는 Unmodified상태로 변경되고, git reset HEAD filename 명령을 통해 Modified 상태로 돌아갈 수 있다.

Untracked : Tracked 파일을 제외한 나머지 파일. git add 명령을 통해 Staged로 변경할 수 있다.

  git 파일 상태는 일반적으로 git status명령을 사용한다. git status명령만 입력하면 Workspace와 Staging Area의 파일들의 상태를 보여준다. git status [filename]을 입력하면 해당 파일에 대한 상태만을 볼 수 있다.

 

git status

git status index.html