Astro 튜토리얼
2024. 1. 23.
tutorial astro guide
Astro 튜토리얼
Astro는 빠른 정적 사이트를 만들기 위한 모던 프레임워크입니다.
Astro란?
Astro는 콘텐츠 중심의 웹사이트를 만들기 위한 올인원 웹 프레임워크입니다.
주요 특징
- 제로 JS 기본: 기본적으로 JavaScript를 클라이언트에 전송하지 않습니다
- 컴포넌트 아일랜드: 필요한 곳에만 인터랙티브 컴포넌트를 추가합니다
- 다양한 프레임워크 지원: React, Vue, Svelte 등을 함께 사용할 수 있습니다
시작하기
프로젝트 생성
npm create astro@latest
개발 서버 실행
npm run dev
페이지 라우팅
src/pages/ 폴더에 파일을 만들면 자동으로 라우팅됩니다.
컴포넌트 만들기
.astro 파일로 컴포넌트를 만들 수 있습니다.
---
// 프론트매터 (서버 사이드 JavaScript)
const name = "World";
---
<h1>Hello, {name}!</h1>
다음 단계
- 레이아웃 만들기
- 스타일링 추가하기
- 배포하기