Astro 0.21beta 버전 소개

10월 30일 아스트로 0.21의 베타 버전이 공개됐다.다만 게시 블로그를 업데이트하고 새로운 요소를 소개했다.
https://astro.build/blog/astro-021-preview/
https://github.com/snowpackjs/astro

조금 복습을 해볼게요.

Astro에는 다음과 같은 피쳐가 있습니다.

snowpack 기반 정적 사이트 생성기

React/Preact/Vue.Js/Svelte 등 프레임워크 지원

Type Script

지원

Mardown 지원

Partial Hydration

JSX 쓰기 전용 Syntax(.astro 파일)

잠깐만...
doc는 여기.입니다.일본어로 불릴 것 같지만 아직 번역하지 못한 부분이 많아서 영어판을 추천합니다.
최근Netlify,Vercel,Sentory스폰서가 됐다.

ver0.21의 새로운 요소

내부 구축 엔진 회전 snowpack->Vite

가장 눈길을 끄는 거죠?스노우팩 베이스가 아닐 줄은 몰랐어요.

유지 관리 용이

문서화

커뮤니티 지원 열풍

오류 메시지 충실

등 다양한 이유로 스노우팩에서 바이트로의 이동이 이뤄졌다.또한 이 변경에 따라 Rollup 플러그인도 사용할 수 있습니다.
9월께 데모데이에 발표된 이 내용은 astro와 스노우팩이 같은 팀에서 제작된 것으로 빅토리아로 옮겨 더욱 astro에 집중하고 싶다는 내용이다.

Go 새 컴파일러

이전의 컴파일러는 svelet의 포크 디렉터리였는데 이번에 업데이트되었습니다.Go로 쓰여 있고 WASM으로 발산하고 있습니다.
브라우저, node, deno 서버에서 이동할 수 있습니다.
이것 괜찮아요?

Flexbility: WASM 곳곳에서 컴파일러를 실행합니다.

Speed:Go의 컴파일러 언어의 성능을 이용하여 사이트를 더욱 빨리 구축한다.

Stability: 독립된 컴파일러를 만들어서 오래된 오류를 수정합니다.

개선되었습니다.아직 많은 오류가 있는 것 같은데 발견하면issue 다시 보고하세요.또 playground로 테스트할 수도 있다.

Markdown 파일에서 구성 요소 확장 가능

가장 많이 요구되는 기능이 마침내 실현되었다.setup에 구성 요소의 path를 씁니다.
sample.md

---
title: 'Astro 0.21 Early Preview'
setup: |
  import Logo from '../components/Logo.astro';
  import ReactCounter from '../components/Counter.jsx';
---

# Astro now supports components in Markdown!

<Logo />

- Back to markdown here. 
- Supports static Astro components.
- Supports dynamic React/Vue/Svelte components!

<ReactCounter start={1} client:load /> 

결과:!!(좀 못생겼지만)

Astro 구성 요소 및 페이지의 HMR 지원

리액트, 뷰 등 자바스크립트 구성 요소의 HMR 대응이 있지만 단순한 정적 HTML일 뿐이다.Astro 파일의 HMR에 대해서도 이번에 대응했다.(이곳의 상황을 잘 모르겠습니다. 블로그 게시🙇)

설정

물론 베타니까 기존 프로젝트에서는 절대 시도하지 마세요.
디스플레이를 인용하면 현재 상황을 확인할 수 있습니다.
• 아직 제품 구축에 최적화되지 않았습니다.
• dev 환경에서의 Partial hydration은 시간 초과가 끊어졌다 이어졌다 합니다.(처음 몇 번 복구하면 됩니다.)
• Windows 환경에서 Partial hydration 오류가 발생했습니다.
• 컴파일러 오류가 발생할 수 있습니다.
• 현재 작은 기능의 마이그레이션 가이드를 제작하고 있습니다.
astro 프로젝트에서

$ npm i astro@next

$ npm i @astrojs/renderer-preact@next

이상 2개는 반드시 진행해야 한다.
rendererer는 과거의 것과 호환되지 않기 때문에 반드시 업데이트하십시오.(이상은preact의 예)