화면 전체를 한 번에 만들지 않고, 부품 단위로 쪼갭니다
레고로 성을 만들 때, 벽돌 하나하나를 매번 새로 설계하지 않습니다. 정해진 규격의 블록을 반복해서 조립할 뿐입니다. 웹페이지도 같습니다 — 헤더, 사이드바, 포스트 카드는 각각 독립된 블록이고, 페이지는 이 블록들을 배치한 결과물입니다.
"이 페이지에 무엇을 넣을까"가 아니라 "이 화면은 어떤 블록들의 조합인가"로 질문을 바꾸면, 코드가 훨씬 정리됩니다.
이미 완성 (Week 2) — 글 하나를 요약해 보여주는 블록
카테고리 목록, 최근 글 등을 보여주는 블록 (Day 17)
사이트 이름, 메뉴, 모바일 햄버거 메뉴 (Day 18)
이 세 블록을 Day 19에서 grid-template-areas로 한 페이지에 배치하면, 실제 블로그와 거의 같은 구조가 완성됩니다.
모든 것을 컴포넌트로 쪼갤 필요는 없습니다. 판단 기준은 하나, 재사용성입니다: 이 덩어리가 다른 페이지에서도 똑같이(또는 데이터만 바꿔서) 쓰일까?
| 예시 | 컴포넌트로 분리? |
|---|---|
| 포스트 카드 — 목록/추천/검색결과 등 여러 곳에 반복 등장 | 분리한다 |
| 이 페이지에만 있는 특별한 안내 문구 한 줄 | 분리하지 않고 그 페이지에 그대로 둔다 |