1. 문제

2. 새 도구

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