Astro로 개발 블로그 만들기

Astro를 선택한 이유

Astro는 정적 사이트 생성기 중에서도 섬(Island) 아키텍처로 독보적인 성능을 제공합니다.

핵심 장점

• Zero JS by default: 기본적으로 JavaScript를 클라이언트에 보내지 않음
• Content Collections: 타입 안전한 콘텐츠 관리
• Framework Agnostic: React, Vue, Svelte 모두 함께 사용 가능

프로젝트 구조

src/
├── content/
│   ├── blog/
│   └── docs/
├── components/
├── layouts/
└── pages/

Content Collections 설정

// 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(),
    pubDate: z.coerce.date(),
    category: z.string(),
  }),
});

export const collections = { blog };

마무리

Astro의 Content Collections API를 사용하면 마크다운 파일을 완전히 타입 안전하게 관리할 수 있습니다.