8월 30일에, Astro 3.0이 소개가 되었고 내용은 아래와 같다.
- View Transitions API
- Image Optimization (stable)
- SSR Enhancements for Serverless
- HMR Enhancements for JSX
- Optimized Build Output
View Transitions API
두 번째 단락을 보면 View Transitions API를 주요 웹 프레임워크 중에서 처음으로 지원하게 되었다고 한다.
View Transitions API라는 것은 A 페이지에서 B 페이지로 전환할 때 애니메이션을 추가할 수 있도록 지원하는데, 이는 기존에는 SPA 내부에서만 가능했던 것이었다. 많은 개발자들이 지난 몇 년간 네이티브 환경에서 page transitions을 지원하기 위해 열심히 노력했고 현재는 Experimental인 상태인데, Browser compatibility를 확인해 보면 파이어폭스와 사파리에서는 지원하지 않는 것을 확인할 수 있다.
Astro의 View Transitions에서는 아래와 같은 것들을 할 수 있다.
- 컴포넌트나 HTML elements의 상태값을 페이지 전환 시에 유지할 수 있다.
- 페이지의 특정 콘텐츠를 fade-in, fade-out 해서 콘텐츠를 시각적으로 표현할 수 있다.
- 페이지의 특정 컨텐츠를 슬라이드 하여 특별한 느낌을 줄 수 있다.
- 새로고침 없이 페이지간의 공통된 UI를 유지할 수 있다.
Astro에서는 View Transtions를 사용하기 위해 세팅하는 방법이 간단한데, 빠르게 도입할 수 있겠다는 생각이 들었다.
---
// src/pages/index.astro
// Note: Make sure you add the "<ViewTransitions />" component
// to other pages as well, and not just one.
import {ViewTransitions} from 'astro:transitions';
---
<head>
<title>My View Transition Demo</title>
<ViewTransitions />
</head>
<body>
<!-- -->
</body>Astro 2.9부터 View Transitions을 지원하고 있었는데, 유저들의 피드백을 받아서 Astro 3.0에서의 View Transtions이 만들어질 수 있었다고 한다. View Transitions이 적용된 live demo를 보면 native 혹은 client-side application처럼 느껴지는데 실제로는 모두 서버에서 렌더링 된 HTML에서 구현되어 있고 Astro 3.0이 이를 가능하게 한다고 얘기하고 있다.
또한 모든 브라우저에서 동작할 수 있게 구현하는데 많은 노력을 들였다고 하는데, 지원하지 않는 브라우저의 경우 대안으로 fallbacks를 제공하고 있고 3kb 정도 되는 용량의 script로 이를 해결하고 있다.
Faster Rendering Performance
렌더링 성능의 향상은 Astro 3.0에서의 주요 업데이트 중 하나인데, 대부분의 컴포넌트들의 렌더링 성능이 Astro 2.9와 비교했을 때 30% 정도 향상되었다. 복잡한 벤치마크를 기준으로 했을 때는 75% 까지도 향상되었다고 한다.
이러한 성능 향상은 Astro 2.10에서 시작된 상당한 리팩토링 작업이 Astro 3.0까지 이어졌기 때문에 이루어질 수 있었다.
generator, async등 빌드 파이프라인에서의 불필요한 코드가 가장 큰 원인이었고 이를 제거하고 최적화하였다.
Image Optimization (stable)
Image Optimization은 Astro 3.0에서 stable이고 모든 프로젝트에서 사용할 수 있다. <Image> import 해서 사용하는데 Astro는 빌드 파이프라인에서 이미지를 자동으로 최적화시켜 주고 마지막 렌더링되는 결과물에서는 img 태그의 width, height가 잡혀있어 CLS(Cumulative Layout Shfit) 문제를 방지해 준다.
---
// Import the <Image /> component
import { Image } from "astro:assets"
// Import a reference to the image itself
import myImage from "../assets/penguin.png"
---
<Image src={myImage} alt="A very cool penguin!" />
이미지 최적화와 관련해서는 지난번에 여기에서 설명했었는데 그때 이후로 추가된 것들은 아래와 같다.
- Vercel에서 제공하는 이미지 서비스를 완벽하게 지원한다. imageService : true 옵션을 Vercel integration configuration에 추가하면 global CDN을 통해 프로덕션에서 이미지가 최적화된다.
- 최적화 라이브러리를 Sharp로 마이그레이션 했다. 기존에 사용하고 있던 @squoosh/lib는 더 이상 maintained 되지 않아 Sharp로 교체했다고 한다.
- remote images에 대한 최적화를 지원한다. 콘텐츠를 다루는 조직들은 기존에 사용하던 워크플로우나 CMS를 활용하여 이미지를 관리할 수 있다.
SSR Enhancements for Serverless
지난 월요일에 Vercel과의 공식적인 호스팅 파트너십을 발표했다. Vercel과의 콜라보를 통해 Astro 3.0에서의 SSR을 더욱 향상할 수 있었다. 아래 소개할 새로운 특징들은 웹사이트를 어떻게 배포했는지에 상관없이 모든 사용자들이 얻을 수 있는 것들이다.
- Per-Route Code Splitting: 각각의 라우트에 더 작고 개별적인 서버 파일들을 만들면서 Vercel, Netlify, Cloudflare 등의 서버리스 유저들은 매 요청에 필요 없는 코드를 줄임으로써 향상된 성능을 확인할 수 있다.
- Edge Middleware: 이제 Astro는 미들웨어를 번들로 제공하여 엣지에 배포할 수 있다. 엣지 미들웨어는 전 세계에 구성되어 있고 요청이 들어왔을 때 사용자와 가까운 서버에서 실행된다.
- Host Customization: 두 가지의 호스팅 제공자가 다르기 때문에 사용자들이 차이를 쉽게 이해할 수 있도록 Astro에 API를 만들었다. 호스팅 어댑터(like @astrojs/node and @astrojs/vercel)는 어떤 기능을 지원하는지 알려준다. Astro는 이런 정보들을 활용하여 개발할 때 자세한 에러메시지를 확인하거나 미리 프로덕션 에러를 방지하는 등의 도움을 줄 수 있다.
이러한 기능들은 현재 Vercel에서 모두 사용가능하고, 다른 호스팅 어댑터들도 사용할 수 있도록 업데이트될 것이다. 몇 달 뒤에는 우리의 커뮤니티 메인테이너들과 함께 작업을 진행해서 어떤 호스팅 플랫폼이라도 지원할 수 있도록 할 예정이다.
HMR Enhancements for JSX
내부 JSX 빌드 지원의 대대적인 리팩토링 덕분에 이제 Astro 3.0에서 React Fast Refresh가 작동한다. React, Preact, Solid.js 유저들은 Astro 3.0에서 HMR과 전반적인 개발 서버 안정성이 크게 개선된 것을 확인할 수 있다.
Fast Refresh는 페이지 새로고침 없이 로컬에서 일어난 변화를 브라우저에 반영할 수 있는 특징이다. 일반적인 HMR과 비교하여 Fast Refresh를 특별하게 만드는 것은 현재 UI 상태를 변경하지 않고 로컬에서 수정한 코드를 브라우저에 반영할 수 있다는 것이다.
모달이나 여러 단계에 걸쳐서 표현되는 UI를 개발할 때 refresh가 되면 상태값이 날아가서 DX에 좋지 않은 영향을 줬지만, Fast Refresh는 이러한 문제를 해결하고 개발 속도를 증가시킨다.
Optimized Build Output
Astro 3.0에서 빌드와 관련하여 향상된 부분들이 있다.
- HTML Minification: Astro 3.0은 자동으로 HTML 파일의 결과물을 압축하고 이렇게 압축된 HTML 파일은 적은 용량이기 때문에 사용자에게 빠르게 제공될 수 있다.
- Component IDS: 기존에 사용하던 astro-XXXXXX와 같은 클래스 이름이 data-astro-cid-hash라는 HTML attribute로 변경되었다. 클래스 이름을 비워두기 때문에 더욱 가독성이 좋고 체계화된 HTML 파일을 만들 수 있다.
- CSS Inlining: Astro 3.0은 HTML에 있는 작은 CSS 청크들을 인라인 스타일로 변경해 준다. 이러한 변화는 과거의 Astro에서 CSS 파일을 불러오기 위해 여러 번 요청을 보냈던 것과는 다르게 로딩 속도를 빠르게 해준다.
Try Astro 3.0 Today
현재 Astro 3.0은 npm에서 다운로드 받아서 사용할 수 있다.
'TIL > 개발' 카테고리의 다른 글
| 요즘 개발자 베타리딩 - 2주차 (0) | 2023.11.09 |
|---|---|
| 프론트엔드에서의 비즈니스 로직은 어떻게 분리할 수 있을까요? (0) | 2023.11.09 |
| React에서 useCallback은 언제 사용해야 할까? (0) | 2023.11.08 |
| BFF(Backend For Frontend)는 어떤 문제를 해결하나? (0) | 2023.11.07 |
| 테스트코드와 SPA 환경을 만들어보며 배우는 모던 자바스크립트 입문 - 1주차 (0) | 2023.04.03 |
