빨간 글씨가 가득한 화면, 앱이 갑자기 멈추는 상황 — 처음에는 당황스럽지만, 에러 메시지는 사실 '이래서 안 돼요'를 정확히 설명하는 가장 친절한 안내문입니다. 읽는 법만 알면 에러가 무섭지 않습니다.
에러 메시지 구조 읽기
에러 메시지에는 보통 세 가지 정보가 담겨 있습니다: 에러 종류(What), 발생 위치(Where), 원인 힌트(Why). 이 세 가지를 찾는 연습만 해도 디버깅 실력이 확 올라갑니다.
실제 에러 메시지 예시 — 분해해서 읽기
TypeError: Cannot read properties of undefined (reading 'name')
at UserCard (src/components/UserCard.tsx:12:18)
at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
------- 분해해서 읽기 -------
[에러 종류] TypeError
→ 타입이 잘못됐다는 뜻. undefined에서 무언가를 읽으려 했음.
[핵심 메시지] Cannot read properties of undefined (reading 'name')
→ undefined 값에서 .name을 읽으려 했는데 undefined라 불가능함.
→ 즉, user 객체가 undefined인데 user.name을 쓰려 했음.
[발생 위치] src/components/UserCard.tsx:12:18
→ UserCard.tsx 파일, 12번째 줄, 18번째 글자흔히 만나는 에러 유형
- TypeError: 타입이 맞지 않을 때. undefined나 null에서 속성을 읽으려 할 때 자주 나옵니다. 데이터가 아직 안 불러와졌는데 쓰려 할 때 흔합니다.
- ReferenceError: 선언되지 않은 변수를 쓰려 할 때. 오타나 import 누락이 원인인 경우가 많습니다.
- SyntaxError: 코드 문법이 틀렸을 때. 괄호나 따옴표가 안 닫혔거나 쉼표가 빠진 경우입니다.
- 404 Not Found: API 경로가 틀렸거나 해당 데이터가 없을 때 서버에서 반환합니다.
- 500 Internal Server Error: 서버(백엔드) 코드 내부에서 에러가 발생했을 때입니다.
스택 트레이스(Stack Trace) 읽기
에러 메시지 아래에 'at 함수명 (파일명:줄번호)' 형태의 목록이 나옵니다. 이것이 스택 트레이스(Stack Trace)로, 에러가 발생하기까지 거쳐온 함수 호출 경로를 아래에서 위로 보여줍니다. 맨 위가 에러가 실제로 터진 곳이고, 내 파일명이 보이는 줄이 가장 중요합니다. node_modules/로 시작하는 줄은 라이브러리 내부라 내가 고칠 곳이 아닙니다.
AI에게 에러를 전달하는 최고의 방법
AI에게 에러 주는 표준 지시문 (복사해서 쓰세요)
다음 에러가 발생했습니다. 원인을 분석하고 수정 방법을 알려주세요.
[에러 메시지 전체]
여기에 에러 메시지를 그대로 붙여넣기
[발생 상황]
어떤 행동을 했을 때 에러가 났는지 설명
(예: 로그인 버튼을 클릭했을 때, 페이지를 새로고침했을 때)
[관련 코드]
에러가 발생한 파일의 해당 부분을 붙여넣기
(파일명과 줄 번호도 함께 알려주세요)
[현재 예상하는 원인]
본인이 생각하는 원인이 있다면 적어주세요 (없어도 됩니다)브라우저 콘솔에서 에러 찾기
프론트엔드 에러는 브라우저 개발자 도구의 'Console' 탭에서 봅니다. F12(맥: Cmd+Option+I)를 누르고 'Console'을 클릭하면 빨간 에러가 보입니다. 서버(백엔드) 에러는 터미널에서 서버를 실행한 창에 출력됩니다.
에러 메시지를 구글이나 AI에 검색할 때, 파일 경로나 변수 이름처럼 내 코드에 특정된 부분은 빼고 에러 종류와 핵심 메시지만 검색하면 더 좋은 결과가 나옵니다. 예: 'TypeError Cannot read properties of undefined react' 처럼요.
바이브코딩할 때: 에러가 나면 당황하지 말고 에러 메시지 전체를 드래그해서 복사한 뒤, AI에게 위의 표준 지시문 형식으로 붙여 넣으세요. 에러를 '읽는' 게 아니라 '전달하는' 것만 잘해도 대부분의 문제가 해결됩니다.