diff --git a/_i18n/ko/_posts/2024/2024-12-11-react-v19-astro-v5-the-2024-web-almanac.md b/_i18n/ko/_posts/2024/2024-12-11-react-v19-astro-v5-the-2024-web-almanac.md new file mode 100644 index 00000000000..dc924e595ae --- /dev/null +++ b/_i18n/ko/_posts/2024/2024-12-11-react-v19-astro-v5-the-2024-web-almanac.md @@ -0,0 +1,210 @@ +--- +title: "2024-12-11: React v19, Astro v5, The 2024 Web Almanac" +author: "azu" +translator: rewrite0w0 +layout: post +date: 2024-12-11T02:51:36.980Z +category: JSer +tags: +- React +- TypeScript +- Chrome +- document +- performance + +--- + +JSer.info #718 - React v19가 출시되었습니다. + +- [React v19 – React](https://react.dev/blog/2024/12/05/react-19) +- [Release 19.0.0 (December 5, 2024) · facebook/react](https://github.com/facebook/react/releases/tag/v19.0.0) + +2년 반 만의 메이저 출시입니다. +비동기 전환을 다루는 액션 개념 추가와 `useActionState`/`useFormStatus`/`useOptimistic`/`use` API 추가되었습니다. +또한, react-dom에 prerender API 추가, Server Component와 Server Action 추가 있습니다. + +그 외 개선으로, `ref`를 props으로 전달 할 때 `forwardRef`가 필요 없어졌으며, Hydration Error 개선, `ref` callback가 cleanup 함수 반환이 있습니다. +``/`<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](https://nextjs.org/blog/next-15-1) + +--- + +Astro 5.0가 출시되었습니다. + +- [Astro 5.0 | Astro](https://astro.build/blog/astro-5/) +- [astro/packages/astro/CHANGELOG.md at main · withastro/astro](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md#500) + +Content Layer 개선, Server Islands/astro:env를 Stable으로, Vite 6으로 업데이트가 있습니다. + +--- + +HTTP Archive 데이터를 기반으로 한 웹 스테이터스 정리 레포트 The 2024 Web Almanac가 출시되었습니다. + +- [The 2024 Web Almanac](https://almanac.httparchive.org/en/2024/) + +HTML/CSS/JavaScript/Performance/Accessibility/SEO/Security 등 폭 넓은 항목을 조사해 레포트로 정리했습니다. + +---- + +{% include inline-support.html %} + +---- + +<h1 class="site-genre">헤드라인</h1> + +---- + +## React v19 – React +[react.dev/blog/2024/12/05/react-19](https://react.dev/blog/2024/12/05/react-19 "React v19 – React") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">ReleaseNote</span></p> + +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 지원 + +- [Release 19.0.0 (December 5, 2024) · facebook/react](https://github.com/facebook/react/releases/tag/v19.0.0 "Release 19.0.0 (December 5, 2024) · facebook/react") +- [Release v15.0.4 · vercel/next.js](https://github.com/vercel/next.js/releases/tag/v15.0.4 "Release v15.0.4 · vercel/next.js") + +---- + +## ECMAScript proposal updates @ 2024-12 | ECMAScript Daily +[ecmascript-daily.github.io/ecmascript/2024/12/08/ecmascript-proposal-update](https://ecmascript-daily.github.io/ecmascript/2024/12/08/ecmascript-proposal-update "ECMAScript proposal updates @ 2024-12 | ECMAScript Daily") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">news</span></p> + +2024년 12월 TC39 미팅으로 인한 ECMAScript Proposal 상태 변경 모음. +Sync Imports 추가, `Error.isError`가 Stage 3으로, `Intl.DurationFormat`가 Stage 4로 + + +---- + +## Astro 5.0 | Astro +[astro.build/blog/astro-5/](https://astro.build/blog/astro-5/ "Astro 5.0 | Astro") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">astro</span> <span class="jser-tag">ReleaseNote</span></p> + +Astro 5.0 출시. +Content Layer 개선, Server Islands/astro:env가 Stable, Vite 6으로 업데이트 + +- [astro/packages/astro/CHANGELOG.md at main · withastro/astro](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md#500 "astro/packages/astro/CHANGELOG.md at main · withastro/astro") + +---- + +## Next.js 15.1 | Next.js +[nextjs.org/blog/next-15-1](https://nextjs.org/blog/next-15-1 "Next.js 15.1 | Next.js") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">ReleaseNote</span></p> + +Next.js 15.1 출시. +React 19 Stable 대응, Source Maps 개선, 에러 스택 트레이스 개선. +실험적 기능으로 `forbidden()`과 `unauthorized()` 추가, `<link>`와 `<style>` 인라인화 대응. + + +---- +<h1 class="site-genre">읽을거리</h1> + +---- + +## 다시 배우는 satisfies 연산자 +[zenn.dev/okkun/articles/ed6f146e03c60a](https://zenn.dev/okkun/articles/ed6f146e03c60a "다시 배우는 satisfies 연산자") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">article</span></p> + +TypeScript의 `satisfies` 연산자 사용 방법에 대하여 + + +---- + +## 니코니코 생방송 애플리케이션에 Rspack 도입한 이야기 +[zenn.dev/thiry/articles/0f671d086b2fb0](https://zenn.dev/thiry/articles/0f671d086b2fb0 "니코니코 생방송 애플리케이션에 Rspack 도입한 이야기") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">webpack</span> <span class="jser-tag">rspack</span> <span class="jser-tag">article</span></p> + +webpack에서 rspack으로 이행한 것에 대하여. +css modules 일부 동작에 문제가 있지만, 대부분이 webpack와 호환성이 있는 상태로 bundle 퍼포먼스가 개선되었다는 이야기 + + +---- + +## Introducing Nuxt Icon v1 · Nuxt Blog +[nuxt.com/blog/nuxt-icon-v1-0](https://nuxt.com/blog/nuxt-icon-v1-0 "Introducing Nuxt Icon v1 · Nuxt Blog") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Nuxt</span> <span class="jser-tag">article</span></p> + +Nuxt Icon v1.0 출시. +아이콘 로드 방법 비교와 Nuxt Icon 구현 관련하여. +img 태그 / Web 폰트 / 인라인 SVG / 동적인 API / 컴포넌트 / CSS 아이콘 접근 비교. +Nuxt Icon일 때는CSS 모드와 SVG 모드 모두 지원하며, 아이콘째로 갈아끼워진다. + + +---- + +## What's new in DevTools, Chrome 132  |  Blog  |  Chrome for Developers +[developer.chrome.com/blog/new-in-devtools-132?hl=en](https://developer.chrome.com/blog/new-in-devtools-132?hl=en "What's new in DevTools, Chrome 132  |  Blog  |  Chrome for Developers") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">article</span></p> + +Chrome 132에서 Chrome DevTools 변경점에 대하여. +AI assistance 개선, 퍼포먼스 탭의 Network 패널에 그 자원이 렌더링 블록되고 있는가 보여짐, `scheduler.postTask` 가시화 + + +---- + +## How To Improve INP: Yield Patterns | Jacob 'Kurt' Groß +[kurtextrem.de/posts/improve-inp](https://kurtextrem.de/posts/improve-inp "How To Improve INP: Yield Patterns | Jacob 'Kurt' Groß") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p> + +React 애플리케이션 Interaction-to-Next-Paint(INP) 개선하는 접근에 대한 연재 기사 + + +---- + +## State of JavaScript 2024 +[survey.devographics.com/survey/state-of-js/2024](https://survey.devographics.com/survey/state-of-js/2024 "State of JavaScript 2024") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Survey</span></p> + +JavaScript 관련 개발자 앙케이트 State of JavaScript 2024 모집 시작 + + +---- + +## A leap in the evolution of Airtable’s codebase: Scaling TypeScript to thousands of projects | by Michael Mitchell | The Airtable Engineering Blog | Dec, 2024 | Medium +[medium.com/airtable-eng/a-leap-in-the-evolution-of-airtables-codebase-scaling-typescript-to-thousands-of-projects-734326c3a553](https://medium.com/airtable-eng/a-leap-in-the-evolution-of-airtables-codebase-scaling-typescript-to-thousands-of-projects-734326c3a553 "A leap in the evolution of Airtable’s codebase: Scaling TypeScript to thousands of projects | by Michael Mitchell | The Airtable Engineering Blog | Dec, 2024 | Medium") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">article</span> <span class="jser-tag">performance</span></p> + +Bazel 사용해서 TypeScript 병렬 빌드를 최적화한 이야기. +TypeScript 프로젝트끼리 순환참조한 것을 Copilot 사용해서 인터페이스 분리, Isolated Declarations 사용한 병렬 빌드 가능하도록 명시적으로 자료형 명명 + + +---- +<h1 class="site-genre">웹사이트, 서비스, 문서</h1> + +---- + +## CSS Wrapped 2024 +[chrome.dev/css-wrapped-2024/](https://chrome.dev/css-wrapped-2024/ "CSS Wrapped 2024") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">browser</span> <span class="jser-tag">css </span> <span class="jser-tag">document</span> <span class="jser-tag">example</span> <span class="jser-tag">Chrome</span></p> + +2024년에 Chrome 추가된 CSS 기능을 체험 가능한 사이트. + + +---- + +## onlook-dev/onlook: The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code. +[github.com/onlook-dev/onlook](https://github.com/onlook-dev/onlook "onlook-dev/onlook: The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">figma</span> <span class="jser-tag">editor</span> <span class="jser-tag">software</span></p> + +Figma스러운 UI로 React애플리케이션 편집 가능한 에디터 애플리케이션 + + +---- + +## The 2024 Web Almanac +[almanac.httparchive.org/en/2024/](https://almanac.httparchive.org/en/2024/ "The 2024 Web Almanac") +<p class="jser-tags jser-tag-icon"><span class="jser-tag">document</span> <span class="jser-tag">HTTP</span></p> + +Web Almanac의 2024년판 공개. +HTTP Archive 데이터를 근거로 웹사이트 스테이터스 정리해서 레포트. + + +----