본문으로 건너뛰기
웹 개발 기초집LESSON 08

Git으로 변경 이력 저장하기

난이도입문
예상 시간25분
선수지식이전 강의

8강. Git으로 변경 이력 저장하기

이번 강의의 결과물은 포트폴리오 HTML 작업을 검토하고 의도한 파일만 하나의 커밋으로 저장한 Git 기록입니다.

1. 이번 강의에서 해결할 문제

파일을 계속 덮어쓰면 언제 무엇을 바꾸었는지 알기 어렵고, 문제가 생겼을 때 비교할 기준도 없습니다. 이번 저장소는 이미 Git으로 초기화되어 있으므로 새로 git init하지 않고 현재 변경을 안전하게 하나의 스냅샷으로 저장합니다.

학습 목표

  • 파일을 계속 덮어쓰면 언제 무엇을 바꾸었는지 알기 어렵고, 문제가 생겼을 때 비교할 기준도 없습니다. 이번 저장소는 이미 Git으로 초기화되어 있으므로 새로 git init하지 않고 현재 변경을 안전하게 하나의 스냅샷으로 저장합니다.
  • 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

2. 핵심 개념

작업 트리 ── git add ──> 스테이징 영역 ── git commit ──> 저장소 이력
  • 작업 트리: 지금 편집 중인 실제 파일 상태
  • 스테이징 영역: 다음 커밋에 포함하기로 선택한 상태
  • 커밋: 선택한 변경을 메시지와 함께 저장한 스냅샷
  • git status: 세 영역 사이의 상태 확인
  • git diff: 아직 스테이징하지 않은 내용 확인
  • git diff --staged: 다음 커밋에 들어갈 내용 확인
  • git log: 저장된 커밋 기록 확인

Git의 공식 입문 문서도 init으로 저장소를 만든 뒤 add로 인덱스를 준비하고 commit으로 영구 기록하는 흐름을 설명합니다. Git 공식 튜토리얼

3. 코드 예시

실행 위치: D:\WebProject\StartBook\dev-foundations

cd D:\WebProject\StartBook\dev-foundations
git status
git diff

포트폴리오 파일만 커밋하려는 경우 실제 존재하는 파일을 지정합니다.

git add web-basics/portfolio/index.html
git add web-basics/portfolio/about.html
git diff --staged

스테이징 결과가 의도와 다르면 커밋 전에 되돌릴 수 있습니다.

git restore --staged web-basics/portfolio/about.html

다시 포함한 뒤 커밋합니다.

git add web-basics/portfolio/about.html
git commit -m "feat: add semantic portfolio foundation"
git log --oneline -5
git status

4. 코드가 동작하는 이유

  1. status는 파일을 바꾸지 않고 현재 상태를 보여 줍니다.
  2. diff는 작업 트리와 스테이징 영역의 차이를 보여 줍니다.
  3. add는 파일을 이동하는 명령이 아니라 현재 내용을 다음 커밋 후보로 기록합니다.
  4. diff --staged는 스테이징 영역과 마지막 커밋을 비교합니다.
  5. commit은 스테이징된 내용만 새 커밋으로 저장합니다.
  6. 커밋 뒤 파일을 다시 수정하면 그 수정은 다음 커밋을 위한 새 변경으로 남습니다.

커밋 메시지는 HTML 수정보다 feat: add semantic portfolio foundation처럼 변경의 목적을 설명하는 편이 기록을 찾기 쉽습니다.

5. 자주 하는 실수

  • git add .부터 실행해 검토하지 않은 파일까지 포함함
  • git diff만 보고 스테이징된 변경은 확인하지 않음
  • 서로 관계없는 여러 작업을 한 커밋에 넣음
  • savecommit을 같은 개념으로 생각함
  • 오류를 고치기 위해 무조건 강제 삭제나 reset --hard를 사용함
  • 비밀번호, 토큰, 환경 설정 파일을 커밋함

6. 짧은 실습 과제

  1. git status에서 변경 파일을 세 종류로 나눠 적습니다: 수정됨, 새 파일, 삭제됨.
  2. git diff로 자신의 HTML 변경을 검토합니다.
  3. 커밋할 파일을 경로로 지정해 git add합니다.
  4. git diff --staged에서 예상한 파일과 내용만 들어 있는지 확인합니다.
  5. 변경 목적을 설명하는 메시지로 커밋합니다.
  6. git log --oneline -5git status로 결과를 확인합니다.

완료 기준은 커밋 ID가 생성되고, 커밋에 포함된 파일을 설명할 수 있으며, 남아 있는 변경이 있다면 그 이유를 알고 있는 것입니다.

7. 이해 점검 질문 3개

  1. 작업 트리와 스테이징 영역은 어떻게 다른가요?
  2. git add 뒤 커밋 전에 git diff --staged를 확인해야 하는 이유는 무엇인가요?
  3. 파일을 저장했지만 git status에 변경으로 표시되는 이유는 무엇인가요?

핵심 요약

  • 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
  • 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
  • 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.
MINI QUIZ

Git으로 변경 이력 저장하기 미니 퀴즈

선택 즉시 정답과 해설을 확인할 수 있습니다. 결과는 이 브라우저에만 저장됩니다.

0 / 2
  1. 문제 1“Git으로 변경 이력 저장하기”에서 다음 단계로 넘어가기 전에 확인할 핵심은 무엇인가요?
  2. 문제 2“Git으로 변경 이력 저장하기” 실습에서 결과를 확인할 때 적용할 설명은 무엇인가요?
LESSON STATUS

학습을 마쳤나요?

직접 실습과 점검 질문까지 확인한 뒤 완료로 표시하세요.

8강. Git으로 변경 이력 저장하기 미완료 상태