10장: VS Code 설치와 Git 연동¶

VS Code가 뭔가요?¶

Visual Studio Code(VS Code)는 마이크로소프트에서 만든 무료 코드 에디터입니다. 가볍고 빠르고 확장성이 높아서 전 세계 개발자들이 가장 많이 씁니다.

Git이 터미널에서 쓰는 도구라면, VS Code는 Git을 마우스로 편하게 쓸 수 있게 해주는 도구입니다.

VS Code 설치¶

Windows¶

# 방법 1: winget (권장)
winget install Microsoft.VisualStudioCode

# 방법 2: Chocolatey
choco install vscode

# 방법 3: Scoop
scoop install vscode

# 방법 4: 수동 설치
# https://code.visualstudio.com 에서 다운로드
# 설치 시 "PATH에 추가" 옵션 체크 확인

macOS¶

# 방법 1: Homebrew (권장)
brew install --cask visual-studio-code

# 방법 2: 수동 설치
# https://code.visualstudio.com 에서 다운로드
# 다운로드한 .zip 압축 해제 후
# Visual Studio Code.app을 Applications 폴더로 이동

Linux¶

Ubuntu / Debian¶

# 방법 1: apt (공식 저장소)
curl -L -o code.deb "https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64"
sudo apt install ./code.deb

# 방법 2: snap
sudo snap install code --classic

Fedora / RHEL¶

curl -L -o code.rpm "https://code.visualstudio.com/sha/download?build=stable&os=linux-rpm-x64"
sudo dnf install ./code.rpm

Arch Linux¶

sudo pacman -S code  # code 또는 visual-studio-code-bin

설치 확인¶

code --version
# 1.xx.x 나오면 성공

터미널에서 바로 열기¶

# 현재 디렉토리를 VS Code로 열기
code .

# 특정 파일 열기
code hello.py

# 특정 폴더 열기
code my-project/

한글 설정¶

VS Code 실행
Ctrl + Shift + X (macOS: Cmd + Shift + X) 로 확장 탭 열기
"Korean" 검색 → Korean Language Pack for Visual Studio Code 설치
우측 하단 알림에서 "Change Language and Restart" 클릭

필수 확장 프로그램¶

Git 관련¶

확장 프로그램	설명
GitLens	코드 한 줄마다 누가 언제 작성했는지 보여줌. Git 히스토리의 모든 것
Git Graph	브랜치 히스토리를 시각적으로 보여줌
GitHub Pull Requests	VS Code 안에서 PR 생성, 리뷰, 병합 가능
GitHub Copilot	AI가 코드를 자동완성해줌 (학생은 무료!)

언어별 (필요한 것만)¶

확장 프로그램	언어
Python	Python
Pylance	Python (타입 체크, 자동완성 향상)
ES7+ React/Redux	React
Live Server	HTML/CSS/JS (실시간 미리보기)
Prettier	코드 포맷팅
ESLint	JavaScript/TypeScript 린트

확장 프로그램 설치 방법¶

# 터미널에서도 설치 가능
code --install-extension eamodio.gitlens
code --install-extension mhutchie.git-graph
code --install-extension github.vscode-pull-request-github
code --install-extension ms-python.python
code --install-extension esbenp.prettier-vscode

# 설치된 확장 목록
code --list-extensions

VS Code 내장 Git 사용법¶

VS Code는 Git이 설치되어 있으면 자동으로 인식합니다. 별도 설정이 필요 없습니다.

Source Control 패널¶

Ctrl + Shift + G (macOS: Cmd + Shift + G) 를 누르면 Source Control 패널이 열립니다.

┌─ Source Control ─────────────────────┐
│                                      │
│  메시지 입력란...          [✓ Commit]│
│                                      │
│  Changes (2)                         │
│  ┌──────────────────────────┐        │
│  │ U  hello.py              │ ← Untracked (새 파일)
│  │ M  app.py                │ ← Modified (수정됨)
│  └──────────────────────────┘        │
│                                      │
│  [+] 파일 옆 아이콘 = git add       │
│  [↩] 파일 옆 아이콘 = git restore   │
└──────────────────────────────────────┘

파일 상태 문자¶

문자	의미	Git 명령어
U	Untracked (새 파일)	—
A	Added (add됨)	`git add`
M	Modified (수정됨)	파일 수정
D	Deleted (삭제됨)	파일 삭제
R	Renamed (이름 변경)	파일 이동/이름변경
C	Copied (복사됨)	파일 복사

기본 Git 워크플로우 (VS Code)¶

1. 변경사항 확인¶

파일을 수정하면 Source Control에 자동으로 나타남
파일 클릭 → 변경 전/후를 나란히(diff) 볼 수 있음

┌──── hello.py (수정 전) ────┐  ┌──── hello.py (수정 후) ────┐
│                             │  │                             │
│  print("Hello")             │  │  print("Hello, World!")     │
│                             │  │  print("Git is fun!")       │
│                             │  │                             │
└─────────────────────────────┘  └─────────────────────────────┘
          초록색(추가) / 빨간색(삭제) / 파란색(변경) 하이라이트

