Week 2 · 컴포넌트와 빌드타임 데이터
Day 9 / 42
포스트 카드 HTML — 더미 데이터로 먼저 만들기
props를 연결하기 전에, 구조부터 확실히 완성합니다
10초 핵심 요약
- 실제 데이터 없이 더미 데이터(가짜 텍스트)로 카드 구조를 먼저 완성합니다.
- 구조가 완벽해진 뒤에만 Day 10에서 진짜 데이터(props)로 교체합니다.
- 클래스 이름은 BEM 규칙으로 지어, 나중에 다른 컴포넌트와 이름이 겹치지 않게 합니다.
01
왜 데이터 연결 없이 먼저 만들까
카드 구조(HTML)와 실제 데이터 연결을 동시에 하면, 뭔가 안 됐을 때 둘 중 어디가 문제인지 알 수 없습니다. 배우가 대사와 동선을 동시에 처음 맞추면 실수가 어디서 났는지 모르는 것과 같습니다. 먼저 대사(구조)만 완벽히 외운 뒤, 그다음 실제 데이터를 연결합니다.
이렇게 하면 오류 지점이 항상 둘 중 하나로 좁혀집니다: "구조가 잘못됐나" 또는 "데이터 연결이 잘못됐나."
02
카드의 뼈대 — 시맨틱 구조 + BEM
포스트 카드 하나는 "글 한 편"이므로 <article>이 적절합니다. 내부는 이미지·제목·요약·날짜로 구성합니다.
<article
class=
"post-card">
<figure
class=
"post-card__thumb">
<img src=
"dummy.jpg" alt=
"">
// REPLACE: props.thumbnail
</figure>
<header>
<h3
class=
"post-card__title">더미 포스트 제목입니다</h3>
// REPLACE: props.title
</header>
<p
class=
"post-card__summary">더미 요약 텍스트입니다.</p>
// REPLACE: props.summary
<footer><time>2026.07.13</time></footer>
// REPLACE: props.date
</article>
실전 적용 — // REPLACE: 이름 주석을 미리 달아두면, Day 10에서 실제 값으로 바꿔치기할 때 Ctrl+F로 REPLACE만 검색해도 빠뜨리는 곳 없이 순서대로 처리할 수 있습니다.
03
클래스명은 왜 이렇게 길까 — BEM
.post-card__title처럼 밑줄 두 개(__)로 이어 쓰는 방식을 BEM이라고 합니다. 이름이 길고 번거로워 보이지만, 다른 컴포넌트의 CSS와 이름이 겹칠 확률을 크게 줄여줍니다.
Block
Block — .post-card, 덩어리 전체
Element
Element — .post-card__title, 덩어리 안의 부품
Modifier
Modifier — .post-card--featured, 특별 버전(강조 카드)
04
오늘의 실습
1src/components/PostCard.astro를 만들고 위 카드 구조를 그대로 붙여넣습니다.
2아무 페이지에서나 이 컴포넌트를 3번 반복 배치해 더미 카드 3개가 어떻게 보이는지 확인합니다.
3Day 6에서 만든 .post-list Grid로 카드 3개를 감싸 목록 형태로 만들어봅니다.
이 습관을 들이세요: 새 컴포넌트를 만들 때마다 "먼저 더미 데이터로 구조 확인 → 문제없으면 그때 실제 데이터 연결" 순서를 지키면, 어디가 문제인지 훨씬 빨리 찾을 수 있습니다.
05
Day 9 완료 체크리스트
더미 포스트 카드 컴포넌트를 만들어 3개 반복 배치해봤다.
각 데이터 교체 예정 자리에 REPLACE 주석을 달았다.
BEM 네이밍(Block/Element/Modifier)의 목적을 설명할 수 있다.
스스로 설명해보기 — 실제 데이터를 연결하기 전에 더미 데이터로 구조부터 완성하는 이유를 설명할 수 있나요?
오늘의 용어
BEM
클래스 이름 짓는 규칙. 이름 충돌을 막아주는 네이밍 방식
Element
덩어리 안의 부품 (예: .card__title)
Modifier
특별판 (예: .card--featured)
더미 데이터
실제 데이터 연결 전, 구조 확인용으로 넣는 가짜 텍스트