Merge pull request #1278 from rewrite0w0/translate/20250427

translate: 2025-04-27 article

Author: azu

_i18n/ko/_posts/2025/2025-04-27-node-v22.15.0-react-node.jsv8-gc.md

@@ -0,0 +1,217 @@
+---
+title: "2025-04-27: Node v22.15.0, React 실험적 기능, Node.js와 V8 GC"
+author: "azu"
+layout: post
+date: 2025-04-27T02:43:58.849Z
+category: JSer
+tags:
+- nodejs
+- React
+- pnpm
+- css
+- performance
+
+---
+
+JSer.info #733 - Node.js v22.15.0가 출시되었습니다.
+
+- [Node.js — Node v22.15.0 (LTS)](https://nodejs.org/en/blog/release/v22.15.0)
+
+`assert.partialDeepStrictEqual()`나 `module.registerHooks()` 새로운 API가 추가되었습니다. 또한, `util.diff()` 추가나 zstd 지원도 포함됩니다.
+
+---
+
+React 팀 실험적인 기능 소개 하는 글이 공개되었습니다.
+
+- [React Labs: View Transitions, Activity, and more – React](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more)
+
+`<ViewTransition>`, `addTransitionType()`, `<Activity>` 새로운 실험적 API 소개가 포함됩니다.
+또한, DevTools로 Performance Profiler 개선이나 의존 없는 useEffect, React Compiler 같이 개발중인 기능에 대해서도 언급합니다.
+
+---
+
+Node.js와 V8 GC 관련한 해설 글이 공개되었습니다.
+
+- [Boost Node.js with V8 GC Optimization](https://blog.platformatic.dev/optimizing-nodejs-performance-v8-memory-management-and-gc-tuning)
+
+V8 세대별 GC 구조나, Scavenge에 의한 고속 GC 처리, semi-space 크기 조절로 인한 메모리 튜닝에 대해 작성되어있습니다.
+
+----
+
+## PR
+
+[JavaScript Primer](https://jsprimer.net/)의 ES2025 대응을 도울 Contributor와 Sponsor를 모집하고 있습니다.
+매년 6월말에 ECMAScript 정식 공개에 맞춰, 올해 업데이트를 jsprimer에 반영 작업할 예정입니다.
+
+- [JavaScript Primer의 ES2025 대응을 도울 Contributor와 Sponsor를 모집하고 있습니다 | Web Scratch](https://efcl.info/2025/04/25/jsprimer-es2025-proposal/)
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">헤드라인</h1>
+
+----
+
+## Release v1.52.0 · microsoft/playwright
+[github.com/microsoft/playwright/releases/tag/v1.52.0](https://github.com/microsoft/playwright/releases/tag/v1.52.0 "Release v1.52.0 · microsoft/playwright")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">playwright</span> <span class="jser-tag">ReleaseNote</span></p>
+
+playwright v1.52.0 출시.
+파괴적 변경으로 `page.route()`에서 `?`는 wildcard로 다뤄지지 않도록 변경, `route.continue()`에서 `Cookie` 헤더를 덮어쓰지 않도록 변경.
+`expect(locator).toContainClass()` 추가, Aria Snapshot 갱신.
+프로젝트 째로 `workers` 설정 가능, `failOnFlakyTests` 옵션 추가.
+
+
+----
+
+## ECMAScript proposal updates @ 2025-04 | ECMAScript Daily
+[ecmascript-daily.github.io/ecmascript/2025/04/19/ecmascript-proposal-update](https://ecmascript-daily.github.io/ecmascript/2025/04/19/ecmascript-proposal-update "ECMAScript proposal updates @ 2025-04 | ECMAScript Daily")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">proposal</span> <span class="jser-tag">news</span></p>
+
+2025년 4월 TC39 미팅에서 ECMAScript Proposal의 Status 변경 모음.
+Record & Tuple가 withdrawn가 됨.
+
+
+----
+
+## Release @fastify/react@1.0.0 · fastify/fastify-vite
+[github.com/fastify/fastify-vite/releases/tag/react-v1.0.0](https://github.com/fastify/fastify-vite/releases/tag/react-v1.0.0 "Release @fastify/[email protected] · fastify/fastify-vite")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">React</span> <span class="jser-tag">ReleaseNote</span></p>
+
+@fastify/react 1.0.0 출시.
+
+
+----
+
+## Node.js — Node v22.15.0 (LTS)
+[nodejs.org/en/blog/release/v22.15.0](https://nodejs.org/en/blog/release/v22.15.0 "Node.js — Node v22.15.0 (LTS)")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v22.15.0 출시.
+`assert.partialDeepStrictEqual()` 추가, ` module.registerHooks()` 추가, `util.diff()` 추가, zstd 지원
+
+
+----
+
+## Release pnpm 10.9 · pnpm/pnpm
+[github.com/pnpm/pnpm/releases/tag/v10.9.0](https://github.com/pnpm/pnpm/releases/tag/v10.9.0 "Release pnpm 10.9 · pnpm/pnpm")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">pnpm</span> <span class="jser-tag">ReleaseNote</span></p>
+
+pnpm v10.9.0 출시.
+`pnpm add jsr:<pkg_name>`로 JSR 지원, `dangerouslyAllowAllBuilds` 옵션 추가
+
+
+----
+
+## Release Release v1.9.0 · axios/axios
+[github.com/axios/axios/releases/tag/v1.9.0](https://github.com/axios/axios/releases/tag/v1.9.0 "Release Release v1.9.0 · axios/axios")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">HTTP</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+axios v1.9.0 출시.
+`getSetCookie` 지원
+
+
+----
+<h1 class="site-genre">읽을거리</h1>
+
+----
+
+## React Labs: View Transitions, Activity, and more – React
+[react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more "React Labs: View Transitions, Activity, and more – React")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">article</span></p>
+
+React 실험적 기능 소개.
+`<ViewTransition>`/`addTransitionType`/`<Activity>`.
+DevTools에서 React의 Performance Profiler 가시화, 의존하지 않는 `useEffect`, React Compiler 관련하여
+
+
+----
+
+## Tailwind vs Linaria: Performance Investigation
+[www.developerway.com/posts/tailwind-vs-linaria-performance](https://www.developerway.com/posts/tailwind-vs-linaria-performance "Tailwind vs Linaria: Performance Investigation")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">css</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p>
+
+Tailwind와 Linaria 성능 비교 조사 글
+조사함으로, 기반이 될 스타일에서 `*`에 스타일이 의존할 때 실행 성능에 차이가 발생함
+
+
+----
+
+## Introducing Socket Fix for Safe, Automated Dependency Upgrad...
+[socket.dev/blog/introducing-socket-fix](https://socket.dev/blog/introducing-socket-fix "Introducing Socket Fix for Safe, Automated Dependency Upgrad...")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">pnpm</span> <span class="jser-tag">article</span></p>
+
+패키지 보안 업데이트 수정을 하는 `socket fix` 명령어 관련하여.
+npm/pnpm 지원.
+
+
+----
+
+## Polishing your typography with line height units | WebKit
+[webkit.org/blog/16831/line-height-units/](https://webkit.org/blog/16831/line-height-units/ "Polishing your typography with line height units | WebKit")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">css</span> <span class="jser-tag">article</span></p>
+
+`1lh`는 1 line height에서 1행 높이를 표현하는 단위, `1rlh`은 rem과 같이 Root의 1행의 높이를 표현하는 단위.
+`1lh` 사용한 타이프그래피에 대해서
+
+
+----
+
+## Boost Node.js with V8 GC Optimization
+[blog.platformatic.dev/optimizing-nodejs-performance-v8-memory-management-and-gc-tuning](https://blog.platformatic.dev/optimizing-nodejs-performance-v8-memory-management-and-gc-tuning "Boost Node.js with V8 GC Optimization")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">V8</span> <span class="jser-tag">article</span> <span class="jser-tag">performance</span></p>
+
+V8 세대별 GC는, Scavenge로 불리는 고속 GC를 semi-space 객체에 수행해, 몇 번이나 남은 객체를 승격하고, GC 빈도가 적은 space에 이동.
+실수로 승격한 객체가 많으면 제법 메모리 해제가 되지 않기에, semi-space 크기를 조절하는 옵션이나 메모리 튜닝 방벙에 대해 설명
+
+
+----
+<h1 class="site-genre">웹사이드, 서비스, 문서</h1>
+
+----
+
+## unnoq/orpc: Typesafe APIs Made Simple 🪄
+[github.com/unnoq/orpc?tab&#x3D;readme-ov-file](https://github.com/unnoq/orpc?tab=readme-ov-file "unnoq/orpc: Typesafe APIs Made Simple 🪄")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">OpenAPI</span> <span class="jser-tag">nodejs</span> <span class="jser-tag">library</span></p>
+
+라우팅 정의에서 Open API Spec 출력하는 서버/클라이언트 HTTP 프레임워크
+
+
+----
+<h1 class="site-genre">소프트웨어, 도구, 라이브러리</h1>
+
+----
+
+## slevithan/oniguruma-to-es: Convert patterns from Oniguruma (the regex flavor used by Ruby, TextMate grammars, etc.) to native JavaScript RegExp
+[github.com/slevithan/oniguruma-to-es](https://github.com/slevithan/oniguruma-to-es "slevithan/oniguruma-to-es: Convert patterns from Oniguruma (the regex flavor used by Ruby, TextMate grammars, etc.) to native JavaScript RegExp")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">RegExp</span></p>
+
+Oniguruma 정규표현을 JavaScript 정규표현으로 변경하는 라이브러리
+
+
+----
+
+## Nom-nom-hub/flash-install: A fast, drop-in replacement for npm install, focused on drastically speeding up Node.js dependency installation through deterministic caching, parallel operations, and .flashpack archive snapshotting.
+[github.com/Nom-nom-hub/flash-install](https://github.com/Nom-nom-hub/flash-install "Nom-nom-hub/flash-install: A fast, drop-in replacement for npm install, focused on drastically speeding up Node.js dependency installation through deterministic caching, parallel operations, and .flashpack archive snapshotting.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">console</span> <span class="jser-tag">Tools</span></p>
+
+캐시와 스냅샷을 지원하는 npm 패키지를 설치하는 도구.
+해시 기반 경로와 hard link 사용한 캐시, `.flashpack` 스냅샷 파일을 다루는 것이 가능해 브런치 변경 시 복원이 빠름.
+
+
+----
+
+## andrewmd5/hako: An embeddable, lightweight, secure, high-performance JavaScript engine.
+[github.com/andrewmd5/hako](https://github.com/andrewmd5/hako "andrewmd5/hako: An embeddable, lightweight, secure, high-performance JavaScript engine.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebAssembly</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">library</span></p>
+
+QuickJS 기반 WebAssembly에 컴파일해서 이용하는 JavaScript 엔진.
+Lynx/primjs를 fork한 것이 기반.
+
+- [lynx-family/primjs: JavaScript Engine Optimized for Lynx](https://github.com/lynx-family/primjs "lynx-family/primjs: JavaScript Engine Optimized for Lynx")
+- [Hako - by Andrew Sampson - ./make](https://andrews.substack.com/p/hako "Hako - by Andrew Sampson - ./make")
+
+----