읽고, 고치고, 커밋까지 | Claude와 첫 대화

Overview

작은 Todo 앱에서 Claude에게 프로젝트를 설명하게 하고, 파일 하나를 골라 수정한 뒤, 잘못된 결과를 Rewind로 되돌리고 Git 커밋으로 남깁니다. 다섯 번의 대화를 따라가며 Claude가 코드를 읽고 바꾸는 기본 흐름을 익힙니다.

학습 목표

• Claude가 실제 파일을 읽고 프로젝트를 설명하는 과정을 관찰합니다.
• @로 답변 범위를 특정 파일로 좁힙니다.
• 파일을 수정하고 Rewind로 Claude의 편집을 되돌립니다.
• 확정한 변경을 Git에 커밋하고 Rewind와 Git의 역할을 구분합니다.

시작하기 전 확인사항

• Claude Code 설치·로그인 완료 (claude --version 으로 확인)
• VS Code 또는 시스템 터미널 사용 가능

다섯 번의 대화로 개발 흐름 익히기

실습 환경 준비

이번 실습에서는 강의에서 제공하는 Todo 앱 저장소를 복제해 사용합니다.

VS Code를 열고 Welcome 탭에서 Clone Git Repository...를 클릭합니다. 상단 입력창에 다음 URL을 붙여넣고 Enter를 누릅니다.

https://github.com/toy-crane/todo-tutorial.git

