◇ WORKSHOP · VS CODE

Git & GitHub 입문

VS Code로 배우는 코드 저장과 협업

이 수업이 끝나면 답할 수 있어야 하는 것

Git은 왜 필요한가? / Git과 GitHub는 무엇이 다른가?
Repository는 무엇인가? / Commit은 무엇인가?
Push와 Pull은 어느 방향으로 움직이는가?
Clone과 Pull은 무엇이 다른가?
팀원이 코드를 수정했을 때 나는 무엇을 해야 하는가?

명령어를 몇 개 외웠는지가 아니라, 이 질문에 자기 말로 답할 수 있는지가 기준입니다.

여러분도 이미 버전 관리를 해봤습니다

발표자료.pptx 발표자료_수정.pptx 발표자료_최종.pptx 발표자료_진짜최종.pptx 발표자료_진짜진짜최종.pptx 발표자료_최종_수정_마지막.pptx

그런데 — 여기서 어떤 게 진짜 최신 파일일까요?

혼자도 이런데, 둘이 하면

철수 login.html 수정

영희 login.html 수정

둘 다 같은 파일을 고쳤습니다. 누구 파일을 써야 할까요?

그리고 이런 날

어제까진 로그인 잘 됐음 → 오늘 코드 수정함 → 갑자기 로그인 안 됨

어제 코드로 돌아가고 싶으면 어떻게 해야 할까요?

지금까지 나온 세 가지 문제 — 무엇이 최신인가 · 누구 걸 쓰나 · 어떻게 되돌리나. 이 셋을 한꺼번에 푸는 게 버전 관리입니다.

버전 관리 = 세이브 포인트

게임 게임 시작 ↓ SAVE 1 ↓ 보스전 → 망함 ↓ SAVE 1 로 돌아감

개발 프로젝트 시작 ↓ 회원가입 완성 ↓ 로그인 완성 ↓ 게시판 완성

중요한 순간마다 기록을 남깁니다. Git에서 그 기록 하나를 Commit 이라고 부릅니다.

🛠️ Git — 파일의 변경 이력을 관리하는 프로그램

개발자를 위한 세이브 포인트 시스템

게임 세이브는 상태만 저장하지만, Git은 누가 · 언제 · 무엇을 · 어떻게 바꿨는지까지 남깁니다.

정확한 이름은 버전 관리 시스템(VCS).

이 사람이 2005년에 만들었습니다

Krd / Von Sprat · CC BY-SA 4.0 (Wikimedia Commons)

리누스 토르발스 — 리눅스를 만든 그 사람입니다.

리눅스는 전 세계 개발자가 동시에 건드리는 거대한 프로젝트였는데, 쓰던 상용 도구(BitKeeper)를 더는 무료로 쓸 수 없게 됩니다.

직접 만들 수밖에 없었고, 그게 Git 입니다.

혼자면 몰라도, 넷이면 반드시 터진다

쇼핑몰 개발 철수 → 로그인 영희 → 회원가입 민수 → 게시판 지수 → 결제

누가 수정했지? · 왜 수정했지? · 언제 수정했지? · 어떤 코드가 최신이지? · 문제 생기기 전으로 돌아갈 수 없나?

Git으로 내 컴퓨터에서 관리가 된다면,
GitHub는 왜 필요할까요?

둘이 파일을 어떻게 나눌까

USB? 카카오톡? 이메일? — 됩니다. 되는데 불편합니다. 그래서 가운데에 공용 공간을 하나 둡니다.

Git 과 GitHub 는 다른 것입니다

GIT

프로그램입니다. 내 컴퓨터에 설치합니다.

인터넷이 끊겨도 Commit 은 됩니다.

≠

GITHUB

웹 서비스입니다. 회원가입을 합니다.

Git으로 관리하는 프로젝트를 올려두는 곳.

GitHub 없이도 Git 은 씁니다. 그런데 왜 다들 GitHub를 쓸까요?

GitHub를 쓰는 다섯 가지 이유

① 백업 — 컴퓨터가 고장 나도 코드는 남는다

② 협업 — 여러 명이 같은 프로젝트를 공유한다

③ 변경 이력 — 프로젝트가 어떻게 변해왔는지 보인다

④ 남의 코드 — 오픈소스를 열어 볼 수 있다

⑤ 포트폴리오 — 내가 무엇을, 얼마나 꾸준히 만들었는지가 그대로 개발 활동 기록으로 남는다

⑤ 때문에 잠시 뒤 user.email 을 GitHub 가입 이메일과 똑같이 맞출 겁니다. 다르면 내 활동으로 집계되지 않습니다.

