JSer.info #545 - Node.js 용 HTTP 클라이언트 Undici 4 릴리스.

Introducing Undici@4. After a few years since the first… | by Node.js | Jun, 2021 | Medium
Release v4.0.0 - Unified API, Docs Site, WASM, Redirect and Mocking · nodejs/undici

Undici는 Node.js의 http 대신할 용도로 net이나 tls를 사용해서 처음부터 다시 작성한 HTTP 클라이언트다.

It’s implemented from scratch. The old client cannot be due to inefficient design of the internals, as well as years of maintaining legacy APIs!
— Matteo Collina (@matteocollina) February 15, 2021

Undici 4.0에서는 Node.js 10 지원 종료 됐다.
HTTP 파싱에 llhttp의 Wasm 빌드 버전 사용, maxRedirections에서의 리다이렉트 지원, nock에서 영감을 받은 목 기능 지원.

또, 4.0에 맞춰 공식 웹사이트(https://undici.nodejs.org/)도 함께 공개됐다.

Next.js 11 릴리스.

Blog - Next.js 11 | Next.js

Next.js 전용 설정으로 Lint를 실행하는 npx next lint라는 ESLint 연동이 추가됐다.

Basic Features: ESLint | Next.js

성능 개선, Script 로드 컴포넌트 next/script 추가, next/image에서 이미지 크기 감지하여 자동으로 플레이스 홀더 크기가 지정되도록(local images), webpack 5 기본 적용.

그 외로 Create React App에서 마이그레이션 하는 도구가 공개됐다.

Safari 15 Beta에 대당하는 Safari Technology Preview 126 릴리스.

Safari 15 Beta에는 다음과 같은 변경 사항이 포함된다.

HTML : autocomplete=one-time-code 대응, theme-color와 media 속성 지원
JavaScript : Top-Level await, Worker에서의 ESM, Error Cause 지원
CSS : Box 요소에서 aspect-ratio, lab() / lch() / hwb() 색상 구문 지원
Media : Media에서 MediaSession API, iPad에서 VP9와 WebM의 하드웨어 가속 활성, WebM에서 Opus 코덱 지원
Security & Privacy : 주소 바 URL을 입력할 때 https://를 기본으로 설정하도록 변경
- Chrome 90에서도 동일한 변경이 이뤄짐
WebAssembly : Streaming compilation와 Reference types 지원
Graphic : WebGL 2과 Web Share Level 2 지원

또, iOS와 iPadOS에서 Safari의 확장을 지원하고 declarativeNetRequest API 등이 포함된다.

헤드라인

Wasmer 2.0, Its a big deal!

wasmer.io/posts/wasmer-2.0

WebAssembly ReleaseNote

WebAssembly Runtime인 Wasmer 2.0 릴리스.
SIMD, Reference Types에 대응, 성능 개선.

Release 2.0.0 · wasmerio/wasmer

Introducing Undici@4. After a few years since the first… | by Node.js | Jun, 2021 | Medium

nodejs.medium.com/introducing-undici-4-1e321243e007

node.js ReleaseNote

Node.js 용 HTTP 클라이언트 Undici 4 릴리스.
Node.js 10 지원 종료, 웹사이트 공개.
HTTP 파싱에 llhttp의 Wasm 빌드 버전 사용, maxRedirections에서의 리다이렉트 지원, nock에서 영감을 받은 목 기능 지원.

Release v1.0.0 · pmndrs/jotai

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

JavaScript library ReleaseNote React

React 용 상태 관리 라이브러리 Jotai 1.0.0 릴리스.

Release v1.6.0 : RTK Query! · reduxjs/redux-toolkit

github.com/reduxjs/redux-toolkit/releases/tag/v1.6.0

redux library ReleaseNote

toolkit 1.6.0 릴리스.
별도 프로젝트로 개발하고 있던 RTK(Redux Toolkit) Query가 합쳐졌다.

Blog - Next.js 11 | Next.js

nextjs.org/blog/next-11

Next.js ReleaseNote

Next.js 11 릴리스.
ESLint 연동, 성능 개선, Script 로드 컴포넌트 next/script 추가, next/image에서 이미지 크기 감지하여 자동으로 플레이스 홀더 크기 지정되도록(local images), webpack 5 기본 적용.
Create React App에서 마이그레이션 하는 도구도 공개됐다.

Basic Features: ESLint | Next.js

Release Notes for Safari Technology Preview 126 with Safari 15 Features | WebKit

webkit.org/blog/11727/release-notes-for-safari-technology-preview-126-with-safari-15-features/

safari ReleaseNote

Safari Technology Preview 126 릴리스.
Safari 15에 상응하는 변경 사항 포함.
autocomplete=one-time-code에 대응, theme-color와 media 지원.
Top-Level await, Worker에서 ESM, Error Cause 지원.
MediaSession API, iPad에서 VP9과 WebM의 하드웨어 가속 활성화, WebM에서 Opus 코덱 지원.
WebAssembly의 Streaming compilation와 Reference types 지원.
또, WebGL 2와 Web Share Level 2도 지원한다.
그 외로는 iOS와 iPadOS에서 Safari의 웹 확장을 지원하고 declarativeNetRequest API도 구현 및 제공한다.

Tailwind CSS v2.2 – Tailwind CSS

blog.tailwindcss.com/tailwindcss-2-2

CSS library ReleaseNote

Tailwind CSS v2.2 릴리스.

JIT 모드 변경, CLI를 재작성하고 --watch 등 지원.
JIT 모드에서 before / after / first-letter / first-line 등 의사 요소 지원.
또, selection과 mark variant를 지원하고 color: 등의 type을 붙여서 유연하게 값을 지정할 수 있도록 변경.

Release v2.2.0 · tailwindlabs/tailwindcss

Release 3.15.0 - 2021.06.21 · zloirock/core-js

github.com/zloirock/core-js/releases/tag/v3.15.0

JavaScript polyfill library ReleaseNote

core-js 3.15.0 릴리스.
RegExp의 named capture group, dotAll 플래그 지원, 임베디드 JavaScript 엔진 용(non-browser engines)을 위한 Annex B 기능 폴리필 추가.

아티클

A Visual Guide to NodeJS Streams. In NodeJS, stream module provides the… | by Deepal Jayasekara | Jun, 2021 | Deepal’s Blog

blog.insiderattack.net/a-visual-guide-to-nodejs-streams-9d2d594a9bf5

node.js stream article

Node.js Stream에 대한 설명 글.
Reaable, Writable, Duplex, Transform, Piping Stream에 대해 그림(도형)과 함께 동작 방식을 알기 쉽게 설명.
또, back pressure와 highWaterMark에 대해서도 이야기한다.

CSS System Colors - Jim Nielsen’s Blog

blog.jim-nielsen.com/2021/css-system-colors/

CSS article

글자색과 배경색의 Light / Dark 모드 전환 대응 방법.
OS의 시스템 색상으로 요소를 렌더링 하도록 하는 color-scheme: light dark;와 문서의 배경색에 기초해 색을 지정할 수 있는 Canvas 값을 사용해 해당 기능을 구현한다.

Benchmarking JavaScript Memory Usage - WebPageTest Blog

blog.webpagetest.org/posts/benchmarking-javascript-memory-usage/

JavaScript article performance

performance.measureUserAgentSpecificMemory()를 이용한 메모리 사용량 취득, 여러 성능 지표(metrics)와 메모리 사용량의 상관 관계 정리.
페이지 로드 시의 자바스크립트 크기와 메모리 사용량 상관 관계, 여러 프레임워크를 사용하고 있는 사이트 별 메모리 사용량 조사.