Week 4 · 통합 점검과 디버깅
Day 25 / 42
빌드 데이터 오류 디버깅 — 3증상 대응표
에러 메시지 없이 조용히 실패하는, props·라우팅 특유의 버그
10초 핵심 요약
- props/데이터 오류는 에러 메시지가 없을 때가 많습니다. Console도 조용합니다. 그래서 더 헷갈립니다.
- 증상 3가지 → 원인이 정확히 대응됩니다: undefined 그대로 보임=props 오타, 페이지 자체가 없음=params 이름 불일치, 일부만 안 나옴=스프레드/조건 로직 오류.
- 진단 도구는 F12 Elements와 console.log(Astro.props)뿐입니다.
01
왜 이 버그는 유독 무섭게 느껴질까
JS 오류는 Console에 시끄럽게 빨간 줄로 알려줍니다. 하지만 props 오류는 다릅니다. 이름을 잘못 써도 아무 경고 없이 그냥 조용히 undefined가 됩니다(Day 8). "이상 없어 보이는데 왜 안 나오지?"라는 느낌이 든다면 이 부류의 오류의 전형적인 신호입니다. 이렇게 에러 메시지 없이 조용히 실패하는 것을 무음 실패라고 부릅니다.
02
3증상 대응표
| 증상 | 원인 | 확인 방법 |
|---|
| 화면에 "undefined"가 그대로 보임 | props 이름 오타 (Day 8) | console.log(Astro.props)로 실제 값 확인 |
| 그 페이지 자체가 404 (아예 안 만들어짐) | getStaticPaths의 params 키 이름과 파일명 대괄호가 불일치 (Day 12) | 파일명 [slug].astro와 params: { slug } 철자 대조 |
| 목록에서 카드 몇 개만 이상하게 나옴 | .map()의 스프레드 누락 또는 조건 렌더링 로직 오류 (Day 10, 13) | 해당 카드의 더미 데이터 값과 {...post} 표기 확인 |
03
AI에게 버그를 정확히 의뢰하는 법
"안 돼요"라고만 말하면 AI도 원인을 못 찾습니다. 아래 버그 보고서 5요소를 채워서 물어보세요.
"[증상] 카드 3개 중 2번째만 제목이 undefined로 나와요.
[코드] <여기에 해당 컴포넌트 코드 붙여넣기>
[Console] 빨간 오류 없음.
[시도한 것] console.log(Astro.props)를 찍어보니 2번째 데이터에 title 키가 titel로 오타나 있었어요.
[원인 추측] 더미 데이터의 키 이름이 잘못된 것 같아요."
"원인 추측"까지 스스로 써보는 게 핵심입니다. 이게 되면 Day 28의 "자력 해결" 기준을 충족한 것입니다.
04
Day 25 완료 체크리스트
3증상 대응표를 보지 않고 말할 수 있다.
props/라우팅 오류 3가지를 의도적으로 재현하고 복구해봤다.
안 될 때 확인하세요
진단 도구는 딱 2개, F12 Elements와 console.log입니다. 에러 메시지를 찾으려 하지 마세요 — 애초에 나오지 않습니다.
스스로 설명해보기 — props/라우팅 오류가 '무음 실패'로 불리는 이유를 설명할 수 있나요?
오늘의 용어
무음 실패(silent failure)
에러 메시지 없이 조용히 실패하는 것
버그 보고서 5요소
증상+코드+Console+시도한 것+원인 추측 (AI 의뢰 템플릿)