③ 변경 이력 — 이런 게 남습니다

GitHub 커밋 이력 화면. 커밋 메시지와 작성자, 날짜가 줄마다 남아 있다

octocat/Hello-World 의 실제 커밋 이력 — 맨 아래가 2011년의 first commit. 줄마다 누가 · 언제 · 무엇을 했는지가 그대로 남아 있습니다.

Repository — 이게 저장소 하나입니다

GitHub 최초의 예제 저장소 octocat/Hello-World · 실제 화면 — Repository = 프로젝트 저장소(줄여서 Repo). Git으로 관리하는 프로젝트 보관함 하나.

이 두 곳은 같은 곳일까요?

내 컴퓨터

Local

GitHub

Remote

아닙니다. 완전히 다른 공간입니다.
이 차이를 못 잡으면 Push와 Pull을 끝까지 헷갈립니다.

오늘 머릿속에 그릴 단 하나의 그림

VS Code에서 `Ctrl + S` 를 눌렀습니다.
지금 Commit을 한 걸까요?

❌ 아닙니다

Ctrl + S 는 그냥 파일 저장입니다. Git은 아직 이 상태를 버전으로 기록하지 않았습니다.

Commit — 현재 상태를 버전 하나로 기록

로그인 기능을 완성했습니다. Git에게 말합니다 — "이 상태를 하나의 버전으로 기억해줘." 이게 Commit 입니다.

# 나쁜 메시지 수정 수정2 최종 / aaa

# 좋은 메시지 로그인 기능 추가 회원가입 유효성 검사 추가 게시판 검색 오류 수정

메시지만 봐도 무엇이 바뀌었는지 알 수 있어야 합니다.

Commit 전에 한 단계가 더 있습니다 — Stage

방에 물건이 많습니다.

책 · 옷 · 컴퓨터 · 마우스 · 과자

그런데 택배로 보낼 건 두 개뿐입니다.

[택배 상자] 책 · 마우스

파일도 똑같습니다. 셋을 고쳤는데

이번 Commit에 넣을 것만 고릅니다.

[Stage] login.html · login.js

이 고르는 과정을 Stage 라고 합니다.

📊 코드가 거쳐 가는 4개의 공간

Working

작업 공간

지금 편집 중

Staging

준비 공간

이번에 넣을 것

Local Repo

내 저장소

내 컴퓨터

Remote

원격 저장소

GitHub

→ Stage→ Commit→ Push← Pull

앞의 3칸은 전부 내 컴퓨터 안입니다. 인터넷을 타는 동작은 마지막 하나(Push/Pull)뿐.

Commit을 했습니다.
GitHub에도 코드가 올라갔을까요?

❌ 아닙니다

Commit은 Local Repository까지입니다. GitHub는 아직 아무것도 모릅니다.

Push — 밀어낸다

Local Repository
내 컴퓨터

— PUSH →

GitHub

내 컴퓨터에 Commit 해 둔 것을 GitHub로 보낸다. 커밋이 없으면 보낼 것도 없다.

Pull — 당겨온다

GitHub

— PULL →

내 컴퓨터

팀원이 GitHub에 올린 최신 내용을 내 컴퓨터로 가져온다.

Push 방향은? 내 컴퓨터 → GitHub · Pull 방향은? GitHub → 내 컴퓨터

한 문장으로

Ctrl + S = 파일 저장 Commit = Git 버전 기록 (내 컴퓨터) Push = Local → Remote Pull = Remote → Local

그럼 VS Code는 무슨 역할인가요?

자주 나오는 오해

"VS Code 안에 GitHub가 들어있는 건가요?"

# 원래 Git 은 이렇게 git add . git commit -m "로그인 기능 추가" git push

→

VS Code는 이걸 버튼으로 바꿔 보여줄 뿐입니다.

Git을 대신하는 게 아니라, PC에 설치된 Git을 불러 씁니다. Git이 없으면 버튼도 안 먹습니다.

💻 준비물과 확인

필요한 것 셋 — VS Code · Git · GitHub 계정. VS Code 터미널(Terminal → New Terminal)에서 확인합니다.

PS C:\Users\student> git --version git version 2.51.0.windows.1

'git'은(는) 내부 또는 외부 명령... 이 나오면

Git이 없거나, 설치 후 VS Code를 껐다 켜지 않은 것입니다.

💻 최초 딱 한 번 — 나를 등록

Commit에는 작성자 정보가 같이 남습니다. 그 이름표를 먼저 정합니다.

