Visual Studio Code와 Git 연결하는 방법

Visual Studio Code와 Git 연결하는 방법 (초보자 가이드)

이전 글에서 Git 설치를 완료했다면, 이제 Visual Studio Code 와 연결해보겠습니다.

Git과 VSCode를 연결하면:

• 코드 변경사항 추적
• commit 관리
• GitHub 업로드
• 브랜치 관리

등을 VSCode 안에서 편리하게 사용할 수 있습니다.

---

1. Visual Studio Code 설치하기

먼저 VSCode가 설치되어 있어야 합니다.

👉 Visual Studio Code 공식 사이트

다운로드 후 기본 설정으로 설치합니다.

---

2. VSCode 실행하기

설치 완료 후 VSCode를 실행합니다.

---

3. Git 정상 설치 여부 확인

VSCode는 Git이 설치되어 있으면 자동으로 인식합니다.

확인 방법

상단 메뉴:

Terminal → New Terminal

또는 단축키:

Ctrl + Shift + `

터미널 창이 열리면 아래 명령 입력:

git --version

정상이라면:

git version 2.xx.x.windows.x

처럼 표시됩니다.

---

4. VSCode에서 Git 자동 연결 확인

왼쪽 메뉴에서 아래 아이콘 확인:

• 소스 제어(Source Control)

아이콘 모양:

🔀

이 메뉴가 보이면 Git이 정상 연결된 상태입니다.

---

5. 프로젝트 폴더 열기

예제 프로젝트를 만들어보겠습니다.

---

폴더 생성

바탕화면 또는 원하는 위치에:

my-project

폴더 생성

---

VSCode에서 열기

VSCode 메뉴:

File → Open Folder

→ my-project 선택

---

6. Git 저장소 초기화하기

VSCode 터미널에서 아래 명령 입력:

git init

정상 실행 시:

Initialized empty Git repository

출력됩니다.

이제 현재 폴더가 Git 프로젝트가 되었습니다.

---

7. 테스트 파일 만들기

예시 파일 생성:

index.html

내용 입력:

<h1>Hello Git</h1>

저장:

Ctrl + S

---

8. 변경사항 확인하기

왼쪽 Source Control 메뉴 클릭

그러면 방금 만든 파일이 표시됩니다.

예시:

index.html

이것은 Git이 변경사항을 감지했다는 의미입니다.

---

9. Git Commit 하기

STEP 1 — 파일 추가(Stage)

파일 옆 + 버튼 클릭

또는 터미널에서:

git add .

---

STEP 2 — Commit 메시지 입력

상단 입력창에:

첫 커밋

입력

---

STEP 3 — Commit 실행

✔ 버튼 클릭

또는 터미널:

git commit -m "첫 커밋"

---

10. GitHub와 연결하기

이제 GitHub 저장소와 연결해보겠습니다.

---

GitHub 회원가입

👉 GitHub 공식 사이트

회원가입 후 로그인

---

새 저장소 만들기

우측 상단:

New Repository

클릭

예시:

my-project

생성

---

11. GitHub 저장소 연결하기

GitHub에서 저장소 생성 후 아래 주소 확인:

https://github.com/사용자명/my-project.git

VSCode 터미널에서 입력:

git remote add origin 저장소주소

예시:

git remote add origin https://github.com/abc/my-project.git

---

12. GitHub에 업로드(push)

아래 명령 실행:

git branch -M main

그 다음:

git push -u origin main

---

13. GitHub 로그인 창이 뜨는 경우

처음 push할 때 로그인 창이 뜰 수 있습니다.

이 경우:

• 브라우저 로그인
• GitHub 인증 허용

진행하면 됩니다.

---

14. VSCode Git 기능 추천

VSCode는 Git 관련 기능이 매우 강력합니다.

---

주요 기능

기능설명

Source Control	변경사항 관리
Commit	저장
Push	GitHub 업로드
Pull	최신 코드 다운로드
Branch	브랜치 관리
History	변경 기록 확인

---

15. 추천 VSCode Git 확장 프로그램

---

GitLens

추천 확장 프로그램:

GitLens 공식 페이지

기능:

• 누가 수정했는지 표시
• 이전 변경 기록 확인
• Git 시각화

---

16. 자주 사용하는 Git 명령어

명령어설명

git init	Git 시작
git status	상태 확인
git add .	파일 추가
git commit -m "메시지"	저장
git push	업로드
git pull	다운로드
git branch	브랜치 확인

---

마무리

이제 VSCode와 Git 연결이 완료되었습니다.

앞으로는:

• 코드 수정
• commit
• GitHub 업로드

를 모두 VSCode 안에서 편리하게 관리할 수 있습니다.

다음 단계로는:

• GitHub 협업 방법
• branch 사용법
• merge 개념
• 충돌(conflict) 해결
• VSCode에서 GitHub 로그인 유지하기

등을 배우면 좋습니다.