Week 2 · 컴포넌트와 빌드타임 데이터 Day 14 / 42

Week 2 통합 테스트

부품 하나하나가 아니라, 전체가 함께 굴러가는지 봅니다

부품별 검사 vs 시운전

자동차 공장에서는 엔진, 바퀴, 브레이크를 각각 따로 검사한 뒤에도 반드시 완성차를 실제로 몰아보는 시운전을 합니다. 부품 각각은 멀쩡해도, 조립 과정에서 배선이 꼬이거나 부품끼리 안 맞을 수 있기 때문입니다. 오늘이 그 시운전입니다.

1목록 페이지(index.astro)에서 더미 배열 5개를 .map()으로 PostCard에 뿌립니다 (Day 10).

2각 카드를 클릭하면 해당 글의 상세 페이지로 이동하도록 [slug].astro를 연결합니다 (Day 12).

3더미 데이터 중 하나는 summary를 비워서, 목록에서 그 카드만 요약이 빠지는지 확인합니다 (Day 13).

4썸네일 없는 더미 데이터를 하나 추가해 fallback 배경이 제대로 뜨는지 확인합니다 (Day 11).

카드가 아예 안 보일 때 .map() 안에서 {...post} 스프레드를 빠뜨렸는지 먼저 확인합니다 (Day 10에서 가장 흔한 실수).

클릭해도 상세 페이지로 안 갈 때 [slug].astro의 getStaticPaths()에서 params 키 이름이 파일명의 대괄호 이름과 정확히 일치하는지 확인합니다 (Day 12).

목록 페이지에서 카드 5개가 각각 다른 데이터로 렌더링된다.

카드 클릭 시 해당 글의 상세 페이지로 이동한다.

요약/썸네일이 없는 데이터도 화면이 깨지지 않고 자연스럽게 처리된다.

지금까지 만든 폴더를 통째로 복사해 따로 보관해두면, 나중에 뭔가 잘못됐을 때 이 시점으로 돌아올 수 있습니다. Day 39에서 배울 Git이 정확히 이 역할을 훨씬 편하게 자동으로 해주는 도구입니다.

스스로 설명해보기 — 오늘 만든 미니 블로그에서 안 되는 부분이 있다면, 그 원인이 Day 9~13 중 어느 개념이었는지 짚을 수 있나요?