Astro Vibe Coding 가이드

<Header />                   <!-- 정적 HTML -->
<Counter client:load />       <!-- 즉시 hydrate -->
<Search client:visible />     <!-- 뷰포트 진입 시 -->
<Carousel client:idle />      <!-- idle 시 -->
<Menu client:media="(max-width:768px)" />
<Canvas client:only="react" />

Astro + TypeScript + Tailwind CSS + MDX로 기술 블로그를 만들어줘.
Content Collections, 태그 필터링, 다크 모드, SEO, RSS 피드,
View Transitions, 이미지 최적화(astro:assets) 포함.

src/
├── content/          # Content Collections
│   ├── config.ts
│   └── blog/*.md
├── components/       # .astro, .jsx, .vue, .svelte
├── layouts/
├── pages/            # 파일 기반 라우팅
│   ├── index.astro
│   ├── blog/[slug].astro
│   └── rss.xml.js
└── styles/

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.com',
  integrations: [react(), vue(), mdx(), sitemap()],
  output: 'static',  // 'static' | 'server' | 'hybrid'
});

import { Image } from 'astro:assets';
import hero from '../assets/hero.png';
---
<Image src={hero} alt="히어로" width={800} format="webp" />

---
export const prerender = false; // 이 페이지만 SSR
const user = await getUser(Astro.cookies.get('session'));
if (!user) return Astro.redirect('/login');
---
<h1>환영합니다, {user.name}님</h1>

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(), pubDate: z.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});
export const collections = { blog };

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

// draft 제외, 날짜순 정렬 (타입 자동 추론)
const posts = (await getCollection('blog'))
  .filter((post) => !post.data.draft)
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---

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

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

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(p => ({ params: {slug: p.id}, props: {post: p} }));
}
import { render } from 'astro:content';
const { Content } = await render(Astro.props.post);
---
<Content />

---
import Counter from '../components/Counter.jsx';      // React
import Search from '../components/SearchBox.vue';    // Vue
import Carousel from '../components/Carousel.svelte'; // Svelte
---

<Counter client:load />
<Search client:visible />
<Carousel client:idle />

---
title: "Astro 너무 재밌어"
pubDate: 2024-01-01
---

import Counter from '../../components/Counter.jsx';

# 마크다운 콘텐츠 안에 컴포넌트 삽입

<Counter client:load />

npx astro add vercel   # 어댑터 설치
npx vercel deploy       # Vercel 배포

npx astro add netlify   # Netlify
npx astro add cloudflare # Cloudflare