Part 3.4 에러 메시지 해석하기: 빨간 글자는 왜 무서울까

중요!! 에러는 적이 아니라 힌트입니다!!

바이브코딩을 하다 보면 LLM이 토해내는 결과 중에 빨간 글씨가 있고 ( 클로드코드는 빨간색에 가까운 주황색일 경우도 있음 ) 터미널을 열으래서 열었더니, 왠 빨간글씨가 또 주욱 있고... 코드는 안 돌아가고..

어떻게 할 지 참 난감합니다. 그냥 누가 이거 해결해줬으면 좋겠는데, '이걸 해결해줘' 라고 프롬프트에 넣어봐도 잘 해결이 안 됩니다. 에러 메시지를 잘 읽지 않은 채로요.

저도 코딩을 처음 배울 때, 에러 메세지가 무서웠습니다. 뭔가 내가 막 잘못한 거 같고 ( 네, 거의 휴먼에러가 대다수입니다 ) 뭔가 잘못 건드렸다간 더 잘못 될 거 같고..

하지만, 괜찮습니다. 에러 메시지는 "여기가 문제야, 이게 원인이야"라고 친절하게 알려주는 힌트입니다. 읽는 법만 알면 디버깅 시간이 절반으로 줄어듭니다.

이번 챕터에서는:

에러 메시지를 어디서 확인하는지
에러 메시지를 어떻게 읽는지
자주 보는 에러들이 무슨 뜻인지
해결 방법을 어떻게 찾는지

알아보겠습니다.

에러 메시지 읽는 법

1. 콘솔 열기: 에러를 확인하는 곳

에러 메시지는 브라우저 개발자 도구의 Console 탭에서 확인합니다.

여는 방법:

Windows/Linux: F12 또는 Ctrl + Shift + I
Mac: Cmd + Option + I
또는: 브라우저에서 우클릭 → "검사" → Console 탭

콘솔에서 보이는 것들:

🔴 빨간색: 에러 (Error) - 크리티컬, 앱이 멈출 수 있음. 고쳐야 함
🟡 노란색: 경고 (Warning) - 당장은 작동는데, 신경 써야 하는 부분
⚪ 흰색/회색: 로그 (Log) - 정보 출력, 문제 아님

빨간색 에러가 떴다면, 그게 해결해야 할 문제입니다.

Cursor 터미널에서도 에러가 뜹니다:

브라우저 콘솔 외에도 Cursor 하단의 터미널에서 에러가 표시될 때가 있습니다.

npm start 실행 중 에러 → 터미널에서 확인
브라우저 화면의 에러 → 브라우저 콘솔에서 확인

2. 에러 메시지의 구조

에러 메시지는 보통 이런 구조입니다:

에러 종류: 에러 설명
    at 함수명 (파일경로:줄번호:칸번호)
    at 함수명 (파일경로:줄번호:칸번호)
    at 함수명 (파일경로:줄번호:칸번호)

실제 예시:

TypeError: Cannot read properties of undefined (reading 'map')
    at ProductList (src/components/ProductList.tsx:15:23)
    at renderWithHooks (react-dom.development.js:14985:18)
    at mountIndeterminateComponent (react-dom.development.js:17811:13)

이걸 분해해보면:

부분	의미
TypeError	에러 종류 (타입 관련 문제)
Cannot read properties of undefined	뭐가 잘못됐는지
(reading 'map')	구체적으로 뭘 하다가 문제가 생겼는지
at ProductList	어느 함수에서 발생했는지
src/components/ProductList.tsx:15:23	파일 경로, 15번째 줄, 23번째 글자 (빌드 파일을 본다면 숫자는 달라질 수 있어요)

핵심만 보는 법:

첫 줄: 무슨 에러인지, 뭐가 문제인지
내 코드가 있는 줄: src/ 로 시작하는 경로 찾기 (node_modules가 아닌 것)
줄 번호: 몇 번째 줄에서 터졌는지

위 예시에서는 ProductList.tsx 파일의 15번째 줄에서 undefined인 것에 .map()을 호출하려다 에러가 났다는 뜻입니다.

3. 스택 트레이스: 에러의 족보

에러 메시지 아래에 줄줄이 나오는 at ... 부분을 **스택 트레이스(Stack Trace)**라고 합니다.

