학습 목표
- 데이터 흐름 디버깅 워크숍 의 핵심 개념을 안다
- 5 단계 역추적 의 동작을 안다
- 버그가 났을 때 어디부터 봐야 할지 외운다. 4 주 학습의 마무리.
1. 문제
4 주 학습의 마지막 — 실제 버그 시나리오로 디버깅 사고를 종합.
2. 새 도구
5 단계 역추적: ① F12 → ② 서버 콘솔 → ③ Mapper SQL 로그 → ④ DB SELECT → ⑤ 응답 JSON
3. 코드
시나리오 1: "댓글이 화면에 안 떠요"
① F12 Network 탭
→ 요청이 갔는가?
→ 갔다면 응답 Status 는?
→ 가지 않았으면 → JS 코드의 fetch 가 호출됐는지 확인
② 갔다면 서버 콘솔
→ 컨트롤러가 호출됐는가? (로그 출력)
→ 호출됐는데 에러? → 스택 트레이스
③ 컨트롤러 OK 면 Mapper SQL 로그
→ 실제 SQL 이 실행됐는가?
→ 파라미터가 제대로 전달됐는가?
④ SQL 실행됐다면 DB 에서 직접 SELECT
→ 데이터가 진짜 들어갔는가?
→ DB 에는 있는데 응답엔 없으면 → 응답 직렬화 문제
⑤ 마지막 — 응답 JSON 자체
→ DevTools Network → Response 탭
→ 응답에 뭐가 와 있는가?
→ 클라이언트 JS 가 그걸 어떻게 그렸는가?
시나리오 2~5: 로그인 풀림 / 한글 깨짐 / null 데이터 / 권한 오류
각각 같은 5 단계 역추적 적용
4. 정리
- 디버깅 = 흐름도 역추적
- 5 단계 점검 순서
- 한 단계씩 좁혀나감
- v∞ — 4 주 학습의 종착점
5. Before / After
전 차시
4 주 학습의 마지막 — 실제 버그 시나리오로 디버깅 사고를 종합.
이번 차시
버그가 났을 때 어디부터 봐야 할지 외운다. 4 주 학습의 마무리.
학습 확인 체크리스트
- 디버깅 = 흐름도 역추적
- 5 단계 점검 순서
- 한 단계씩 좁혀나감
- v∞ — 4 주 학습의 종착점