Astro로 정적 사이트 만들기

Published: at 오후 04:20

Astro로 정적 사이트 만들기

정적 사이트 생성기(Static Site Generator, SSG)는 개발자들 사이에서 점점 더 인기를 얻고 있습니다. 빠르고 가벼운 웹사이트를 만들 수 있기 때문이죠. 그중에서도 주목받고 있는 Astro에 대해 알아보겠습니다.

Astro란?

Astro는 React, Svelte, Vue, Preact 등의 프레임워크를 지원하는 정적 사이트 생성기입니다. 정적 마크업 기반으로 작동하여 빠른 페이지 로딩 속도를 제공하며, 서버 렌더링과 클라이언트 렌더링을 모두 지원합니다.

Astro의 주요 특징은 다음과 같습니다.

Astro 시작하기

Astro 프로젝트를 시작하는 방법은 매우 간단합니다. 다음 명령어로 새 프로젝트를 생성할 수 있습니다.

npm create astro@latest

프롬프트에 따라 프로젝트 이름과 템플릿을 선택하면 Astro 프로젝트가 생성됩니다. 이제 개발 서버를 실행해 보겠습니다.

cd my-astro-project
npm run dev

개발 서버가 실행되면 http://localhost:3000에서 Astro 프로젝트를 확인할 수 있습니다.

Astro 활용하기

Astro는 정적 사이트 생성 외에도 다양한 기능을 제공합니다.

1. 컴포넌트 사용하기

Astro에서는 React, Svelte, Vue 등의 컴포넌트를 손쉽게 사용할 수 있습니다. 컴포넌트 파일을 만들고 페이지에 불러와 사용하면 됩니다.

---
import MyComponent from '../components/MyComponent.astro';
---

<html>
  <body>
    <MyComponent />
  </body>
</html>

2. 데이터 가져오기

Astro는 Markdown, JSON, YAML 등 다양한 데이터 소스에서 데이터를 가져올 수 있습니다. 이를 이용해 블로그나 포트폴리오 사이트를 만들 수 있습니다.

---
const posts = await Astro.glob('../pages/posts/*.md');
---

<ul>
  {posts.map((post) => (
  <li><a href="{post.url}">{post.frontmatter.title}</a></li>
  ))}
</ul>

3. 성능 최적화

Astro는 기본적으로 정적 사이트 생성 방식을 사용하여 빠른 페이지 로딩 속도를 제공합니다. 또한 이미지 최적화, 코드 스플리팅, 자동 prefetch 등의 기능을 통해 추가적인 성능 최적화를 할 수 있습니다.

마치며

Astro는 빠르고 가벼운 정적 사이트를 만들 수 있는 강력한 도구입니다. 다양한 프레임워크를 지원하고, 간단한 설정으로 프로젝트를 시작할 수 있는 것이 장점이죠.

Astro를 활용하면 개발 생산성을 높이고 우수한 사용자 경험을 제공할 수 있는 웹사이트를 만들 수 있습니다. 관심 있다면 한번 시도해 보시는 것은 어떨까요?