Astro 프레임워크
개요
Astro는 기본적으로 클라이언트에 제로 자바스크립트를 전송하는 웹 프레임워크입니다. React, Vue, Svelte 등 여러 프론트엔드 프레임워크를 동일한 프로젝트에서 지원하는 컴포넌트 기반 아키텍처를 제공합니다.
프로세스
1. 프로젝트 설정
npm create astro@latest
# 템플릿 선택 (블로그, 문서, 포트폴리오 등)
# 의존성 설치
2. 페이지 생성
- 페이지는
src/pages/에 위치 - 파일 기반 라우팅
[param]구문을 사용한 동적 경로 지원
3. 컴포넌트
src/components/에 재사용 가능한 컴포넌트 생성- 지원되는 모든 프레임워크 사용 가능 (--- astro/react/vue/svelte ---)
- Nano Stores로 상태 공유
4. 데이터 및 콘텐츠
- 타입 안전한 마크다운/MDX를 위한 콘텐츠 컬렉션 사용
- getStaticPaths로 빌드 타임에 데이터 가져오기
- 데이터베이스, API, CMS 연결
5. 배포
- Vercel, Netlify, Cloudflare Pages 또는 어댑터에 배포
npm run build로 빌드output: 'server'를 통해 필요 시 SSR 사용 가능
예시
- 블로그: 콘텐츠 컬렉션 + 마크다운 + RSS 피드
- 랜딩 페이지: 정적 생성 + 부분 하이드레이션
- 문서 사이트: Starlight 테마 통합
- 전자상거래: SSR + 데이터베이스 + 결제 통합
제한 사항
- 매우 인터랙티브한 앱에는 적합하지 않음 (대신 Next.js 사용)
- Nano Stores 없이 클라이언트 측 상태 관리 제한적
- SSR은 복잡성을 추가하므로 필요할 때만 사용
- 일부 React 라이브러리가 섬 아키텍처와 잘 호환되지 않음