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>

다음 단계

  • 레이아웃 만들기
  • 스타일링 추가하기
  • 배포하기