Astro 5+ 로 모던 개발자 블로그 만들기

Astro는 콘텐츠 중심의 웹사이트를 구축하기에 가장 이상적인 웹 프레임워크 중 하나입니다. 이번 글에서는 Astro의 핵심 장점과 Content Collections를 통한 블로그 설정 방법을 알아봅니다.

Astro의 주요 특징

Astro의 가장 큰 특징은 Zero JS by default 입니다. 기본적으로 서버 측에서 빠르게 HTML을 렌더링하고, 필요할 때만 부분 클라이언트 컴포넌트(Islands Architecture)를 로드합니다.

// src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
  }),
});

export const collections = { blog };

Content Collections 가 주는 이점

Content Collections를 사용하면 프론트매터(Frontmatter)의 필드가 올바른 형식인지 TypeScript로 컴파일 타임에 즉시 검증할 수 있습니다.

타입 안전성: pubDate가 날짜 객체인지, title이 문자열인지 자동으로 타입 체크
쉽고 유연한 로더: glob 로더를 사용하여 프로젝트 내 원하는 디렉토리의 Markdown 글을 가져옴
렌더링 편의성: render(post) 함수 하나로 Markdown을 Astro 컴포넌트로 손쉽게 파싱

간단한 포스트 조회 예시

---
import { getCollection, render } from 'astro:content';

const posts = await getCollection('blog');
---

<ul>
  {posts.map(post => (
    <li>
      <a href={`/blog/${post.id}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

Astro와 함께 빠르고 즐거운 블로깅 환경을 구축해보세요!