Astro(웹 프레임워크)

<colbgcolor=#ff5d01><colcolor=#fff> Astro
개발	Fred K. Schott외 300명[1]
종류	웹 프레임워크
출시	2022년 8월 10일[2]
언어	JavaScript, Astro
버전	4.0.4
라이선스	MIT 라이선스
링크

1. 개요

2. 상세

2.1. 2.0

• 콘텐츠 컬렉션
• 하이브리드 렌더링
• 오류 오버레이 재설계
• HMR(Hot Module Reloading) 개선

2.2. 3.0

• View Transitions API를 자체 지원하는 최초의 메이저 웹 프레임워크
• 공통 UI 페이지간 유지 가능
• Astro 컴포넌트들이 30~75% 빨라짐
• 이미지 최적화 기능 안정화
• Vercel 과 공식 파트너십
• JSX HMR 향상: React/Preact에 Fast Refresh 지원
• CSS Inlining 지원

• Astro 3.2 : View Transitions 개선 등
• Astro 3.3 : <Picture /> 컴포넌트가 실험적으로 추가됨.
• Astro 3.4 : 부분적 페이지 추가됨. 디버깅용 개발 오버레이가 실험적으로 추가됨.
• Astro 3.5 : i18n 라우팅과 콘텐츠 컬렉션 빌드 캐시가 실험적으로 추가됨. Qwik 통합이 추가됨.
• Astro 3.6 : View Transitions 이벤트 추가됨.

2.3. 4.0

• Vite 버전 5로 변경
• Astro Dev Toolbar
• 국제화(i18n) 라우팅
• 증분 콘텐츠 캐싱
• 새로운 View Transitions API
• 로깅 재설계

3. 특징

3.1. 아일랜드 아키텍처[4]

3.2. 멀티 프레임워크

3.3. MPA

3.4. SSR

3.5. 콘텐츠 컬렉션

3.6. View Transitions

4. 문법

#!syntax javascript
---
// 빌드시 실행되는 코드

import Box from './Box.astro'
// 다른 프레임워크의 컴포넌트를 가져올 수도 있다.
import Image from './Image.jsx'
import Content from './Content.svelte'

// 해당 파일이 컴포넌트로 쓰일 때 전달되는 props를 가져올 수 있다.
const {
    title,
    content,
    tags,
} = Astro.props

// 그냥 일반 JS를 사용할 수 있다.
const image = '/img/article-default-image.png'

// top level await도 쓸 수 있다!
// 그래서 그냥 fetch()를 쓰든 DB요청을 하든 자유롭게 데이터를 가져올 수 있다.
// 단, 이때 가져온 데이터는 빌드 시 단 한번만 요청되며 바뀌지 않는다.
---
<!-- JSX 컴포넌트처럼 사용할 수 있다. -->
<Box>
    {image && <Image source={articleDefaultImage}>}
    <h2>News: {title}</h2>
    <Content content={content}>
    <!-- className이 아닌 class를 사용한다. -->
    <ul class="tags">
        {tags.map(tag => <li>{tag}</li>)}
    </ul>
</Box>

#!syntax html
<style>
    /* 다른 컴포넌트의 태그에는 영향을 끼치지 않는다. */
    p {
        font-weight: bold
    }
</style>

<p>이 문장은 두꺼운 폰트를 사용합니다</p>

5. 사용 현황 및 전망

6. 여담

• Snowpack의 개발팀에서 만든 프로젝트이다. 다만 내부적으론 snowpack이 아닌 Vite를 사용한다.
  
• Fireship이 개인적으로 굉장히 좋아하는 프레임워크이기도 하다. 1.0이 출시되기도 전에 한번 영상을 찍었고 1.0이 나오자 코드리포트에서 한번 더 다뤘다.
  
  
  아래 영상은 한때 심지어 Astro의 공식 사이트에 소개 동영상으로 쓰이기도 했었다.

• JetBrains의 IDE인 WebStorm에서 공식적으로 지원한다. #

• Astro 팀에서 starlight라는 이름의 Astro 기반의 문서화 웹프레임워크를 개발하고 있다.

7. 관련 문서

• Vercel - 현재 오픈소스인 해당 프로젝트를 후원하고 있다.
• Next.js
• 프론트엔드
• React(라이브러리)
• Vue.js
• Svelte
• SolidJS