스킬캠퍼스
Day 21 · Git, 코드의 타임머신
강의

오늘 끝나면

Git, 코드의 타임머신

  • Git, 코드의 타임머신의 핵심 문제를 한 문장으로 설명한다
  • 오른쪽 실습에서 Git,이 어떻게 움직이는지 관찰한다
  • 다음 강의와 이어지는 한계를 말할 수 있다

실습 미션

add·commit·push·branch — 저장하고, 되돌리고, 갈라지고, 합치고 이 문장이 실제로 무슨 뜻인지 실습에서 한 번 손으로 확인한다.

성공 조건

  • 실습의 기본값을 먼저 관찰
  • 입력값이나 모드를 한 번 이상 바꿔 결과 비교
  • 왜 결과가 바뀌었는지 한 문장으로 설명

개발 · Day 21

Git,
코드의 타임머신

Git은 코드를 저장하고 과거로 되돌리는 도구.
commit은 저장 / branch는 갈래 치는 것 / merge는 합치는 것.
add · commit · push · branch 네 개만 잡으면 끝.

P.01개발 · Day 21

Git = 코드의 스냅샷을 쌓는 타임머신

코드 짜다 보면 “망했다, 어제로 돌리고 싶다”가 매일 옴.

Git은 코드의 스냅샷을 시간순으로 쌓는 것.
매 순간을 사진처럼 찍어둠 / 언제든 그 시점으로 되감김.

파일을 복사해 최종 / 최종_진짜 / 최종_진짜최종 만들던 짓을 Git이 대신함.

흐름은 하나임: 고침 → add → commit → (branch) → merge → push.
이제 네 글자 — add · commit · branch · push — 를 하나씩 깸.

시간순으로 쌓이는 코드 스냅샷
시간순으로 쌓이는 스냅샷
v1첫 화면
commit
v2버튼 추가
commit
v3색 고침
commit
v4버그 수정
commit

언제든 위 어느 시점으로든 되감기 가능

P.02개발 · Day 21

add = 사진에 담을 변경 고르기

add는 이번 스냅샷에 담을 변경을 고르는 것.

파일을 여러 개 고쳐도 전부 담을 필요 없음 / 찍을 것만 고름.
사진 찍기 전 프레임 고르기와 같음.

고른 변경이 모이는 자리가 스테이징(staging) 영역.

git add app.js는 “app.js를 이번 스냅샷에 넣음”.
아직 사진은 안 찍음 / 고르기만 한 단계임.

작업폴더 → (add) → 스테이징
프레임에 담을 변경만 고르기
작업폴더 — 고친 파일들
index.html이번엔 제외
style.cssgit add ↓
app.jsgit add ↓
스테이징 — 사진에 담길 것
style.cssapp.js

아직 셔터(commit) 전 — 고르기만 한 단계

P.03개발 · Day 21

commit = 셔터, 스냅샷 영구 저장

commit은 골라둔 변경을 스냅샷 하나로 영구 저장하는 것.

add가 프레임 고르기였으면 commit은 셔터를 누름.
누르면 히스토리에 동그라미가 하나 쌓임 / 직전 커밋과 선으로 이어짐.

오른쪽에서 직접 해보셈: 파일 고침 → git add → 메시지 적고 git commit.

커밋엔 꼭 메시지를 붙임 — “로그인 버튼 추가”처럼.
나중에 “이때 뭘 했지”를 알려주는 단서가 됨 / 메시지 없는 커밋은 없음.

메시지 붙여 히스토리에 한 칸 쌓기
미니 Git 시뮬레이터
현재 브랜치
main
커밋 수
0
① 작업폴더 — 클릭해 고쳐 보셈
② 스테이징 영역 (0개 대기)
비어 있음 — add 먼저
④ 커밋 히스토리
아직 커밋 없음 — 편집 → add → commit 해보셈
P.04개발 · Day 21

branch = 평행우주에서 따로 실험

branch는 갈래를 쳐 따로 작업할 평행우주를 만드는 것.

새 기능 실험하다 망치면 멀쩡한 코드까지 깨질까 무서움.
그래서 갈래를 쳐 feature 우주를 따로 만들고 거기서 마음껏 부숨.

원래 main 우주는 그대로 멀쩡함 / 그래서 커밋 그래프가 두 줄로 갈라짐.

merge는 갈라진 두 우주를 다시 합치는 것.
잘 됐으면 git merge로 합침 / 실패하면 그 갈래만 버림.
여럿이 각자 갈래에서 일하다 합치는 게 협업의 기본임.

갈래를 쳐 작업하다 merge로 합침
갈래 치고 · 따로 작업 · 다시 합치기
mainfeaturebranchmerge

feature 우주에서 망쳐도 main은 멀쩡 → 잘 되면 merge로 합침

P.05개발 · Day 21

push = 로컬을 원격으로 복사

push는 로컬에 쌓은 커밋을 원격(클라우드)에 복사하는 것.

여기까지 한 건 전부 내 컴퓨터(로컬) 안에서만 일어남 / 컴퓨터 고장 나면 다 날아감.

그래서 git push로 커밋 기록을 통째로 원격(GitHub)에 복사함.
백업도 되고 / 동료가 받아 함께 작업할 수 있음.

push 전 커밋은 원격에서 회색 / push하면 파랑으로 바뀜.
그제서야 진짜 안전하게 공유됨.

Q. git commit과 git push의 차이는?commit로컬에 스냅샷을 저장하는 것 / push는 그 기록을 원격(깃허브)에 올려 백업·공유하는 것. commit만 하면 기록이 내 컴퓨터에만 있음 — 컴퓨터 죽으면 같이 사라짐. push까지 해야 클라우드에 남고 동료도 받아봄.
내 컴퓨터 기록 → 깃허브로 업로드
로컬 → 원격(GitHub)으로 복사
내 컴퓨터
v1 첫 화면
v2 버튼 추가
v3 색 고침
원격(GitHub)
v1 첫 화면
v2 버튼 추가
아직 안 올림

push 전 = 회색 · push 후 = 파랑. push해야 백업·공유됨

3줄 요약

  1. 1add·commit·push·branch — 저장하고, 되돌리고, 갈라지고, 합치고
  2. 2Git, 코드의 타임머신은 코딩 기본 → 인터넷과 웹 → 프론트/백엔드 → 데이터 → 배포 흐름 안의 한 칸이다.
  3. 3개념을 외우는 것보다 입력을 바꾸면 무엇이 달라지는지 보는 것이 우선이다.

완료 전 점검

복습 카드

Git,

add·commit·push·branch — 저장하고, 되돌리고, 갈라지고, 합치고

입력

프로그램이 받아들이는 값이나 사용자 행동

규칙

입력을 처리하는 코드의 절차