Week 6 · 완성도 다지기와 배포 Day 41 / 42

전체 사이트 최종 통합 테스트

Day 14, 21에서 했던 부분 시운전이 아니라, 이번엔 Week 1~6 전부입니다

10초 핵심 요약

Day 21의 6단계 검증 루틴을, 오늘은 Week 4~6에서 새로 생긴 부분(디버깅, 데이터 통신, 배포)까지 포함해 확장합니다.
혼자 다 보기보다 실제 사용자처럼 처음부터 끝까지 클릭해보는 것이 핵심입니다.
여기서 걸리는 문제는 42일 전체에서 마지막으로 고칠 수 있는 기회입니다.

부분 시운전 세 번, 이제 전체 시운전 한 번

Day 14는 Week 2(컴포넌트+데이터)만, Day 21은 Week 1~3(레이아웃까지)만 점검했습니다. 오늘은 거기에 Week 4의 디버깅 습관, Week 5의 실시간 데이터 통신, Week 6의 접근성·SEO·배포까지 사이트 전체를 하나의 흐름으로 놓고 점검합니다.

확장된 통합 테스트 루틴

1허브 페이지(index.html)부터 시작해, 실제 방문자처럼 링크를 따라 목록 → 상세 → 되돌아가기까지 클릭해봅니다.

2F12 콘솔(Day 22)을 열어둔 채 돌아다니며 빨간 오류가 하나라도 뜨는지 확인합니다.

3Week 5의 fetch 기반 카드 렌더링이 로딩/성공/실패/재시도(Day 35) 4상태 모두 실제로 동작하는지 확인합니다.

4Tab 키만으로 주요 페이지를 이동해보고(Day 37), 이미지에 alt가 빠짐없이 있는지 확인합니다.

5아무 페이지나 열어 title/description이 그 페이지 내용과 맞는지 확인합니다(Day 38).

6PageSpeed Insights로 다시 측정해 Day 40의 표에 마지막 값을 채웁니다.

막히면 어디서 원인을 찾을지

Day 27에서 배운 "HTML → props/데이터 → CSS → JS" 우선순위를 오늘도 그대로 씁니다. 다만 오늘은 여기에 하나가 더 붙습니다: 네트워크(fetch/API)가 관련된 문제라면 Day 35의 res.ok 체크와 재시도 로직부터 봅니다.

안 될 때 확인하세요 로컬에서는 잘 되는데 실제 배포 주소에서만 API가 실패한다면, functions/api/* 폴더가 실제로 배포에 포함됐는지(Day 39) 먼저 확인하세요.

Day 41 완료 체크리스트

허브부터 상세 페이지까지 실제 방문자처럼 전체 흐름을 클릭해봤다.

콘솔 오류 없이 fetch 4상태(로딩/성공/실패/재시도)가 모두 동작한다.

키보드 내비게이션, alt 텍스트, title/description을 최종 확인했다.

PageSpeed Insights 최종 점수를 기록했다.

오늘 확인/수정한 내용을 git commit (필요하면 push)까지 실제로 했다.

스스로 설명해보기 — 오늘 발견한 문제가 있다면, 그 원인이 HTML/데이터/CSS/JS 중 어디였는지 말할 수 있나요?