2. 스테이징 (git add)¶

개별 파일: 파일 옆 + 아이콘 클릭
전체: "Changes" 옆 + 아이콘 클릭 = git add .

3. 커밋 (git commit)¶

상단 메시지 입력란에 커밋 메시지 작성
Ctrl + Enter (macOS: Cmd + Enter) 로 커밋
또는 ✓ Commit 버튼 클릭

4. Push / Pull¶

좌측 하단 상태 표시줄 활용:

┌──────────────────────────────────────┐
│ main ⇣2 ⇡3  ↻  ⊗                   │
│  ↑     ↑    ↑    ↑                   │
│ 브랜치  pull push sync 원격          │
└──────────────────────────────────────┘

⇣2: 받을 커밋 2개 (pull 필요)
⇡3: 올릴 커밋 3개 (push 필요)
클릭하면 바로 실행됨

브랜치 관리¶

좌측 하단 브랜치 이름(main)을 클릭하면:

┌─ 브랜치 메뉴 ──────────┐
│ > Create Branch...       │  ← 새 브랜치 만들기
│ > Checkout to...         │  ← 브랜치 이동
│ > Rename Branch          │  ← 이름 변경
│ > Delete Branch          │  ← 삭제
│                          │
│   main                   │
│   feature/login          │
│   fix/header-bug         │
└──────────────────────────┘

충돌 해결¶

병합 충돌이 발생하면 VS Code가 자동으로 감지합니다:

┌────────────────────────────────────────┐
│  <<<<<<< HEAD         [Accept Current] │
│  현재 브랜치 내용                       │
│  =======                               │
│  병합할 브랜치 내용                     │
│  >>>>>>> feature     [Accept Incoming]  │
│                      [Accept Both]      │
│                      [Compare]          │
└────────────────────────────────────────┘

인라인 편집기로 직접 수정할 수도 있고, 버튼으로 빠르게 선택할 수도 있습니다.

GitLens 확장 프로그램¶

설치하면 코드의 모든 줄에 "누가 언제 작성했는지"가 표시됩니다:

  5: print("Hello, World!")   ← 홍길동, 2시간 전
  6: return result            ← 김철수, 3일 전

GitLens 유용 기능¶

기능	단축키	설명
File History	—	파일의 변경 이력 전체 보기
Line History	—	특정 줄의 변경 이력
Compare	—	브랜치/커밋 간 비교
Stash	—	stash 관리
Search Commits	—	커밋 메시지/내용 검색

유용한 단축키¶

필수 단축키¶

기능	Windows/Linux	macOS
명령 팔레트	`Ctrl + Shift + P`	`Cmd + Shift + P`
터미널 열기/닫기	Ctrl + \`` \|Cmd + ``
파일 검색	`Ctrl + P`	`Cmd + P`
전체 검색	`Ctrl + Shift + F`	`Cmd + Shift + F`
Source Control	`Ctrl + Shift + G`	`Cmd + Shift + G`
설정	`Ctrl + ,`	`Cmd + ,`
사이드바 토글	`Ctrl + B`	`Cmd + B`

Git 관련 단축키¶

기능	Windows/Linux	macOS
커밋	`Ctrl + Enter` (SC 패널)	`Cmd + Enter`
diff 보기	파일 클릭	파일 클릭
되돌리기	파일 옆 ↩ 아이콘	파일 옆 ↩ 아이콘

명령 팔레트로 Git 명령어 실행¶

Ctrl + Shift + P → git 입력:

> Git: Clone         — 저장소 복제
> Git: Fetch         — 원격 변경 가져오기
> Git: Pull          — pull
> Git: Push          — push
> Git: Checkout to   — 브랜치 이동
> Git: Create Branch — 브랜치 만들기
> Git: Stash         — stash
> Git: View History  — 히스토리 보기

통합 터미널에서 Git + gh 사용하기¶

VS Code 안에서 터미널을 열면(`Ctrl + ``) 모든 Git 명령어를 그대로 쓸 수 있습니다:

# VS Code 터미널에서
git status
git add .
git commit -m "feat: 새로운 기능"
git push

# gh도 사용 가능
gh pr create --title "feat: 새로운 기능"
gh issue list

GUI와 CLI를 상황에 따라 섞어 쓰면 가장 효율적입니다: - diff 확인, 충돌 해결: VS Code GUI - 빠른 커밋, 브랜치 작업: 터미널 CLI - PR 생성, 리뷰: gh CLI 또는 GitHub Pull Requests 확장

실습 미션¶

VS Code를 설치하고 실행하세요
한글 언어 팩을 설치하세요
GitLens 확장을 설치하세요
Ctrl + \`` 로 터미널을 열고git --version`을 입력해 보세요
code . 로 현재 폴더를 열어보세요
Source Control 패널에서 파일을 수정 → add → commit까지 해보세요
파일 diff 화면을 열어보세요
명령 팔레트에서 Git: View History를 실행해 보세요

이전 장: 09-merge-and-conflict.md 목차로 돌아가기: 01-git-basics.md