통합 요약노트
Ch.24 디버깅 — 에러 메시지 읽는 법
에러 종류, 개발자 도구, React 디버깅 실전
이 챕터의 내용
에러를 두려워하지 마라
에러 메시지는 3가지 정보를 담고 있습니다 — 어디서, 무엇이, 왜. 이것만 읽으면 됩니다.
JS 에러는 4가지로 분류됩니다 이름만 봐도 원인을 추측할 수 있습니다
에러 메시지에는 어디서, 무엇이, 왜 3가지 정보가 들어있습니다
에러 메시지 + 코드 컨텍스트 = AI가 정확히 수정해줍니다
브라우저 개발자 도구
DevTools 3대장 — Console(로그), Elements(HTML/CSS), Network(API). 이 3개만 알면 대부분의 문제를 해결할 수 있습니다.
console.log 말고도 table, group, warn이 있습니다
Elements 패널에서 HTML과 CSS를 실시간으로 바꿀 수 있습니다
API 요청이 실패하면 Network 패널에서 원인을 찾습니다
React 디버깅 실전
React 에러는 패턴이 정해져 있습니다. 대표 에러 3가지와 디버깅 체크리스트를 알면 빠르게 해결할 수 있습니다.
React 에러의 80%는 이 3가지 패턴입니다
React DevTools로 props와 state를 실시간 확인합니다
문제 → 재현 → 원인 → 수정 → 검증 체계적 디버깅 프로세스입니다
핵심 용어 모음
SyntaxError
문법 오류. 괄호 안 닫음, 쉼표 누락, 오타
TypeError
타입 오류. undefined의 속성 접근, 함수가 아닌 것을 호출
ReferenceError
참조 오류. 선언하지 않은 변수 사용
RangeError
범위 오류. 배열 크기 초과, 무한 재귀
에러 메시지 전체
복사 붙여넣기. 요약하지 말 것
해당 코드
에러 발생 파일의 관련 부분
상황 설명
언제 발생? 어떤 동작 후? 항상? 가끔?
시도한 것
이미 해본 수정이 있다면 함께
요소 검사
우클릭 → 검사(Inspect). 해당 HTML로 바로 이동
CSS 실시간 수정
Styles 패널에서 값을 바꾸면 즉시 반영. 새로고침하면 원복
Computed 탭
최종 적용된 CSS 값 확인. 우선순위 문제 해결에 유용
강제 상태
:hover, :active 등 상태를 강제 적용해서 스타일 확인
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기