개발중 에러 로그를 읽고 디버깅 하는 방법

🐛 에러는 성장의 기회다

초보 개발자가 가장 많이 겪는 고통 중 하나는 바로 에러 메시지를 읽지 않고 무서워하는 것입니다. 하지만 에러 메시지는 단순한 경고가 아닙니다. 문제의 원인, 위치, 해결 실마리를 알려주는 힌트입니다.

이 글에서는 에러 로그를 **어떻게 읽고, 어떻게 접근해야 하는지**를 알려드립니다.

📌 에러 로그가 알려주는 3가지

• 무엇이 잘못되었는가 (에러 타입)
• 어디서 문제가 발생했는가 (파일/라인)
• 왜 그런 문제가 생겼는가 (설명 및 스택)

📄 자바스크립트 에러 예시

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
  at renderList (App.js:24)
  at App.js:10

이 로그는 다음을 말해줍니다:

• 에러 종류: TypeError
• 문제 설명: undefined의 'map' 속성을 읽을 수 없음
• 발생 위치: App.js 파일의 24번째 줄

이 경우 someArray.map(...)에서 someArray가 undefined인 상황입니다. console.log로 값부터 출력해보는 습관이 중요합니다.

⚠️ React 에러 예시

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

이건 치명적인 에러는 아니지만, 렌더링 성능에 영향을 줄 수 있는 경고입니다.

해결 방법: 리스트를 출력할 때 key를 반드시 설정하세요.

{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

🧩 Python 에러 예시

File "main.py", line 3, in <module>
    print(name.upper())
AttributeError: 'NoneType' object has no attribute 'upper'

Python은 특히 **에러 종류와 설명이 친절**합니다.

• 문제: name이 None인데 .upper() 호출
• 원인: name 변수가 할당되지 않았거나 null 값

항상 type()과 print()로 변수 상태부터 확인하세요.

🔍 디버깅 루틴 5단계

1. 1️⃣ 에러 로그를 정독한다 (무시 금지!)
2. 2️⃣ 문제 위치의 코드를 분석한다
3. 3️⃣ console.log / print로 변수 상태 확인
4. 4️⃣ 비슷한 이슈를 구글링 (StackOverflow 활용)
5. 5️⃣ 작게 나눠서 테스트한다 (함수 단위로)

숙련된 개발자는 에러를 두려워하지 않고 디버깅 루틴에 익숙합니다.

🧰 디버깅 도구 추천

• Chrome DevTools – JS 디버깅의 핵심
• VS Code 디버깅 기능 – Breakpoint, Call Stack 추적
• React Developer Tools – 컴포넌트 상태 분석
• Python: pdb – CLI 기반 디버거

개발 언어와 환경에 따라 디버깅 도구는 필수입니다. 단순 console.log에서 한 단계 성장할 수 있게 도와줍니다.

📚 에러 로그는 나만의 학습 자료

해결한 에러는 반드시 기록해두세요. “에러 해결 모음 Notion”이나 “GitHub Discussions”, TIL 형식으로 정리하면 나중에 다시 마주쳤을 때 빠르게 해결할 수 있습니다.

🎯 마무리 – 에러는 ‘성장의 지도’다

에러는 실패가 아니라 문제가 정확히 어디 있는지 알려주는 안내문입니다.

처음에는 낯설 수 있지만, 에러를 읽고 원인을 분석하고 해결할 수 있는 능력은 개발자의 핵심 역량입니다.

오늘부터는 에러 메시지를 무서워하지 마세요. 차근차근 읽고, 기록하고, 해결해 나가면 분명 실력이 쌓입니다.

🐞 도움이 되셨다면 댓글이나 공유 부탁드립니다!

다음 글에서는 “개발 면접 준비 전략 – 기술 질문, 프로젝트 발표, CS 정리”을 다룰 예정입니다.