Fork me on GitHub

2024-12-28: pnpm 10.0 RC.1, State of JavaScript 2024, Design Token-Based UI Architecture

Translator: rewrite0w0 Edit on GitHub See Revisions

JSer.info #720 - pnpm 10.0 RC 1가 출시되었습니다.

설치된 패키지의 lifecycle script 기본적으로 실행하지 않는 변경이 포함되었습니다.
패키지 postinstall의 lifecycle script 실행을 허용하기 위해서는 pnpm.onlyBuiltDependencies 설정에 패키지 명을 추가할 필요가 있습니다.

이는, rspack v1.1.7에서 패키지가 하이재킹되어 멀웨어 실행하는 lifecycle script 문제에 관련한 변화입니다.

그 외로는, pnpm link 동작 변경, packageManager 참조해 pnpm 버전을 확인하도록, 해쉬 알고리즘을 SHA256으로 변경, store 버전 업데이트도 있습니다.
또한, verifyDepsBeforeRun 옵션이 추가되어, lock와 node_modules/ 상태를 비교해서 자동 설치 동작을 선택할 수 있는 변화도 있습니다.


JavaScript 관련한 개발자 앙케이트 State of JavaScript 2024가 공개되었습니다.
JavaScript 언어 기능 / 라이브러리 / 테스트 / monorepo / JS와 TS 비율 / AI 이용률, 학습 자원에 대한 앙케이트 결과가 정리되어 있습니다.


Design Token-Based UI Architecture에는 Design Token 기반의 UI 아키텍처에 대해 작성되어 있습니다.

Design Token를 2개 or 3개 레이어로 분할하는 이유, Token 스코프, Design Token 장/단점에 대해 다루고 있습니다.


To support JSer.info


헤드라인


react-router/CHANGELOG.md at main · remix-run/react-router

github.com/remix-run/react-router/blob/main/CHANGELOG.md#v710

React Remix library ReleaseNote

React Router 7.1.0 출시.
Vite 6 지원


Release v2.3.0 · vercel/swr

github.com/vercel/swr/releases/tag/v2.3.0

React library ReleaseNote

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

nodejs ShellScript library ReleaseNote

zx 8.3.0 출시.
Async Iterator 대응, pipe() 개선, --env 플래그 추가


Nuxt 3.15 · Nuxt Blog

nuxt.com/blog/v3-15

Nuxt ReleaseNote

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

pnpm ReleaseNote

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

rspack security ReleaseNote

rspack v1.1.8 출시.
@rspack/core@rspack/cli v1.1.7 패키지가 하이재킹되어 멀웨어 포함한 버전을 배포한 문제를 대응하는 출시.


읽을거리


Design Token-Based UI Architecture

martinfowler.com/articles/design-token-based-ui-architecture.html

Design UI architecture article

Design Token과 UI 개발에 대하여.
Design Token을 2개 or 3개 레이어에 분할하는 이유, Token 스코프, Design Token 장/단점에 대하여


State of JavaScript 2024

2024.stateofjs.com/en-US

JavaScript Survey

State of JavaScript 2024 앙케이트 결과 공개.
JavaScript 언어 기능 / 라이브러리 / 테스트 / monorepo 관련하여.
또한 JS와 TS의 비율, AI 이용률, 학습 자원에 대해서도 다룸


Service Worker가 페이지를 컨트롤하는 타이밍을 skipWaiting 와 clients.claim 으로 이해한다 - 카미나시 엔지니어 블로그

kaminashi-developer.hatenablog.jp/entry/2024/12/20/080000

ServiceWorker article

Service Worker의 skipWaitingclients.claim 동작에 대하여.


React Aria 구현 읽을거야 - Qiita Advent Calendar 2024 - Qiita

qiita.com/advent-calendar/2024/react-aria

React accessibility article

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/

css article fonts

CSS의 text-box-trim/text-edge/text-box에서의 타이포그래피에 대하여


소프트웨어, 도구, 라이브러리


Zero Docs

zero.rocicorp.dev/

JavaScript React WebSocket library database

클라이언트와 백엔드 데이터베이스 상태를 동기화하는 쿼리 엔진.
클라이언트에서 ORM으로 쿼리를 작성, 그 결과가 백엔드 데이터베이스에 반영. 또한 쿼리 결과는 클라이언트 모컬에서도 캐시해 재이용 가능하도록해서, 클라이언트에는 고속으로 반영됨.
권한은 Zero Schema에 스키마 정의함으로 클라이언트에서 실행가능한 쿼리를 제어한다.


Pull Request to this article
JSer.info Slackに参加する