Git & GitHub 강의

2회차 · 01 / 11

복습

1회차 핵심 복습

지난 시간 배운 핵심 명령어를 빠르게 정리합니다

git init

폴더를 Git 저장소로 초기화

git status

현재 변경 상태 확인

git add .

모든 변경 파일 스테이징

git commit -m

메시지와 함께 버전 저장

git push

GitHub에 올리기

git branch

브랜치 목록 확인

git switch -c

브랜치 생성 후 이동

git merge

브랜치 병합

git log --oneline

한 줄 커밋 이력 확인

💡

헷갈릴 때는 git status 를 먼저 입력하세요. 현재 상황과 다음에 해야 할 것을 친절하게 알려줍니다.

Git & GitHub 강의 · 2회차

2회차 · 02 / 11

복습 퀴즈

1회차 복습 퀴즈

빈칸에 맞는 명령어를 골라보세요. 틀려도 괜찮아요!

Q1. 현재 폴더를 Git 저장소로 만들려면?

Q2. 변경된 모든 파일을 Staging Area에 올리는 명령어는?

Q3. 새 브랜치를 만들면서 바로 이동하는 명령어는?

Q4. 로컬 커밋을 GitHub에 올리는 명령어는?

Git & GitHub 강의 · 2회차

2회차 · 03 / 11

VSCode

VSCode 활용하기

터미널 대신 VSCode에서 Git을 시각적으로 관리합니다

Git Bash vs VSCode

🖥

Git Bash (터미널)

명령어를 직접 입력. 정확하지만 외워야 함

💙

VSCode (GUI)

클릭으로 add·commit·push 가능. 변경 파일을 색으로 표시

VSCode Git 패널 사용법

1

소스 제어 패널 열기

왼쪽 분기 아이콘 클릭 (Ctrl+Shift+G)

2

변경 파일 확인

M=수정, U=새파일 — 목록에 표시됨

3

+ 버튼으로 add

파일 옆 + 클릭 → Staged Changes로 이동

4

메시지 입력 후 커밋

상단 입력창에 메시지 → Commit 버튼

5

Push

... 메뉴 → Push 또는 하단 상태바 클릭

💡

