Fork me on GitHub

2023-02-08: Node.js v18.14.0(npm 9.x 으로 업데이트), Interop 2023, Learn Images

Translator: rewrite0w0(Oh TaeJun) Edit on GitHub See Revisions

JSer.info #630 - Node.js v18.14.0가 출시되었다.

Node.js v18.14.0는, npm 9.3.1 메이저 업데이트가 포함되었다.
npm 9에는, 여러 커맨드 삭제, 기본 설정 변경 등이 있다.

npm 업데이트로 인해서 패키지의 Node.js 테스트에 실패하지 않는 것, lock 파일이 자동 변경되지 않는 것 등을 조건으로 Node.js의 minor updates에 포함하도록 했다. 상세한 건 다음 페이지에 정리되어있다.

또한, Node.js v19.6.0에서는, npm v9.4.0가 동봉된다.

npm v9.4.0에서는 pnpm 같은 설치 모드 --install-strategy=linked가 실험적으로 지원된다.


브라우저 호환성 중점적 분야를 선정하는 Interop 2023가 개최되었다.

CSS에는 Container Queries, CSS Grid, :has() 등.
JS에는 Module, Offscreen Canvas, Pointer Events 등.
그 외에는 URL이나 WebCodecs 등이 중점분야로 선정되었다.

각 브라우저 관계자가 글을 공개하고 있으며, 중점적으로 다룰 기능에 대해서는 WebKit 블로그에 정리되어 있다.

각 브라우저의 구현 상황은 다음 페이지에 확인 가능하다.


To support JSer.info


헤드라인


Release v2.0.0 · pmndrs/jotai

github.com/pmndrs/jotai/releases/tag/v2.0.0

JavaScript library ReleaseNote

Jotai 2.0.0 출시.
createStore API를 expose.
파괴적 변경으로, get()이 자동적으로 Promise를 resolve 하지 않게, initialValuesstore에 전달하게 하는 변경 등


ECMAScript proposal updates @ 2023-01 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2023/02/03/ecmascript-proposal-update

ECMAScript proposal news

2023년 1월 TC39 미팅에 의한 Proposal 스테이지 변경 정리.
Array에 Immutable 메서드 추가하는 Proposal이 Stage 4가 되어 ES2023에 포함된다.
Node.js의 AsyncStorage API와 닮은 Async Context가 제안되었다.


Node v18.14.0 (LTS) | Node.js

nodejs.org/en/blog/release/v18.14.0/

node.js npm ReleaseNote

Node.js v18.14.0 출시.
npm 9.3.1 동봉되도록 변경.
npm 8에서 9는 파괴적 변경이 있지만, 업데이트에 의한 패키지 테스트가 실패하지 않고, lock 파일이 자동적으로 변경되지 않는 조건으로 Node.js의 minor update에 포함되었다.


Node v19.6.0 (Current) | Node.js

nodejs.org/en/blog/release/v19.6.0/

node.js ReleaseNote

Node.js v19.6.0 출시.
--experimental-loader에서 읽은 Loader가, 후에 읽힐 Loader에 적용되도록.
npm 9.4.0 업데이트로 --install-strategy=linked 지원


Release v9.4.0 · npm/cli

github.com/npm/cli/releases/tag/v9.4.0

npm ReleaseNote

npm v9.4.0 출시.
pnpm 같은 설치 전략 --install-strategy=linked 지원.
Isolated mode라 일컬여지던 RFC 구현.


읽을거리


Learn Images

web.dev/learn/images/

tutorial Image article

<img> 태그 등으로 이미지 다루는 튜토리얼.
반응형 이미지, 사진과 CLS 등의 퍼포먼스, 이미지 정량화, 이미지 포맷 자체의 특징, 이미지와 배포에 관련하여


What's New In DevTools (Chrome 110) - Chrome Developers

developer.chrome.com/en/blog/new-in-devtools-110/

Chrome debug Tools

Chrome 110 변경점에 대해.
로드할 때, Performance 탭을 정리하도록, User Flow 개선, Source 읽기를 기본값으로 정리되어 보이도록, Vue나 TSX 등에 신택스 하이라이트 대응.
Auto Complete 개선 등


ElementInternals and Form-Associated Custom Elements | WebKit

www.webkit.org/blog/13711/elementinternals-and-form-associated-custom-elements/

WebComponents article

Custom Element의 ElementInternals에 대해.
Custom Element에 aria-* 속성을 고정시켜버리는 문제를 #internals.aria*로 회피, Form Validation를 다루는 #internals.setFormValue 등.


On building the enterprise-grade Node.js applications | Code Flashbacks

www.codeflashbacks.com/announcing-the-enterprise-node-js-service-template/

node.js article

Node.js로 엔터프라이즈 애플리케이션을 만들 때의 템플릿 프로젝트에 대하여.
Fastify, DDD, E2E 테스트, 글로벌 에러 처리, 분산 트레이스를 위한 x-request-id 설정, 테스트, Type Safe한 설정 관리, Prisma를 사용한 DB 관리 등


웹사이트, 서비스, 문서


web-platform-tests dashboard

wpt.fyi/interop-2023

browser testing web

브라우저 호환성 관련하여 중점적 분야를 선정하는 Interop 2023가 개최되었다.
CSS에는 Container Queries, CSS Grid, :has() 등.
JS에는 Module, Offscreen Canvas, Pointer Events 등.
그 외에는 URL이나 WebCodecs 등이 중점분야로 선정되었다.


deps: replace url parser with Ada by anonrig · Pull Request #46410 · nodejs/node

github.com/nodejs/node/pull/46410

node.js URL issue performance

Node.js의 URL를 C++로 구현한 ada-url로 갈아끼우기.
현 URL 구현보다 퍼포먼스 개선되어.


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


CodeIntelligenceTesting/jazzer.js: Coverage-guided, in-process fuzzing for the Node.js

github.com/CodeIntelligenceTesting/jazzer.js

JavaScript testing library

libFuzzer 기반 Fuzzing 라이브러리


tanekloc/tmsg: Type-safe i18n library for TypeScript apps. Based on and largely compatible with MessageFormat.

github.com/tanekloc/tmsg

JavaScript TypeScript library i18n

messageformat 기능 지원하는 i18n라이브러리.
자료형으로 템플릿을 파싱하므로, 템플릿에 없는 값을 전달하면 컴파일 에러가 된다


shadcn/ui - Beautifully designed components built with Radix UI and Tailwind CSS.

ui.shadcn.com/

React UI library

Radix UI와 Tailwind CSS를 사용한 React UI 프레임워크


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