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 | — | 커밋 메시지/내용 검색 |
추천 설정¶
Ctrl + , (macOS: Cmd + ,) 로 설정 열기:
// settings.json (JSONC 형식)
{
// Git 관련 설정
"git.enableSmartCommit": true, // 스테이징 없이도 커밋 가능
"git.confirmSync": false, // sync 확인창 끄기
"git.autofetch": true, // 자동으로 원격 변경 가져오기
"git.autoRepositoryDetection": true, // Git 저장소 자동 감지
// 에디터 설정
"editor.fontSize": 15, // 글자 크기
"editor.fontFamily": "'D2Coding', 'Fira Code', monospace",
"editor.tabSize": 2, // 탭 크기 (Python은 4)
"editor.wordWrap": "on", // 자동 줄바꿈
"editor.formatOnSave": true, // 저장 시 자동 포맷팅
"editor.minimap.enabled": false, // 미니맵 끄기 (코딩에 집중)
// 터미널 설정
"terminal.integrated.fontSize": 14,
// 자동 저장
"files.autoSave": "afterDelay", // 1초 후 자동 저장
"files.autoSaveDelay": 1000
}
유용한 단축키¶
필수 단축키¶
| 기능 | 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