Astro로 사이트를 만들다 보면 .astro 파일을 수도 없이 만들게 됩니다. 처음에는 HTML이랑 비슷하니까 감으로 쓰다가, 어느 순간 "이 컴포넌트에 props를 어떻게 넘기지?", "슬롯이 여러 개 필요한데?", "스타일이 자식 컴포넌트까지 먹히질 않네?" 같은 질문이 하나둘 쌓이기 시작하죠. 사실 Astro 컴포넌트는 겉보기엔 단순하지만 파고 들어가면 꽤 많은 게 숨어 있습니다. TypeScript 기반의 Props 타입 시스템, 이름 있는 슬롯과 폴백 콘텐츠, CSS 스코핑과 전역 스타일 제어, 동적 태그까지. 이 글에서
블로그를 운영하다 보면 마크다운 파일이 수십, 수백 개로 늘어나는 건 시간문제입니다. 처음에는 프런트매터에 title이나 date를 성실히 적다가도, 어느 순간 date 포맷을 잘못 쓴다든지, tags를 빠뜨린다든지 하는 실수가 슬슬 나타나기 시작하죠. 문제는 이런 실수가 조용히 사이트에 반영되어 깨진 페이지나 누락된 정보로 이어진다는 겁니다. 😅 Astro의 Content Collections는 바로 이 문제를 해결해 줍니다. 마크다운 파일의 프런트매터를 Zod 스키마로 정의해두면 빌드할 때 잘못된 데이터를 즉시 잡아내고 편집기
Lighthouse로 사이트 성능을 측정해 보면 이미지 때문에 점수가 깎이는 경우가 정말 많은데요. HTTP Archive에 따르면 평균 웹 페이지에서 이미지가 전체 바이트의 절반 가까이를 차지한다고 합니다. 포맷 변환, 리사이징, lazy loading, 반응형 srcset까지 직접 챙기려면 꽤 번거롭죠. Astro는 이런 작업을 프레임워크 차원에서 해결해 줍니다. 별도의 플러그인 없이 <Image />와 <Picture /> 컴포넌트만 쓰면 빌드 시 알아서 처리하거든요. 사실 이 블로그도 Astro로 만들었는데, 이미지 최적화
프론트엔드 프레임워크를 고를 때마다 한숨이 나오시지 않나요? Next.js, Nuxt, SvelteKit, Remix... 선택지가 너무 많아서 오히려 결정이 어려워지는 상황이 흔한데요. 그런데 만약 만들려는 게 블로그, 문서 사이트, 포트폴리오처럼 콘텐츠가 중심인 사이트라면 이야기가 좀 달라집니다. 메타 프레임워크 중에서도 Astro는 꽤 독특한 위치를 차지하고 있거든요. 기본적으로 JavaScript를 아예 보내지 않는다는 과감한 철학, 그리고 React든 Vue든 Svelte든 원하는 UI 프레임워크를 골라 쓸 수 있는 유연함