시리즈: Claude Code 실전 정복 | 5편
작성자: 체리플랜 | 7년차 프론트엔드 개발자
이전 편: Claude Code로 React 컴포넌트 만들기 — AI Diary부터 Movie Log까지
[Claude Code 실전 정복 #4] Claude Code로 React 컴포넌트 만들기 — AI Diary부터 Movie Log까지 실전 (2026)
시리즈: Claude Code 실전 정복 | 4편작성자: 체리플랜 | 7년차 프론트엔드 개발자1편: [설치 + 첫 실행]2편: [VS Code 연동 + 실전 워크플로우]3편: [CLAUDE.md 완전 정복]컴포넌트 하나 만들려고 디자인 고민
cherrycoding0.tistory.com
cherryplan 허브 프로젝트에서 Movie Log 미니앱 만들다가 이런 에러가 떴어요.
TypeError: Cannot read properties of undefined (reading 'map')
at MovieList (MovieList.jsx:24:18)
at renderWithHooks
예전이었으면 이랬을 거예요. 에러 메시지 복사 → 구글 검색 → Stack Overflow 찾기 → 버전이 달라서 적용 안 됨 → 다시 검색. 이 사이클을 30분~1시간씩 반복했겠죠.
Claude Code 쓰고 나서는 달라졌어요. 에러 메시지 그대로 터미널에 붙여넣고 "이 에러 고쳐줘"라고 했더니, 24번째 줄 코드를 직접 열어서 원인을 찾고 수정까지 해줬어요. 걸린 시간 2분이요.
오늘은 이 흐름을 실전 사례 중심으로 정리해볼게요.
"에러 나면 Claude한테 던진다"는 게 실제로 얼마나 효과적인지, 어떻게 던져야 제대로 고쳐주는지까지요.
Claude Code가 버그를 고치는 방식이 뭔데요?
일반 ChatGPT에 에러 물어보면 "이런 경우에는 이렇게 해보세요" 하고 코드 예시를 줘요. 그걸 받아서 내 코드에 적용하는 건 내가 해야 하죠.
Claude Code는 달라요. 터미널에서 실행되면서 내 프로젝트 파일에 직접 접근할 수 있어요. 그래서 에러 메시지를 주면 관련 파일을 직접 열고, 원인 되는 코드를 찾아서 수정까지 해줘요. 내가 할 일은 수정된 결과를 보고 "이게 맞나?" 확인하는 것뿐이에요.
실제로 써보니 이랬어요. 처음엔 "설마 그냥 고쳐주겠어?" 반신반의했는데, 에러 메시지만 넣었는데 파일 경로까지 직접 찾아가서 수정하는 걸 보고 진짜 놀랐어요. 단순 오탈자 버그는 10초도 안 걸려요.
실전 사례 3가지 — 이렇게 던졌더니 이렇게 고쳐줬어요
사례 1. undefined map 에러 (가장 흔한 유형)
에러 메시지
TypeError: Cannot read properties of undefined (reading 'map')
at MovieList (MovieList.jsx:24:18)
Claude Code한테 이렇게 입력했어요
이 에러 고쳐줘:
TypeError: Cannot read properties of undefined (reading 'map')
at MovieList (MovieList.jsx:24:18)
Claude Code가 한 것
MovieList.jsx 파일을 직접 열어서 24번째 줄을 확인했어요. movies.map(...) 으로 쓰여 있었는데, movies가 API 응답 전에 undefined인 상태에서 렌더링되는 게 원인이었어요.
수정 결과:
// 수정 전
{movies.map((movie) => (
<MovieCard key={movie.id} movie={movie} />
))}
// 수정 후
{movies?.map((movie) => (
<MovieCard key={movie.id} movie={movie} />
)) ?? <p>불러오는 중...</p>}
옵셔널 체이닝이랑 폴백 UI까지 한 번에 처리해줬어요.
실제로 써보니 이랬어요. 이 에러는 7년 개발하면서 수백 번 본 에러예요. 원인도 수정 방법도 알고 있는데, 매번 "어디서 터진 거야" 하고 파일 찾는 시간이 아까웠거든요. Claude Code는 그 탐색 시간을 없애줘요.
사례 2. 모듈 import 에러
에러 메시지
Module not found: Error: Can't resolve './components/DiaryEditor'
at ./src/pages/AIDiary.jsx
Claude Code한테 이렇게 입력했어요
이 에러 고쳐줘:
Module not found: Error: Can't resolve './components/DiaryEditor'
Claude Code가 한 것
파일 구조를 직접 스캔해서 DiaryEditor 파일이 실제로 어디 있는지 찾았어요.
components/diary/DiaryEditor.jsx에 있는 걸 확인하고 import 경로를 바로 수정해줬어요.
// 수정 전
import DiaryEditor from './components/DiaryEditor';
// 수정 후
import DiaryEditor from './components/diary/DiaryEditor';
실제로 써보니 이랬어요. 폴더 구조 바꾸고 나서 import 경로 못 따라간 경우예요.
파일이 많아질수록 이런 실수가 자주 생기는데, Claude Code가 프로젝트 파일 구조를 직접 뒤져서 찾아주니까
경로 오타 관련 버그는 거의 신경 쓸 일이 없어졌어요.
사례 3. 콘솔 에러 + 증상 설명 조합
에러 메시지가 딱 안 떨어지는 경우도 있어요. 콘솔엔 에러 없는데 화면에 데이터가 안 뜨는 상황 같은 거요.
이렇게 입력했어요
콘솔 에러는 없는데 MovieLog 페이지에서 영화 목록이 안 뜨고 있어.
useEffect로 API 호출하고 있고, 응답은 오는 것 같은데 화면엔 빈 화면만 나와.
관련 파일 봐줘.
Claude Code가 한 것
MovieLog.jsx 랑 API 호출 훅 파일을 같이 열어서 원인을 찾았어요. API 응답 구조가 { results: [...] } 인데 data 를 그대로 state에 넣어서 배열이 아닌 객체가 저장되고 있었던 게 문제였어요.
// 수정 전
setMovies(data);
// 수정 후
setMovies(data.results);
실제로 써보니 이랬어요. 이 케이스가 제일 신기했어요. 에러 메시지도 없고 증상만 설명했는데, 관련 파일을 다 열어보고 데이터 흐름을 추적해서 원인을 찾더라고요. 개인적으로 이게 Claude Code가 일반 AI 챗봇이랑 다른 핵심 차이라고 생각해요.
더 잘 고쳐주는 입력 방법
에러 메시지만 던지는 것보다, 아래처럼 맥락을 같이 주면 정확도가 확실히 올라가요.
[에러 메시지]
TypeError: Cannot read properties of undefined (reading 'map')
[상황]
Movie Log 페이지에서 TMDB API 호출 후 결과를 렌더링하려는 중
[내가 시도한 것]
movies 초기값을 [] 로 설정해봤는데도 같은 에러
이렇게 입력하면 Claude Code가 관련 파일을 더 정확하게 좁혀서 열어요. 엉뚱한 파일 열고 헤매는 시간이 줄어들어요.
딱 하나만 기억하면 돼요. 에러 메시지 + 어떤 기능에서 났는지 이 두 개만 같이 주면 충분해요.
솔직한 한계
① 처음 보는 라이브러리 에러는 가끔 틀려요
자주 쓰이는 React, Next.js 에러는 거의 정확한데, 덜 알려진 라이브러리 에러는 원인을 잘못 파악하는 경우가 있어요. 수정 결과 꼭 직접 확인해야 해요.
② 수정해줬는데 다른 곳에서 에러가 터지기도 해요
한 파일 고쳤더니 연결된 다른 파일에서 새 에러가 나는 경우가 있어요. 이럴 땐 "방금 수정하고 이 에러 새로 났어" 하고 계속 대화하면 돼요. 맥락이 이어지니까요.
③ 에러 메시지가 너무 짧으면 방향을 못 잡아요
Error: undefined 이런 식으로 정보가 없는 에러는 Claude도 파일 여러 개 열면서 헤매요. 스택 트레이스 전체를 같이 주는 게 훨씬 나아요.
마무리
Claude Code 쓰기 전, 에러 하나 잡는 데 평균 30분~1시간 썼어요.
지금은 에러 메시지 붙여넣고 엔터 치면 2~5분 안에 수정까지 끝나요. cherryplan 프로젝트에서 지난 2주 동안 이 방식으로 처리한 버그가 20개 넘어요. 그 시간을 단순 계산해도 10시간 이상 아낀 거예요.
에러 났을 때 구글부터 열던 습관, Claude Code 쓰고 나서 완전히 바뀌었어요.
다음 포스팅 예고: [Claude Code 실전 정복 #6] Claude Code로 리팩토링하기 — 레거시 코드 정리를 AI한테 맡겨봤더니
#ClaudeCode #버그수정 #바이브코딩 #개발자생산성 #AI코딩 #클로드코드 #에러해결 #프론트엔드개발자 #사이드프로젝트 #개발자ai #ai개발도구 #claude #ReactError #디버깅 #1인개발