> git config --global user.name "홍길동" > git config --global user.email "github가입이메일@example.com" > git config --global init.defaultBranch main # 확인 — 값이 그대로 되돌아오면 성공 > git config --global user.name

이메일은 GitHub 가입 이메일과 같아야 내 활동으로 잡힙니다.

3번째 줄을 빼면 내 브랜치는 master, GitHub는 main — Push가 막힙니다.

💻 [실습 1] 프로젝트 폴더 만들기

왜 지금손에 잡히는 게 있어야 Git을 걸 수 있다

무엇을폴더 하나 + HTML 한 장

어디에바탕화면 git-study → VS Code로 폴더를 연다

기대 화면탐색기에 index.html 이 보인다

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Git Study</title></head>
<body>
    <h1>Hello Git!</h1>
</body>
</html>

지금 Git이 이 프로젝트를
관리하고 있을까요?

❌ 아직 그냥 폴더입니다

Git에게 말해야 합니다 — "이제부터 이 폴더를 Git으로 관리해줘."

💻 [실습 2] Git 저장소로 만들기

VS Code 에서

Source Control (Ctrl+Shift+G) ↓ Initialize Repository

터미널에서

> git init

둘은 완전히 같은 동작입니다.

기대 화면

Source Control 패널에 Changes 목록이 생기고 index.html 이 나타납니다.

⭐ `git status` — 길을 잃으면 여기부터

> git status On branch main Untracked files: index.html

이 수업에서 가장 자주 칠 명령어

지금 어떤 파일이 새 파일인지 · 수정됐는지 · Stage 됐는지 알려줍니다. Git이 이상하다 싶으면 다른 명령어를 치기 전에 이것부터 칩니다.

파일 옆의 U / M

SOURCE CONTROL

Changes

index.htmlU

style.cssM

U = Untracked — Git이 아직 모르는 새 파일

M = Modified — 알고 있던 파일이 바뀜

A = Added — Stage에 올라간 상태

💻 [실습 3] Stage

왜 지금이번 버전에 어떤 파일을 넣을지 골라야 한다

무엇을파일을 Staging 으로 올린다

어디에Source Control → 파일 이름 위 + 버튼

기대 화면Changes → Staged Changes 로 자리 이동

# 터미널로 하면 > git add index.html > git add . ← 전부 다

💻 [실습 4] Commit

SOURCE CONTROL

첫 페이지 생성

✓ Commit

Staged Changes

index.htmlA

> git commit -m "첫 페이지 생성"

커밋하면 목록이 싹 비워집니다. 사라진 게 아니라 기록으로 굳은 것입니다.

💻 [실습 5] GitHub에 Repository 만들기

GitHub 접속 → New repository

이름은 폴더와 같게 git-study, Public 선택

README 체크는 하지 않습니다 — 비어 있는 저장소여야 연결이 깔끔합니다

지금 한 일 = GitHub에 프로젝트 보관함(Repository) 하나를 만든 것.

내 프로젝트와 GitHub는 아직 서로 모릅니다

GitHub 저장소 주소를 등록해서 연결해 줍니다.

> git remote add origin https://github.com/아이디/git-study.git

origin 이 뭐예요?

지금은 이 정도로 충분합니다 — 우리가 연결한 GitHub 저장소에 붙여 놓은 별명.

💻 [실습 6] 첫 Push

VS Code (권장)

Publish to GitHub → 브라우저 로그인 → 저장소 생성 + 연결 + push 한 번에 처리

터미널

> git push -u origin main

비밀번호를 물으면 — GitHub는 계정 비밀번호를 더 이상 받지 않습니다(2021년 종료). 토큰(PAT)이 필요합니다.

새로고침 → 파일이 올라가 있습니다. 어떤 순서로 왔죠? 작성 → Stage → Commit → Push.

💻 [실습 7] 수정 → Commit → Push

<body>
    <h1>Hello Git!</h1>
    <p>Git과 GitHub를 공부하고 있습니다.</p>   <!-- 이 줄만 추가 -->
</body>

저장하면 파일 옆에 M 이 뜹니다. 이제 GitHub로 보내려면 어떻게 하죠? (학생이 답하게 한다)

Commit만 하고 멈춰서 GitHub를 새로고침 → 안 바뀝니다. 그 다음 Push 하고 새로고침 → 바뀝니다. 이게 둘의 차이입니다.

💻 [실습 8] GitHub 웹에서 직접 수정

GitHub에서 index.html → 연필(✏️) 아이콘 → 한 줄 추가

<h2>GitHub에서 수정했습니다.</h2>

