기존 코드 편집하기

프로젝트를 정확하게 수정해요

⏱ 예상 ~7분

01 · 읽기

새 파일을 만드는 건 멋지지만, 실제 개발 대부분은 기존 코드를 편집하는 일 이에요. 앱에 기능 추가하기, 버그 고치기, 디자인 바꾸기, 함수 리팩토링하기.

여기서 Claude Code가 진짜 빛나요. 전체 프로젝트를 읽을 수 있기 때문에 컨텍스트를 이해해요. footer 를 추가해 달라고 하면 어떤 HTML 구조가 있는지 알아요. 스타일을 바꿔달라고 하면 어떤 CSS 파일을 수정해야 할지 알아요.

Claude 는 맨바닥부터 시작하지 않아요 — 외과 수술하듯 딱 수정이 필요한 부분만 바꾸고 나머지는 건드리지 않아요.

💡 상상해 봐요집에 방 하나를 더 짓겠다고 시공사를 부른다고 상상해 봐요. 별로인 시공사는 그냥 아무 벽이나 부술 수 있어요. 좋은 시공사는 도면을 보고, 구조를 이해하고, 딱 맞는 자리에 방을 추가해요. Claude Code 는 좋은 시공사예요.

지난 강의에서 만든 HTML 에 Claude 한테 footer 를 추가해 달라고 해요. 뭘 넣을지 명확히 말해요.

index.html 에 footer 추가해 줘. copyright 2024 랑 GitHub 로 연결되는 링크 하나 넣어줘

이제 Claude 한테 CSS 를 수정해 달라고 해요. 이건 정확한 변경이에요 — Claude 는 관련된 스타일 규칙만 업데이트해야 해요.

내비게이션 바를 sticky 로 바꿔서 스크롤할 때 상단에 고정되게 해줘

이제 Level 4 에서 배운 도구를 써요 — git diff. Claude가 정확히 뭘 바꿨는지 보여줘요. 초록색은 추가, 빨간색은 삭제예요.

git diff

이게 핵심 습관이에요: commit 전에 변경을 항상 검토하기. Claude 는 강력하지만 완벽하지 않아요. 항상 이렇게 해야 해요: - diff 를 읽어서 뭐가 바뀌었는지 이해하기 - 브라우저에서 변경을 테스트하거나 코드를 실행해 보기 - 만족하면 commit

git diff 는 가장 좋은 친구예요. 한 줄씩 뭐가 추가, 삭제, 변경됐는지 알려줘요.

핵심 정리

Claude가 코드를 편집한 후, 어떤 명령어가 정확히 뭐가 바뀌었는지 알려줘요?

Commit 전에 Claude가 정확히 어떤 줄을 바꿨는지 보려면 git ___ 를 실행해요.

⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.

※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.