TypeError: Cannot read properties of undefined (reading 'name')
    at UserProfile (src/components/UserProfile.tsx:8:22)      ← 여기서 터짐
    at HomePage (src/pages/HomePage.tsx:25:10)                ← 여기서 호출됨
    at App (src/App.tsx:12:5)                                 ← 여기서 시작됨

스택 트레이스는 **"에러가 터지기까지의 경로"**를 보여줍니다.

맨 위: 실제로 에러가 발생한 위치
아래로 갈수록: 그 코드를 호출한 상위 코드

보는 요령:

맨 위에서 내 코드 찾기 (src/로 시작하는 것)
node_modules/ 경로는 무시 (외부 라이브러리라서 내가 고칠 게 아님)
내 코드 중 가장 위에 있는 파일과 줄 번호 확인

4. 자주 만나는 에러 종류

TypeError: 타입이 맞지 않을 때

"이건 그런 게 아닌데 그렇게 쓰려고 했어"

// Cannot read properties of undefined (reading 'map')
// → undefined인데 .map()을 호출함

const users = undefined;
users.map(u => u.name);  // 💥 에러!

// 해결: 데이터가 있는지 먼저 확인
users?.map(u => u.name);  // 또는
users && users.map(u => u.name);

// Cannot read properties of null (reading 'length')
// → null인데 .length를 읽으려 함

const text = null;
console.log(text.length);  // 💥 에러!

이 에러가 뜨면: 해당 변수가 undefined나 null인 상태에서 뭔가를 하려고 한 것. 데이터가 아직 안 불러와졌거나, 오타가 있거나.

ReferenceError: 존재하지 않는 것을 사용할 때

"그런 건 없는데요?"

// ReferenceError: userName is not defined
// → userName이라는 변수가 정의된 적 없음

console.log(userName);  // 💥 에러! (선언 안 했는데 사용)

// 해결: 변수를 먼저 선언
const userName = "철수";
console.log(userName);

이 에러가 뜨면: 오타이거나, 변수/함수를 선언 안 하고 사용했거나, import를 안 했거나, 입니다.

SyntaxError: 문법이 틀렸을 때

"문법이 잘못됐어요"

// SyntaxError: Unexpected token '}'
// → 괄호, 중괄호, 따옴표 등이 안 맞음

function hello() {
  console.log("hi")
}}  // 💥 } 가 하나 더 있음

// SyntaxError: Unterminated string literal
// → 따옴표를 안 닫음

const message = "안녕하세요;  // 💥 " 가 없음

이 에러가 뜨면: 괄호 짝이 안 맞거나, 따옴표를 안 닫았거나, 콤마/세미콜론이 빠졌거나, 입니다.

404 에러: 찾을 수 없음

"그런 페이지/파일 없는데요?"

GET http://localhost:3000/api/users 404 (Not Found)

흔한 원인:

API 주소 오타
서버가 안 켜져 있음
파일 경로가 잘못됨
해당 API 엔드포인트가 아직 안 만들어짐

500 에러: 서버가 터짐

"서버에서 뭔가 잘못됐어요"

POST http://localhost:3000/api/login 500 (Internal Server Error)

흔한 원인:

서버 코드에 버그가 있음
데이터베이스 연결 실패
환경 변수 설정 안 됨
서버가 처리할 수 없는 데이터를 보냄

404 vs 500:

404: "그런 주소 없어" (주소 문제)
500: "서버가 처리하다 죽었어" (서버 코드 문제)

CORS 에러: 보안 정책 위반

"다른 출처에서 데이터 가져오는 거 막혀있어요"

Access to fetch at 'https://api.example.com' from origin 
'http://localhost:3000' has been blocked by CORS policy

쉽게 말해: 브라우저가 보안상 이유로 다른 도메인의 API 호출을 막은 것.

해결 방향:

서버에서 CORS 설정 추가 -> 이 방법으로 해결하시는게 좋습니다. 밑의 프록시는 좀 더 코딩에 익숙해지면 도전해 보세요
프록시 설정
AI에게 "CORS 에러 해결해줘"라고 요청

5. 에러 해결하는 방법

방법 1: AI에게 에러 메시지 통째로 던지기

가장 빠른 방법입니다. Cursor에서 바로 물어보세요.

좋은 질문 템플릿:

이 에러가 떴어:

[에러 메시지 전체 복사]

이 에러가 왜 생겼는지 설명해주고, 어떻게 고치면 되는지 알려줘.