Commit changes 클릭

이때 VS Code 쪽은 손대지 마세요. 양쪽을 동시에 고쳐 놓으면 충돌(Conflict)이 납니다 — 그건 뒤에서 따로 다룹니다.

GitHub의 파일이 바뀌었습니다.
VS Code도 자동으로 바뀌었을까요?

❌ 아닙니다

Git은 내가 시켜야만 움직입니다. 클라우드 드라이브 같은 자동 동기화가 아닙니다.

💻 [실습 9] Pull

VS Code

Source Control → ... → Pull

터미널

> git pull

GitHub

— PULL →

내 컴퓨터

VS Code 안의 index.html 이 실제로 바뀌는 것을 눈으로 확인합니다.

💻 [실습 10] Clone — 집 컴퓨터에는 프로젝트가 없다

프로젝트 자체가 없는 컴퓨터에서는 Pull을 할 수 없습니다. 처음 한 번, 통째로 가져오는 것이 Clone 입니다.

Ctrl+Shift+P → Git: Clone 또는 Clone Repository 버튼

> git clone 저장소주소

파일뿐 아니라 지금까지의 커밋 기록까지 통째로 복사됩니다.

🔄 Clone 과 Pull 의 차이

CLONE

프로젝트 없음

처음 가져오기 — 폴더가 새로 생긴다. 딱 한 번.

PULL

프로젝트 있음

최신 내용 가져오기 — 기존 폴더가 갱신된다. 계속.

이제 팀 프로젝트 상황

둘 다 같은 저장소에서 Clone 했습니다. 철수는 올렸고, GitHub는 최신입니다. 영희가 해야 할 것은? → Pull

팀 프로젝트 기본 습관

PULL ← 작업 시작 전, 최신부터 받는다 WORK 코드 작성 STAGE COMMIT PULL ← 올리기 직전 한 번 더 PUSH

팀 개발 사고의 대부분은 첫 줄을 건너뛰는 데서 시작합니다.

왜 Push 전에 다시 Pull 하나요?

내 컴퓨터 A B C + E ← 내가 만든 것 GitHub A B C + D ← 그 사이 팀원이 올린 것

내가 개발하는 동안 팀원이 D를 올렸습니다. 내 것만 밀어 올리면 GitHub의 D와 부딪힙니다.

Pull 로 D를 먼저 받아 A B C D E 를 만든 뒤 Push 합니다.

Conflict — 충돌 맛보기

철수 <h1>안녕하세요 철수입니다.</h1>

영희 <h1>안녕하세요 영희입니다.</h1>

둘이 같은 줄을 고쳤습니다. Git 입장에선 답이 없습니다 — 둘 중 어떤 걸 쓰지?

Git이 망가진 게 아닙니다. 사람에게 골라 달라고 요청하는 것입니다. 해결법은 다음 시간에.

Branch 는 왜 필요한가 (맛보기)

돌아가고 있는 코드를 망가뜨리지 않고 새 기능을 시험하려고 갈래를 냅니다.

단, 오늘은 여기까지. Commit · Push · Pull · Clone 을 정확히 이해한 다음에 Branch로 갑니다.

학생용 핵심 명령어 — 이것만

`git --version`	Git 설치 확인	`git commit -m "메시지"`	버전 기록
`git init`	이 폴더를 Git 저장소로	`git push`	GitHub로 보내기
`git status`	현재 상태 확인	`git pull`	GitHub에서 가져오기
`git add .`	변경 파일 Stage	`git clone 주소`	처음 통째로 가져오기

첫 Push만 git push -u origin main — 이 한 번으로 짝이 정해지면, 이후에는 git push 로 끝납니다.

⚠️ 오늘 실제로 터지는 사고

증상	원인과 처방
Commit 했는데 GitHub에 없다	정상. Push 를 안 했다
`'git'은(는) 내부 또는 외부 명령...`	Git 미설치, 또는 설치 후 VS Code를 안 껐다 켬
`src refspec main does not match`	내 브랜치가 `master`. `git branch -M main`
Commit 버튼이 안 눌린다	Staged가 비었거나 메시지가 비었다 — 둘 다 필요
커밋한 사람이 내가 아니라고 뜬다	`user.email` 불일치. 고치면 다음 커밋부터

확인 문제

① 코드를 수정했다. GitHub에 올리는 기본 순서는? Stage → Commit → Push

② 팀원이 올린 최신 코드를 받고 싶다. Pull

③ 처음 보는 프로젝트를 내 PC로 내려받고 싶다. Clone

