이 장의 내용 · 7
바이브코딩을 하다 보면 빨간 글씨를 정말 자주 만납니다. 처음엔 겁이 나지만 걱정하지 마세요.
19.1에러는 이렇게 생겼습니다
TypeError: Cannot read properties of undefined (reading 'title')
at CohortCard (page.tsx:42:18)
at ...길고 복잡해 보여도, 볼 곳은 세 군데뿐입니다.
19.2세 군데만 보세요
1. 종류: 맨 앞의 TypeError. 어떤 유형의 문제인지 알려 줍니다. 2. 내용: Cannot read properties of undefined (reading 'title'). "비어 있는(undefined) 것에서 title을 꺼내려 했다"는 뜻입니다. 데이터가 아직 안 왔거나, 이름이 틀렸을 가능성이 큽니다. 3. 위치: page.tsx:42:18. page.tsx 파일의 42번째 줄, 18번째 글자입니다. 아래로 이어지는 at 목록 중에서 내가 만든 파일 이름을 찾으세요. node_modules처럼 남이 만든 코드는 대부분 건너뛰어도 됩니다.
19.3어디서 확인하나요?
- 터미널1장: npm run dev를 실행한 창입니다. 서버 쪽 에러와 빌드 에러가 여기에 나옵니다.
- 브라우저 콘솔: 화면에서 F12(맥은 Cmd + Option + I)를 누르고 Console 탭을 엽니다. 화면 쪽 에러가 여기에 나옵니다.
- 네트워크 탭: 같은 개발자 도구의 Network 탭입니다. API 요청과 응답 번호(15장15장 참고)를 볼 수 있습니다.
화면이 하얗게 나오는데 아무 설명이 없다면, 이 세 곳을 차례로 열어 보세요.
19.4자주 보는 에러 몇 가지
- Module not found: 파일이나 패키지를 못 찾았습니다. 경로에 오타가 있거나 npm install을 안 했을 때 납니다.
- is not defined: 만들지 않은 이름을 썼습니다. 오타를 먼저 의심하세요.
- 404, 500: 페이지나 API 문제입니다. 응답 번호로 어느 쪽 문제인지 가늠합니다.
19.5자주 하는 실수 세 가지
- 에러 없이 "안 돼요"만: AI도 사람도 에러 전문이 없으면 추측할 수밖에 없습니다.
- 여러 곳을 한꺼번에 수정: 무엇 때문에 고쳐졌는지(또는 망가졌는지) 알 수 없게 됩니다. 한 번에 하나씩 고치세요.
- 읽지 않고 새로고침만: 같은 에러는 같은 이유로 다시 납니다.
19.6AI에게 이렇게 말해 보세요
- "이 에러 전문이야. 원인과 해결법 알려 줘" (에러를 통째로 붙여 넣기)
- "방금 로그인 버튼을 눌렀더니 이 에러가 났어" (무엇을 하다가 났는지 함께)
- “고친 다음, 같은 에러가 다시 안 나게 테스트도 추가해 줘”
19.7시리즈를 마치며
터미널과 Claude Code로 시작해 CLAUDE.md와 PRD, JSON과 MCP와 Skills, Git과 GitHub, Next.js와 Supabase, 배포와 도메인, 그리고 에러 읽는 법까지 19장을 함께 왔습니다. 하나하나는 작은 개념이지만, 모두 모이면 "AI와 함께 서비스를 만들고 세상에 내놓는" 전체 흐름이 됩니다.
여기까지 따라오셨다면, "코드를 몰라서 못 만든다"는 말은 이제 반만 맞습니다. 나머지 반은 직접 만들어 보면서 채워집니다. 머릿속에만 있던 서비스, 이제 AI와 함께 만들어 보세요.
혼자 하기 막막하다면 바이브공장장에서 함께 만들어요. 2주 동안 아이디어 하나를 실제로 배포되는 서비스로 완성합니다.
— 19장 끝 —