Ch.24 디버깅 — 에러 메시지 읽는 법

에러를 두려워하지 마라

JS 에러의 4가지 종류를 구분할 수 있다에러 메시지에서 파일, 줄 번호, 원인을 읽을 수 있다AI에게 에러를 효과적으로 설명하는 방법을 안다

빨간 에러 메시지를 보면 패닉?

코드를 실행하면 빨간 글씨가 콘솔에 가득합니다. 하지만 사실 에러는 문제를 해결하라는 친절한 힌트입니다.

에러 메시지를 읽고 원인을 빠르게 찾는 방법은?

에러 메시지는 3가지 정보를 담고 있습니다 — 어디서, 무엇이, 왜. 이것만 읽으면 됩니다.

article

핵심 내용

JS 에러는 4가지로 분류됩니다 이름만 봐도 원인을 추측할 수 있습니다

// SyntaxError — 문법이 틀림
const user = { name: "Kim" age: 25 };
// SyntaxError: Unexpected identifier 'age'
// → 쉼표(,)가 빠짐!

// TypeError — 타입이 맞지 않음
const user = undefined;
console.log(user.name);
// TypeError: Cannot read properties of undefined
// → user가 undefined인데 .name을 접근함

// ReferenceError — 존재하지 않는 변수
console.log(userName);
// ReferenceError: userName is not defined
// → userName을 선언한 적이 없음

가장 흔한 에러 TOP 1 TypeError: Cannot read properties of undefined — API 응답이 아직 안 왔는데 데이터에 접근할 때 발생. 옵셔널 체이닝(?.) 으로 해결: `user?.name`

에러 메시지에는 어디서, 무엇이, 왜 3가지 정보가 들어있습니다

// 실제 에러 메시지 예시
// TypeError: Cannot read properties of undefined (reading 'map')
//   at ProductList (ProductList.tsx:12:25)
//   at renderWithHooks (react-dom.js:1234:18)

// 읽는 법:
// 1. 어디서? → ProductList.tsx 파일, 12번째 줄
// 2. 무엇이? → TypeError (타입 오류)
// 3. 왜?    → undefined에서 .map을 호출함

에러 이름 확인: TypeError? SyntaxError? — 원인 카테고리 파악

메시지 읽기: Cannot read, is not defined 등 — 구체적 원인

파일:줄 확인: 스택 트레이스 첫 줄 — 에러 발생 위치

스택 트레이스 읽는 팁 위에서부터 읽으세요. 첫 번째 줄이 에러 발생 위치, 아래로 갈수록 호출 경로입니다. 내 코드 파일만 보면 됩니다.

에러 메시지 + 코드 컨텍스트 = AI가 정확히 수정해줍니다

바이브 코더 팁 에러 메시지를 읽지 않고 바로 AI에게 던지면 시간이 더 걸립니다. 30초만 투자해 어디서, 무엇이, 왜를 파악하고 물어보세요.

"Cannot read properties of undefined"는 어떤 에러 종류인가?

에러 메시지의 스택 트레이스는 아래에서 위로 읽어야 한다

선언하지 않은 변수를 사용할 때 발생하는 에러는?

key

핵심 용어

📝

SyntaxError

문법 오류. 괄호 안 닫음, 쉼표 누락, 오타

🔴

TypeError

타입 오류. undefined의 속성 접근, 함수가 아닌 것을 호출

❓

ReferenceError

참조 오류. 선언하지 않은 변수 사용

📏

RangeError

범위 오류. 배열 크기 초과, 무한 재귀

📋

에러 메시지 전체

복사 붙여넣기. 요약하지 말 것

💻

해당 코드

에러 발생 파일의 관련 부분

📝

상황 설명

언제 발생? 어떤 동작 후? 항상? 가끔?

🔧

시도한 것

이미 해본 수정이 있다면 함께

edit_note

정리 노트

에러 메시지 핵심 정리

주요 에러 타입

TypeError: 타입이 맞지 않을 때 발생 (undefined의 속성 접근 등)
ReferenceError: 선언되지 않은 변수를 참조할 때 발생
SyntaxError: 문법 오류 — 괄호 누락, 세미콜론 등 코드 구조 문제

에러 읽는 법

에러 메시지: 첫 줄에서 에러 타입과 원인을 확인
스택 트레이스: 에러가 발생한 파일명과 줄 번호를 추적

★

에러 메시지를 그대로 복사해서 검색하면 대부분 해결책을 찾을 수 있습니다.

image

시각 자료

다이어그램: wd-scene-debugging

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작