VSCode 하단 터미널(Ctrl+`)을 열면 Git Bash 명령어도 함께 사용할 수 있어요. GUI와 터미널을 함께 쓰면 가장 효율적입니다.

Git & GitHub 강의 · 2회차

2회차 · 04 / 11

확장 앱

Git 관련 확장 앱 설치

VSCode를 더 강력하게 만들어주는 Git 확장 프로그램을 설치합니다

추천 확장 프로그램

🔍

GitLens

각 코드 줄마다 누가, 언제 수정했는지 표시. 커밋 히스토리를 시각적으로 탐색

📊

Git Graph

브랜치 흐름을 그래프로 시각화. 복잡한 브랜치 구조를 한눈에 파악

📜

Git History

파일별 변경 이력을 타임라인으로 확인. 특정 버전 비교 및 복원

🚫

.gitignore Generator

Git에 올리지 않을 파일 목록 자동 생성. node_modules, .env 등 자동 제외

💡

설치 방법: VSCode 왼쪽 확장 아이콘(Ctrl+Shift+X) → 검색창에 이름 입력 → Install 클릭

Git & GitHub 강의 · 2회차

2회차 · 05 / 11

바이브코딩

바이브코딩으로 앱 만들어서 Push하기

AI와 함께 앱을 만들고 GitHub에 올리는 전체 흐름을 실습합니다

① AI 활용

바이브코딩

Claude·Cursor로 코드 생성

→

② 저장

add · commit

버전 기록

→

③ 공개

git push

GitHub에 올리기

바이브코딩 도구

🤖

Claude / ChatGPT

요구사항을 말로 설명하면 코드 생성

⚡

Cursor / Windsurf

VSCode 기반 AI 코딩 에디터

실습 순서

1

AI로 간단한 앱 생성

예: 할 일 목록 앱, 계산기, 날씨 앱

2

VSCode에서 파일 저장

생성된 코드를 프로젝트 폴더에 저장

3

add → commit → push

GitHub 레포에 올리기

# AI로 만든 앱을 GitHub에 올리는 흐름 $ git add . $ git commit -m "AI로 할 일 목록 앱 생성" $ git push

Git & GitHub 강의 · 2회차

2회차 · 06 / 11

브랜치 활용

브랜치 활용 — 수정하고 합치기

실제 개발 흐름처럼 브랜치로 기능을 추가하고 main에 합칩니다

실습 시나리오

1

main 브랜치 확인

현재 main에서 시작. 안정된 상태 유지

2

새 기능 브랜치 생성

git switch -c add-feature

3

기능 추가 후 커밋

코드 수정 → add → commit

4

main으로 돌아와 merge

git switch main → git merge add-feature

5

브랜치 삭제 후 push

git branch -d add-feature → git push

터미널 흐름

$ git switch -c add-feature Switched to a new branch 'add-feature' $ git add . && git commit -m "기능 추가" $ git switch main $ git merge add-feature $ git branch -d add-feature && git push

💡

기능 하나 = 브랜치 하나 원칙! 나중에 문제가 생겼을 때 해당 브랜치만 되돌리면 됩니다.

Git & GitHub 강의 · 2회차

2회차 · 07 / 11

직접 해보기

브랜치 활용 실습

switch -c → 파일 수정 → commit → main으로 복귀 → merge → push 전체 흐름을 체험하세요

힌트: git branch switch -c 파일 수정 add & commit switch main git merge branch -d git push

MINGW64main

main 브랜치에 커밋이 있는 상태로 시작합니다!💡 git branch 로 현재 상태 확인 후 git switch -c add-feature 로 시작하세요

$ ~/my-project (main)

학습 진행도

브랜치 확인 브랜치 생성 파일 수정 커밋 main 복귀 merge 브랜치 삭제 push

Git & GitHub 강의 · 2회차

2회차 · 08 / 11

충돌 해결

충돌 해결 연습하기

같은 파일을 두 브랜치에서 수정했을 때 생기는 충돌을 해결합니다

⚠️ 충돌 발생 시 파일 모습

<<<<<<< HEAD

main 브랜치의 내용

=======

feature 브랜치의 내용

>>>>>>> feature

✅ 해결 후 파일 모습

원하는 내용만 남기고

충돌 표시 기호를 모두 삭제

# 그 다음:

git add .

git commit -m "충돌 해결"

충돌 해결 단계

1

충돌 파일 확인

git status → "both modified" 표시된 파일 확인

2

파일 열어서 직접 수정

<<<, ===, >>> 기호 제거 후 원하는 내용만 남기기. VSCode는 Accept Current/Incoming 버튼 제공

3

수정 후 다시 커밋

git add . → git commit -m "충돌 해결"

⚠️

충돌은 실수가 아닙니다! 협업에서 자연스럽게 발생하는 상황이에요. <<<, ===, >>> 기호만 찾아서 정리하면 됩니다.

Git & GitHub 강의 · 2회차

2회차 · 09 / 11

직접 해보기

충돌 해결 실습

충돌이 발생한 파일을 직접 편집해서 해결해보세요

아래는 main과 feature 브랜치가 같은 줄을 수정해서 충돌이 발생한 상황이에요. 어떻게 해결할지 선택해보세요.

<<<<<<< HEAD (main 브랜치) 제목: 나의 프로젝트 v1 ======= 제목: 나의 프로젝트 v2 (기능 추가) >>>>>>> feature 작성자: 홍길동

어떻게 해결할까요?

학습 진행도

해결 방법 선택 git add . git commit git log 확인

Git & GitHub 강의 · 2회차

2회차 · 10 / 11

배포

배포하기 — GitHub Pages

GitHub에 올린 파일을 무료로 웹사이트로 공개하는 방법을 익힙니다

내 컴퓨터

HTML 파일

index.html 작성

git push

→

GitHub

레포지토리

파일 업로드

Pages 설정

→

인터넷

웹사이트 공개

누구나 접속 가능

GitHub Pages 설정

1

레포 Settings 열기

GitHub 레포 상단 Settings 탭 클릭

2

Pages 메뉴 선택

왼쪽 사이드바에서 Pages 클릭

3

Branch 설정

Deploy from a branch → main → /(root) → Save

4

배포 완료 확인

1~2분 후: 아이디.github.io/레포명

배포 후 활용

🔗

링크 공유

SNS, 이메일, README에 URL 공유

🔄

자동 업데이트

push할 때마다 사이트가 자동 갱신

📁

index.html 필수

루트 폴더에 index.html 이 있어야 연결됨

🎉

GitHub Pages는 완전 무료! 포트폴리오, 강의 자료, 바이브코딩 결과물을 이력서처럼 활용할 수 있어요.

Git & GitHub 강의 · 2회차

2회차 · 11 / 11

마무리

Git & GitHub 강의 마무리

2회차에 걸쳐 배운 내용을 한눈에 정리합니다

1회차 핵심

git init

저장소 초기화

git add → commit

버전 기록

git push

GitHub에 올리기

git switch -c

브랜치 만들기

git merge

브랜치 합치기

2회차 핵심

VSCode + GitLens

시각적 Git 관리

바이브코딩 → push

AI 코드를 GitHub에

브랜치 → merge → push

기능별 브랜치 운영

충돌 해결 → commit

협업 충돌 처리

GitHub Pages

무료 웹 배포

🚀

이제 Git과 GitHub의 핵심 흐름을 모두 익혔어요! 앞으로는 강의 자료, 바이브코딩 결과물, 포트폴리오를 GitHub로 관리하고 공개해보세요.

Git & GitHub 강의 · 2회차 완료 전체 완료 🎉