Merge pull request #1251 from rewrite0w0/translate/20241228

translate: 2024-12-28 article

Author: azu

_i18n/ja/_posts/2024/2024-12-28-pnpm-10.0-rc.1-state-of-javascript-2024-design-token-based-ui-architecture.md

@@ -32,7 +32,7 @@ JSer.info #720 - pnpm 10.0 RC 1がリリースされました。
 ----
 
 JavaScriptに関する開発者アンケートである[State of JavaScript 2024](https://2024.stateofjs.com/en-US)が公開されました。
-JavaScriptの言語機能/ライブラリ/テスト/monorepo/JSとTSの比率/AIの利用率学習リソースなどについてのアンケート結果がまとめられています。
+JavaScriptの言語機能/ライブラリ/テスト/monorepo/JSとTSの比率/AIの利用率、学習リソースなどについてのアンケート結果がまとめられています。
 
 ----
 

_i18n/ko/_posts/2024/2024-12-28-pnpm-10.0-rc.1-state-of-javascript-2024-design-token-based-ui-architecture.md

@@ -0,0 +1,179 @@
+---
+title: "2024-12-28: pnpm 10.0 RC.1, State of JavaScript 2024, Design Token-Based UI Architecture"
+author: "azu"
+translator: rewrite0w0
+layout: post
+date: 2024-12-28T07:53:27.289Z
+category: JSer
+tags:
+- React
+- Remix
+- Design
+- UI
+- architecture
+
+---
+
+JSer.info #720 - pnpm 10.0 RC 1가 출시되었습니다.
+
+- [Release pnpm 10.0 RC 1 · pnpm/pnpm](https://github.com/pnpm/pnpm/releases/tag/v10.0.0-rc.1)
+
+설치된 패키지의 lifecycle script 기본적으로 실행하지 않는 변경이 포함되었습니다.
+패키지 `postinstall`의 lifecycle script 실행을 허용하기 위해서는 `pnpm.onlyBuiltDependencies` 설정에 패키지 명을 추가할 필요가 있습니다.
+
+- [feat!: use an allow list of built dependencies by default by zkochan · Pull Request #8897 · pnpm/pnpm](https://github.com/pnpm/pnpm/pull/8897)
+
+이는, rspack v1.1.7에서 패키지가 하이재킹되어 [멀웨어 실행하는 lifecycle script](https://socket.dev/npm/package/@rspack/core/files/1.1.7/package.json#L78) 문제에 관련한 변화입니다.
+
+- [Release v1.1.8 · web-infra-dev/rspack](https://github.com/web-infra-dev/rspack/releases/tag/v1.1.8)
+
+그 외로는, `pnpm link` 동작 변경, `packageManager` 참조해 pnpm 버전을 확인하도록, 해쉬 알고리즘을 SHA256으로 변경, store 버전 업데이트도 있습니다.
+또한, `verifyDepsBeforeRun` 옵션이 추가되어, lock와 `node_modules/` 상태를 비교해서 자동 설치 동작을 선택할 수 있는 변화도 있습니다.
+
+----
+
+JavaScript 관련한 개발자 앙케이트 [State of JavaScript 2024](https://2024.stateofjs.com/en-US)가 공개되었습니다.
+JavaScript 언어 기능 / 라이브러리 / 테스트 / monorepo / JS와 TS 비율 / AI 이용률, 학습 자원에 대한 앙케이트 결과가 정리되어 있습니다.
+
+----
+
+[Design Token-Based UI Architecture](https://martinfowler.com/articles/design-token-based-ui-architecture.html)에는 Design Token 기반의 UI 아키텍처에 대해 작성되어 있습니다.
+
+Design Token를 2개 or 3개 레이어로 분할하는 이유, Token 스코프, Design Token 장/단점에 대해 다루고 있습니다.
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">헤드라인</h1>
+
+----
+
+## react-router/CHANGELOG.md at main · remix-run/react-router
+[github.com/remix-run/react-router/blob/main/CHANGELOG.md#v710](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v710 "react-router/CHANGELOG.md at main · remix-run/react-router")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">Remix</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+React Router 7.1.0 출시.
+Vite 6 지원
+
+
+----
+
+## Release v2.3.0 · vercel/swr
+[github.com/vercel/swr/releases/tag/v2.3.0](https://github.com/vercel/swr/releases/tag/v2.3.0 "Release v2.3.0 · vercel/swr")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+SWR v2.3.0 출시.
+fallback으로 Promise 데이터 지정 가능, React 19 지원
+
+
+----
+
+## Release 8.3.0 – Pipes of Steel · google/zx
+[github.com/google/zx/releases/tag/8.3.0](https://github.com/google/zx/releases/tag/8.3.0 "Release 8.3.0 – Pipes of Steel · google/zx")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ShellScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+zx 8.3.0 출시.
+Async Iterator 대응, `pipe()` 개선, `--env` 플래그 추가
+
+
+----
+
+## Nuxt 3.15 · Nuxt Blog
+[nuxt.com/blog/v3-15](https://nuxt.com/blog/v3-15 "Nuxt 3.15 · Nuxt Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Nuxt</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Nuxt v3.15 출시.
+Vite 6 지원, `callOnce()` 추가, `definePageMeta` 개선
+
+
+----
+
+## Release pnpm 10.0 RC 1 · pnpm/pnpm
+[github.com/pnpm/pnpm/releases/tag/v10.0.0-rc.1](https://github.com/pnpm/pnpm/releases/tag/v10.0.0-rc.1 "Release pnpm 10.0 RC 1 · pnpm/pnpm")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">pnpm</span> <span class="jser-tag">ReleaseNote</span></p>
+
+pnpm v10.0.0-rc.1 출시.
+설치하는 패키지 lifecycle script를 기본적으로 실행하지 않도록 변경.
+ `pnpm link` 동작 변경, `packageManager` 참초해서 pnpm 버전을 확인하도록, 해시 알고리즘을 SHA256으로 변경, store 버전 업데이트.
+ `verifyDepsBeforeRun` 옵션이 추가되어, lock와 `node_modules/` 상태를 비교해 자동 설치 동작을 선택 가능.
+
+
+----
+
+## Release v1.1.8 · web-infra-dev/rspack
+[github.com/web-infra-dev/rspack/releases/tag/v1.1.8](https://github.com/web-infra-dev/rspack/releases/tag/v1.1.8 "Release v1.1.8 · web-infra-dev/rspack")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">rspack</span> <span class="jser-tag">security</span> <span class="jser-tag">ReleaseNote</span></p>
+
+rspack v1.1.8 출시.
+`@rspack/core`와 `@rspack/cli` v1.1.7 패키지가 하이재킹되어 멀웨어 포함한 버전을 배포한 문제를 대응하는 출시.
+
+
+----
+<h1 class="site-genre">읽을거리</h1>
+
+----
+
+## Design Token-Based UI Architecture
+[martinfowler.com/articles/design-token-based-ui-architecture.html](https://martinfowler.com/articles/design-token-based-ui-architecture.html "Design Token-Based UI Architecture")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Design</span> <span class="jser-tag">UI</span> <span class="jser-tag">architecture</span> <span class="jser-tag">article</span></p>
+
+Design Token과 UI 개발에 대하여.
+Design Token을 2개 or 3개 레이어에 분할하는 이유, Token 스코프, Design Token 장/단점에 대하여
+
+
+----
+
+## State of JavaScript 2024
+[2024.stateofjs.com/en-US](https://2024.stateofjs.com/en-US "State of JavaScript 2024")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Survey</span></p>
+
+State of JavaScript 2024 앙케이트 결과 공개.
+JavaScript 언어 기능 / 라이브러리 / 테스트 / monorepo 관련하여.
+또한 JS와 TS의 비율, AI 이용률, 학습 자원에 대해서도 다룸
+
+
+----
+
+## Service Worker가 페이지를 컨트롤하는 타이밍을 skipWaiting 와 clients.claim 으로 이해한다 - 카미나시 엔지니어 블로그
+[kaminashi-developer.hatenablog.jp/entry/2024/12/20/080000](https://kaminashi-developer.hatenablog.jp/entry/2024/12/20/080000 "Service Worker가 페이지를 컨트롤하는 타이밍을 skipWaiting 와 clients.claim 으로 이해한다 - 카미나시 엔지니어 블로그")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ServiceWorker</span> <span class="jser-tag">article</span></p>
+
+Service Worker의 `skipWaiting`와 `clients.claim` 동작에 대하여.
+
+
+----
+
+## React Aria 구현 읽을거야 - Qiita Advent Calendar 2024 - Qiita
+[qiita.com/advent-calendar/2024/react-aria](https://qiita.com/advent-calendar/2024/react-aria "React Aria 구현 읽을거야 - Qiita Advent Calendar 2024 - Qiita")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">accessibility</span> <span class="jser-tag">article</span></p>
+
+React Aria 접근성 대응 구현에 대한 연재 글
+
+
+----
+
+## Why I’m excited about text-box-trim as a designer - Piccalilli
+[piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/](https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/ "Why I’m excited about text-box-trim as a designer - Piccalilli")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">article</span> <span class="jser-tag">fonts</span></p>
+
+CSS의 text-box-trim/text-edge/text-box에서의 타이포그래피에 대하여
+
+
+----
+<h1 class="site-genre">소프트웨어, 도구, 라이브러리</h1>
+
+----
+
+## Zero Docs
+[zero.rocicorp.dev/](https://zero.rocicorp.dev/ "Zero Docs")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">React</span> <span class="jser-tag">WebSocket</span> <span class="jser-tag">library</span> <span class="jser-tag">database</span></p>
+
+클라이언트와 백엔드 데이터베이스 상태를 동기화하는 쿼리 엔진.
+클라이언트에서 ORM으로 쿼리를 작성, 그 결과가 백엔드 데이터베이스에 반영. 또한 쿼리 결과는 클라이언트 모컬에서도 캐시해 재이용 가능하도록해서, 클라이언트에는 고속으로 반영됨.
+권한은 Zero Schema에 스키마 정의함으로 클라이언트에서 실행가능한 쿼리를 제어한다.
+
+
+----