④ Commit 했는데 GitHub 웹이 안 바뀐다. 왜? Push를 안 했으니까

⑤ Push의 방향은? 내 컴퓨터 → GitHub

⑥ Pull의 방향은? GitHub → 내 컴퓨터

📊 최종 구조

Working

VS Code 코드 작성

Staging

이번 Commit 대상

Local Repo

내 컴퓨터 Git

Remote

GitHub

→ STAGE→ COMMIT→ PUSH← PULL

코드를 작성하고 → Stage하고 → Commit하고 → Push 한다 다른 사람이 올린 코드는 → Pull 해서 가져온다

마지막으로 이 다섯 개만

Git ≠ GitHub — 프로그램 vs 웹 서비스
Ctrl + S ≠ Commit — 파일 저장 vs 버전 기록
PUSH = Local → GitHub
PULL = GitHub → Local
Clone 은 처음 한 번, Pull 은 그 뒤로 계속

"지금 코드가 어디에 있어?"

수정만 한 상태? → Working Directory Stage 한 상태? → Staging Area Commit 한 상태? → Local Repository GitHub에 올린 상태? → Remote

Git을 잘하는 사람은 명령어를 많이 외운 사람이 아니라,
지금 코드가 어느 단계에 있는지 아는 사람입니다.

Git & GitHub 입문

이 수업이 끝나면 답할 수 있어야 하는 것

여러분도 이미 버전 관리를 해봤습니다

혼자도 이런데, 둘이 하면

그리고 이런 날

버전 관리 = 세이브 포인트

🛠️ Git — 파일의 변경 이력을 관리하는 프로그램

이 사람이 2005년에 만들었습니다

혼자면 몰라도, 넷이면 반드시 터진다

Git으로 내 컴퓨터에서 관리가 된다면,GitHub는 왜 필요할까요?

둘이 파일을 어떻게 나눌까

Git 과 GitHub 는 다른 것입니다

GitHub를 쓰는 다섯 가지 이유

③ 변경 이력 — 이런 게 남습니다

Repository — 이게 저장소 하나입니다

이 두 곳은 같은 곳일까요?

오늘 머릿속에 그릴 단 하나의 그림

VS Code에서 Ctrl + S 를 눌렀습니다.지금 Commit을 한 걸까요?

Commit — 현재 상태를 버전 하나로 기록

Commit 전에 한 단계가 더 있습니다 — Stage

📊 코드가 거쳐 가는 4개의 공간

Commit을 했습니다.GitHub에도 코드가 올라갔을까요?

Push — 밀어낸다

Pull — 당겨온다

한 문장으로

그럼 VS Code는 무슨 역할인가요?

💻 준비물과 확인

💻 최초 딱 한 번 — 나를 등록

💻 [실습 1] 프로젝트 폴더 만들기

지금 Git이 이 프로젝트를관리하고 있을까요?

💻 [실습 2] Git 저장소로 만들기

⭐ git status — 길을 잃으면 여기부터

파일 옆의 U / M

💻 [실습 3] Stage

💻 [실습 4] Commit

💻 [실습 5] GitHub에 Repository 만들기

내 프로젝트와 GitHub는 아직 서로 모릅니다

💻 [실습 6] 첫 Push

💻 [실습 7] 수정 → Commit → Push

💻 [실습 8] GitHub 웹에서 직접 수정

GitHub의 파일이 바뀌었습니다.VS Code도 자동으로 바뀌었을까요?

💻 [실습 9] Pull

💻 [실습 10] Clone — 집 컴퓨터에는 프로젝트가 없다

🔄 Clone 과 Pull 의 차이

이제 팀 프로젝트 상황

팀 프로젝트 기본 습관

왜 Push 전에 다시 Pull 하나요?

Conflict — 충돌 맛보기

Branch 는 왜 필요한가 (맛보기)

학생용 핵심 명령어 — 이것만

⚠️ 오늘 실제로 터지는 사고

확인 문제

📊 최종 구조

마지막으로 이 다섯 개만

"지금 코드가 어디에 있어?"

Git으로 내 컴퓨터에서 관리가 된다면,
GitHub는 왜 필요할까요?

VS Code에서 `Ctrl + S` 를 눌렀습니다.
지금 Commit을 한 걸까요?

Commit을 했습니다.
GitHub에도 코드가 올라갔을까요?

지금 Git이 이 프로젝트를
관리하고 있을까요?

⭐ `git status` — 길을 잃으면 여기부터

GitHub의 파일이 바뀌었습니다.
VS Code도 자동으로 바뀌었을까요?