JSer.info #718 - React v19가 출시되었습니다.

2년 반 만의 메이저 출시입니다.
비동기 전환을 다루는 액션 개념 추가와 useActionState/useFormStatus/useOptimistic/use API 추가되었습니다.
또한, react-dom에 prerender API 추가, Server Component와 Server Action 추가 있습니다.

그 외 개선으로, ref를 props으로 전달 할 때 forwardRef가 필요 없어졌으며, Hydration Error 개선, ref callback가 cleanup 함수 반환이 있습니다.
<title>/<meta>/<link> 등 메타태그 지원, <link rel=stylesheet>나 <script async={true} src=...> 지원도 추가되었습니다.
그리고, 자원의 preload API 지원, Custom Element 지원도 있습니다.

Next.js은 15.1에서 React v19 Stable 지원합니다.

Next.js 15.1 | Next.js

Astro 5.0가 출시되었습니다.

Content Layer 개선, Server Islands/astro:env를 Stable으로, Vite 6으로 업데이트가 있습니다.

HTTP Archive 데이터를 기반으로 한 웹 스테이터스 정리 레포트 The 2024 Web Almanac가 출시되었습니다.

The 2024 Web Almanac

HTML/CSS/JavaScript/Performance/Accessibility/SEO/Security 등 폭 넓은 항목을 조사해 레포트로 정리했습니다.

To support JSer.info

😘 Recommend JSer.info to your friends!
❤️ Support @azu on GitHub Sponsors/JSer.info Sponsors
🐦 Follow @jser_info on X(Twitter)

헤드라인

React v19 – React

react.dev/blog/2024/12/05/react-19

React ReleaseNote

React 19 출시.
비동기 전환 다루는 액션 개념 추가와 useActionState/useFormStatus/useOptimistic/use API 추가.
react-dom에서 prerender API 추가, Server Component와 Server Action 추가.
ref를 props으로 전달할 때 forwardRef 필요없도록, Hydration Error 개선, ref callback가 cleanup 함수 반환.
<title>/<meta>/<link> 등 메타태그 지원, <link rel=stylesheet>이나 <script async={true} src=...> 지원.
자원 preload API 지원, Custom Element 지원

ECMAScript proposal updates @ 2024-12 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2024/12/08/ecmascript-proposal-update

ECMAScript news

2024년 12월 TC39 미팅으로 인한 ECMAScript Proposal 상태 변경 모음.
Sync Imports 추가, Error.isError가 Stage 3으로, Intl.DurationFormat가 Stage 4로

Astro 5.0 | Astro

astro.build/blog/astro-5/

astro ReleaseNote

Astro 5.0 출시.
Content Layer 개선, Server Islands/astro:env가 Stable, Vite 6으로 업데이트

astro/packages/astro/CHANGELOG.md at main · withastro/astro

Next.js 15.1 | Next.js

nextjs.org/blog/next-15-1

Next.js ReleaseNote

Next.js 15.1 출시.
React 19 Stable 대응, Source Maps 개선, 에러 스택 트레이스 개선.
실험적 기능으로 forbidden()과 unauthorized() 추가, <link>와 <style> 인라인화 대응.

읽을거리

다시 배우는 satisfies 연산자

zenn.dev/okkun/articles/ed6f146e03c60a

TypeScript article

TypeScript의 satisfies 연산자 사용 방법에 대하여

니코니코 생방송 애플리케이션에 Rspack 도입한 이야기

zenn.dev/thiry/articles/0f671d086b2fb0

webpack rspack article

webpack에서 rspack으로 이행한 것에 대하여.
css modules 일부 동작에 문제가 있지만, 대부분이 webpack와 호환성이 있는 상태로 bundle 퍼포먼스가 개선되었다는 이야기

Introducing Nuxt Icon v1 · Nuxt Blog

nuxt.com/blog/nuxt-icon-v1-0

Nuxt article

Nuxt Icon v1.0 출시.
아이콘 로드 방법 비교와 Nuxt Icon 구현 관련하여.
img 태그 / Web 폰트 / 인라인 SVG / 동적인 API / 컴포넌트 / CSS 아이콘 접근 비교.
Nuxt Icon일 때는CSS 모드와 SVG 모드 모두 지원하며, 아이콘째로 갈아끼워진다.