저장 위치를 고르고 복제가 끝나면 저장소 폴더를 엽니다. Ctrl+`로 통합 터미널을 열고 실습 시작 브랜치로 전환한 뒤 의존성을 설치합니다.

git checkout ch02-02
bun install

마지막으로 VS Code 통합 터미널에서 Claude Code를 실행합니다.

claude

전체 흐름 먼저 보기

두 번의 읽기 요청으로 프로젝트를 파악하고, 파일을 수정한 뒤 Rewind로 잘못된 편집을 되돌립니다. 확인을 마친 변경은 Git에 커밋합니다.

Step 1: 프로젝트가 무엇인지 묻기

Claude Code 입력창에 다음을 입력하고 Enter를 누릅니다.

이 프로젝트가 뭐하는 프로젝트야?

Claude는 README.md, package.json, 주요 소스 파일 중 필요한 파일을 읽고 확인한 내용을 바탕으로 답합니다. 터미널에서 Claude가 어떤 파일을 여는지도 확인할 수 있습니다.

Chapter 1에서 개념으로 살펴본 Tool Use가 여기서 실제로 동작합니다. 파일 읽기는 별도 승인 요청 없이 진행됩니다.

Step 2: @로 파일 지정하기

전체를 훑었으니 이번에는 한 파일에 집중합니다.

@app/page.tsx 파일이 하는 일을 설명해줘

@를 입력한 뒤 파일 이름을 쓰면 일치하는 파일 목록이 나타납니다. app/page.tsx를 선택하면 Claude가 해당 파일을 읽고 답변에 활용합니다. @는 답변 범위를 강제로 제한하는 기능이 아니라, 꼭 확인할 파일을 명시하는 방법입니다.

답변에서 컴포넌트의 역할과 데이터 흐름을 확인합니다. 설명이 부족하다면 궁금한 부분을 이어서 질문합니다.

Step 3: README.md 수정하기

기본 권한 모드에서는 Claude가 파일을 수정하기 전에 승인을 요청합니다. Rewind로 잘못된 지시를 복구하는 과정을 연습하기 위해, 이번에는 <본인 이름>을 바꾸지 않고 그대로 입력합니다.

README.md의 Contributors 섹션 맨 아래에 "<본인 이름> - Frontend Developer" 한 줄을 추가해줘

권한 요청에서 이번 파일 수정만 승인합니다. 수정이 끝나면 변경 전후를 비교한 diff가 나타납니다. 추가된 줄은 초록색, 삭제된 줄은 빨간색으로 표시됩니다.

Step 4: 커밋 전에 Rewind로 되돌리기

Claude Code는 사용자가 지시를 보낼 때마다 Checkpoint(체크포인트)를 만들고, 파일 편집 도구가 변경하기 전 상태를 기록합니다. Rewind를 열면 이 지점 중 하나를 골라 코드나 대화를 되돌릴 수 있습니다.

Step 3의 diff를 확인하면 <본인 이름>이라는 Placeholder가 그대로 들어가 있습니다. Claude가 잘못 수정한 것이 아니라, 사용자가 잘못된 지시를 보낸 상황입니다. 파일을 고치기 직전으로 돌아가 이름을 바꿔 다시 요청합니다.

다음 순서로 잘못된 지시와 파일 변경을 함께 되돌립니다.

1. Esc를 빠르게 두 번 누르거나 /rewind를 실행합니다.
2. <본인 이름>을 추가한 지시를 선택합니다.
3. Restore code and conversation을 선택합니다.

Restore code and conversation은 지시와 파일 변경을 함께 되돌립니다. 대화는 유지하고 파일만 되돌리려면 Restore code를 선택합니다.

선택했던 프롬프트가 입력창에 돌아오면 <본인 이름>을 자신의 이름으로 바꿔 다시 보냅니다. 이름이 홍길동이라면 다음과 같이 고칩니다.

README.md의 Contributors 섹션 맨 아래에 "홍길동 - Frontend Developer" 한 줄만 추가해줘

직전 지점만 고를 필요는 없습니다. 여러 단계를 진행한 뒤 처음 지시가 잘못됐다고 판단했다면, 그 지시 직전의 Checkpoint를 골라 한 번에 돌아갈 수 있습니다.

Rewind는 Claude가 파일 편집 도구로 만든 변경을 작업 중에 빠르게 되돌릴 때 씁니다. Bash 명령이 바꾼 파일과 Git 이력은 추적하지 않으므로, 확정한 변경은 Git으로 관리합니다.

Step 5: 확정한 변경을 Git 이력에 남기기

원하는 결과를 확인했으면 변경을 Git 이력에 남깁니다.

README.md 변경만 확인하고, 변경 내용에 맞는 메시지로 커밋해줘

Claude는 변경 내용을 확인한 뒤 README.md를 Stage에 올리고 커밋 명령을 실행합니다. 권한 요청이 나타날 때마다 명령과 대상 파일을 확인한 뒤 이번 명령만 승인합니다.

! git show --stat --oneline -1

a1b2c3d docs: add contributor to README
 README.md | 1 +

입력창 맨 앞에 !를 붙이면 Claude에게 자연어로 요청하지 않고 셸 명령을 직접 실행합니다. 짧은 상태 확인에 유용합니다.

다섯 번의 대화로 프로젝트 이해부터 파일 수정·실수 복구·Git 커밋까지 끝났습니다.

핵심 포인트 정리

다섯 단계에서 다음 개발 흐름을 연습했습니다.

1. 파일 읽기: Claude가 실제 프로젝트 파일을 근거로 답하는지 확인합니다.
2. 파일 지정: @로 Claude가 꼭 읽어야 할 파일을 명시합니다.
3. 수정 검토: 수정할 파일을 제한하고, 권한 요청과 diff에서 변경 내용을 확인합니다.
4. 잘못된 지시 복구: Rewind로 대화와 파일을 함께 되돌립니다. Bash 명령과 Git 이력은 별도로 관리합니다.
5. 커밋 확인: 검토한 파일만 커밋하고 git show로 결과를 확인합니다.

Claude가 파일을 읽고 수정하더라도, 변경 범위를 정하고 결과가 맞는지 판단하는 일은 사람이 맡습니다.

FAQ

이어서 배울 내용

이번 실습에서는 하나의 세션에서 파일을 읽고 수정한 뒤 커밋했습니다. 다음 레슨에서는 이전 세션을 다시 열고, 작업 상황에 맞게 권한 모드를 바꾸는 방법을 익힙니다.

다음 세션과 권한 모드에서 다음 내용을 다룹니다.

• 세션 관리: --continue와 --resume으로 이전 세션을 다시 열고, /clear와 /compact를 구분합니다.
• 권한 모드: Shift+Tab으로 작업 상황에 맞는 권한 모드를 선택합니다.