#astro

정적 사이트에서 "3시간 전" 같은 상대 시각은 빌드 순간에 굳어 시간이 흐를수록 거짓이 된다. 원본 시각은 time 요소의 datetime 속성에 실어 보내고 표시는 보는 순간 클라이언트가 다시 계산하는 패턴 — 폴백을 남기는 progressive enhancement 방식과 트레이드오프까지, 이 블로그의 실제 구현으로 정리한다.

Astro에서 CSS는 컴포넌트 안에 그냥 쓰면 자동으로 격리되고, 출력은 순수 CSS로 남는다. scoped가 기본값이라는 철학, 전역으로 나가는 문(is:global·:global), define:vars로 서버 값을 스타일에 넘기는 법, 런타임 CSS-in-JS와 상성이 나쁜 이유, 그리고 번들 순서라는 함정까지 — Astro의 스타일링이 React 계열과 어떻게 다른지 정리한다.

GitHub Pages에 Astro로 직접 지은 블로그를 velog와 항목별로 비교했다. 직접 구축이 실제로 주는 것(디자인·읽기 경험·기능의 제어권)과 구조적으로 포기하는 것(독자 유입·통계·편의), 그리고 그 격차를 좁히는 현실적 보완책을 정리한다.

뉴스레터도 알고리즘도 없이 새 글을 독자에게 알리는 가장 오래된 방법, RSS. 정적 블로그와 RSS가 왜 잘 맞는지 짚고, @astrojs/rss로 피드 엔드포인트를 실제 코드로 만들어본다.

SSG는 요청이 올 때마다 페이지를 만드는 대신, 빌드 때 HTML을 미리 다 찍어두는 방식이다. SSR·CSR과 뭐가 다른지 정리하고, Astro가 왜 기본을 SSG로 잡는지까지 짚는다.

페이지 전체를 자바스크립트로 되살리는 대신, 상호작용이 필요한 조각만 섬처럼 띄우는 Astro의 아일랜드 아키텍처. client:* 지시어의 의미부터 섬 사이 상태 공유까지 정리한다.

마크다운 폴더를 스키마가 붙은 타입 안전한 데이터로 바꾸는 Astro Content Collection. 컬렉션 정의부터 목록·상세 페이지 렌더링까지 블로그 한 채를 통째로 만들어본다.