Week 4 · 통합 점검과 디버깅
Day 21 / 42
Week 1~3 통합 테스트 — 1차 완성본
지금까지 만든 모든 걸 하나로 합쳐 검증합니다
10초 핵심 요약
- Header + PostCard + Sidebar + 목록/상세 페이지 + 반응형, 전부 합쳐서 검증합니다.
- 6단계 검증 루틴(메인 → 상세 → Console → 모바일 → PageSpeed)을 처음부터 끝까지 수행합니다.
- 1차 완성 기준은 "동작 여부"입니다. 디자인 완성도를 다듬는 건 나중 몫입니다.
01
왜 "완성도"가 아니라 "동작 여부"부터 볼까
건물을 지을 때 벽지 색깔부터 고민하지 않습니다. 먼저 물이 새지 않는지, 전기가 들어오는지, 문이 잘 열리는지부터 확인합니다. 오늘은 그 골조 검사입니다. 예쁘게 다듬는 건 나중 몫입니다.
02
6단계 검증 루틴
1메인 페이지 — 카드 목록 정상 출력 (Day 9~10)
2상세 페이지 — 개별 글 내용 정상 출력, 링크 이동 정상 (Day 12~13)
3Header/Sidebar — 모든 페이지에서 정상 렌더링 (Day 17~18)
4F12 Console — 빨간 오류 없음
5모바일(768px 이하) — 레이아웃 확인 (Day 20)
6PageSpeed Insights 점수 기록
pagespeed.web.dev에 배포된 사이트 주소를 넣고 모바일 점수를 확인하세요. 정적 사이트는 서버가 매 요청마다 뭔가를 계산하지 않고 이미 완성된 파일을 그대로 내려주므로(Day 1), 다른 방식보다 점수가 잘 나오는 경우가 많습니다. 지금 나온 점수를 오늘의
기준값(baseline)으로 기록해두고, 나중에 최적화한 뒤 다시 측정해 비교합니다.
03
Day 21 완료 체크리스트
6단계 검증 루틴을 순서대로 전부 수행했다.
PageSpeed 모바일 점수를 기록해뒀다.
막힌 단계가 있다면 무엇인지 메모해뒀다.
안 될 때 확인하세요
6단계 중 하나라도 안 되면 지금 당장 완벽히 고치려 하지 마세요. 어느 단계에서 막혔는지만 메모해두고 넘어가세요. Week 4가 통째로 디버깅을 다루는 주간입니다.
스스로 설명해보기 — 6단계 중 막힌 단계가 있다면, 그 원인을 어느 Day에서 다시 찾아봐야 할지 짚을 수 있나요?
오늘의 용어
PageSpeed Insights
구글이 제공하는 사이트 성능 측정 도구
기준값(baseline)
나중에 개선 효과를 비교하기 위해 미리 기록해두는 현재 상태