더 좋은 질문 (맥락 추가):

이 에러가 떴어:

TypeError: Cannot read properties of undefined (reading 'map')
at ProductList (src/components/ProductList.tsx:15:23)

ProductList.tsx 파일에서 상품 목록을 표시하려고 하는데,
API에서 데이터를 가져와서 map으로 돌리는 부분이야.

왜 이런 에러가 나는지, 어떻게 고쳐야 하는지 알려줘.

방법 2: 구글링 기술

에러 메시지를 구글에 검색하면 대부분 해결책이 나옵니다. (하지만 우리는 바이브코더니까, 방법1을 더 추천합니다)

검색 요령:

에러 메시지 핵심만 복사

❌ TypeError: Cannot read properties of undefined (reading 'map') at ProductList (src/components/ProductList.tsx:15:23)

✅ Cannot read properties of undefined (reading 'map')

기술 스택 추가

Cannot read properties of undefined map React

따옴표로 정확히 검색

"Cannot read properties of undefined" React

검색 결과에서 볼 곳:

Stack Overflow: 가장 신뢰할 수 있음, 투표 많은 답변 보기
GitHub Issues: 같은 문제 겪은 사람들의 해결책
공식 문서: 근본적인 해결책

방법 3: console.log로 추적하기

에러가 난 위치 근처에 console.log를 찍어서 데이터를 확인합니다.

function ProductList({ products }) {
  console.log("products 값:", products);  // 이게 뭔지 확인
  console.log("products 타입:", typeof products);
  
  return (
    <ul>
      {products.map(p => <li>{p.name}</li>)}  // 여기서 에러
    </ul>
  );
}

콘솔에서 확인했더니 products가 undefined라면? → props가 안 넘어온 것.

영어 에러 메시지 핵심 단어

영어	의미
undefined	정의되지 않음 (값이 없음)
null	비어있음 (의도적으로 없음)
not defined	선언되지 않음
not a function	함수가 아닌데 함수처럼 호출함
unexpected token	예상치 못한 문자 (문법 오류)
failed to fetch	데이터 가져오기 실패
network error	네트워크 문제
permission denied	권한 없음
timeout	시간 초과

주의사항: 흔한 실수들

실수 1: 에러 메시지 안 읽고 "안 돼요"

❌ "에러 떴어요. 안 돼요."
✅ "TypeError: Cannot read properties of undefined 에러가 
    ProductList.tsx 15번째 줄에서 떴어요."

에러 메시지는 해결의 열쇠입니다. 무시하지 마세요.

실수 2: 스택 트레이스에서 node_modules 보기

at ProductList (src/components/ProductList.tsx:15:23)  ← 이거 보세요
at renderWithHooks (node_modules/react-dom/...)       ← 이건 무시
at mountIndeterminateComponent (node_modules/...)     ← 이것도 무시

node_modules/ 경로는 외부 라이브러리입니다. 내가 고칠 게 아니에요.

실수 3: 경고(Warning)를 에러로 착각

노란색 경고(Warning)는 당장 앱이 멈추진 않습니다. 하지만 무시하면 나중에 문제가 될 수 있으니, 시간 될 때 해결하세요.

⚠️ Warning: Each child in a list should have a unique "key" prop.

이건 당장 터지진 않지만, 성능 문제가 생길 수 있다는 경고입니다.

실수 4: 에러 하나 고쳤는데 다른 에러 나옴

정상입니다! 에러가 여러 개 쌓여있으면, 하나 고치면 다음 에러가 보입니다. 위에서부터 하나씩 해결하세요.

마무리

에러 메시지는 적이 아니라 힌트입니다.

핵심 정리:

콘솔 열기: F12 → Console 탭
에러 구조: 에러 종류 + 설명 + 파일:줄번호
스택 트레이스: 맨 위의 내 코드(src/)가 문제 위치
자주 보는 에러: TypeError(undefined 접근), ReferenceError(없는 것 사용), 404(주소 없음), 500(서버 문제)
해결 방법: AI에게 통째로 물어보기, 구글링, console.log 찍기

에러가 뜨면 당황하지 말고:

에러 메시지 읽기
내 파일과 줄 번호 찾기
AI에게 물어보기

이 습관만 들여도 디버깅 시간이 절반으로 줄어듭니다.

Part 3.4 에러 메시지 해석하기: 빨간 글자는 왜 무서울까