Fork me on GitHub

2021-10-27: Yarn 3.1, Node.js 16.13.0(LTS), Next.js 12

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #563 - Yarn 3.1이 릴리스 됐다.

yarn init -2Node v16.9.0부터 지원되는 CorepackpackageManager 필드에 대응하고 있다.

또, PnP에서 EMS 지원, 새로운 설치 모드로 nodeLinker: pnpm를 지원한다.
optionalDependencies에서 지정한 아키텍처만 다운로드 하는 supportedArchitectures 설정을 추가했다. 지금까지의 Yarn은 optionalDependencies에 지정한 의존 환경을 모두 다운로드 했기 때문에 esbuild 등과 같이 아키텍처 별로 필요한 바이너리를 다운로드 하는데 많은 시간이 소요됐다.


Node.js 16.13.0이 릴리스 됐다. Node.js 16.x의 LTS이 이 버전부터 시작된다.

Node.js 16.x의 LTS는 2024년 4월 30일 까지 유지 관리 지원이 이뤄질 예정이다.


Next.js 12가 릴리스 됐다.

SWC 기반의 빌드, pages/_middleware.js를 사용한 Middlware, React 18(Server-Side Streaming와 React Server Components)을 지원한다.
또, webpack의 buildHttp를 사용한 URL Imports에 대응하며 URL로 직접 가져온 ES Modules은 next.lock 파일로 관리할 수 있다. 이어 크롤러 봇에 대한 ISR 최적화, AVIF 지원 등도 포함됐다.


헤드라인


Chromium Blog: Chrome 96 Beta: Conditional Focus, Priority Hints, and More

blog.chromium.org/2021/10/chrome-96-beta-conditional-focus.html

Chrome ReleaseNote

Chrome 96 beta 릴리스.
Chrome 버전 100을 실험해 볼 수 있는 플래그 추가.
Origin Trial로써 Conditional Focus, Priority Hints 추가.
BFCache를 Desktop에서도 활성화, CSS :autofill 의사 클래스와 Media Query의 prefers-contrast를 지원.
HTTPS DNS Records 지원, WebAssembly의 CSP 대응으로 wasm-unsafe-eval 지원.


[Early Preview] New React Documentation by rachelnabors · Pull Request #3965 · reactjs/reactjs.org

github.com/reactjs/reactjs.org/pull/3965

React issue document

React의 새로운 공식 문서 베타 버전 릴리스.


Security issue: compromised npm packages of ua-parser-js (0.7.29, 0.8.0, 1.0.0) - Questions about deprecated npm package ua-parser-js · Issue #536 · faisalman/ua-parser-js

github.com/faisalman/ua-parser-js/issues/536

npm security issue news

ua-parser-js 0.7.29 / 0.8.0 / 1.0.0에 맬웨어가 포함됐기 때문에 각 patch version으로 0.7.30 / 0.8.1 / 1.0.1가 릴리스 됐다.


Yarn 3.1 🎃👻 Corepack, ESM, pnpm, Optional Packages ... - DEV Community 👩‍💻👨‍💻

dev.to/arcanis/yarn-31-corepack-esm-pnpm-optional-packages--3hak

yarn ReleaseNote

Yarn 3.1 릴리스.
yarn init -2로 Corepack 지원, PnP에서 EMS 지원, nodeLinker: pnpm 지원.
optionalDependencies에서 지정한 아키텍처 만 다운로드 하는 supportedArchitectures 설정 추가, workspaces 명령어에 --since 플러그인 추가.


Release v1.2.0 - Masters of the Universe · solidjs/solid

github.com/solidjs/solid/releases/tag/v1.2.0

jsx ReleaseNote library

가상 돔을 사용하지 않는 UI를 위한 선언적 자바스크립트 라이브러리 Solid v1.2.0 릴리스.
Custom Renderer 지원, html 템플릿 리터럴로 Spread 구문 지원.


Node v16.13.0 (LTS) | Node.js

nodejs.org/en/blog/release/v16.13.0/

node.js ReleaseNote

Node.js 16의 Long Term Support (LTS) 버전인 16.13.0이 릴리스 됐다.
2024년 4월 30일 까지 유지 관리 된다.


Blog - Next.js 12 | Next.js

nextjs.org/blog/next-12

Next.js ReleaseNote

Next.js 12 릴리스.
SWC(Rust 컴파일러) 기반 빌드 지원, Middlware 지원(베타), React 18(Server-Side Streaming)과 React Server Components) 지원.
webpack의 buildHttp를 사용한 URL Imports에 대응, 크롤러 봇에 대한 ISR 최적화, AVIF 대응 등.


아티클


Optimizing resource loading with Priority Hints

web.dev/priority-hints/

Chrome browser article performance

Chrome 96 beta에서 Origin Trial로 구현된 Priority Hints 소개.
importance 속성을 사용하여 가져올 리소스의 우선 순위를 Hint로 정의할 수 있다.


TypeScript 4.5 이상에서 ESM 대응은 어떻게 돼 가고 있는가?(일본어)

zenn.dev/teppeis/articles/2021-10-typescript-45-esm

TypeScript article

TypeScript의 ESM 대응 현황과 향후 전략 그리고 사용 방법 등을 소개한다.


Monitor your web application with the Reporting API

web.dev/reporting-api/

Chrome browser article

Chrome 96 부터 이용할 수 있는 Reporting-Endpoints 소개.
Report-To는 Deprecated 되며 Reporting-Endpoints를 사용하도록 권장한다.
CSP 오류, 네트워크 오류, 정책 오류 등을 보고할 엔드포인트를 지정할 수 있다.


New WebKit Features in Safari 15 | WebKit

webkit.org/blog/11989/new-webkit-features-in-safari-15/

safari article

Safari 15 변경 사항 정리 및 공개.
WebExtensions 지원, theme-color 지원, CSS의 aspect-ratio, list-style-type에 새로운 속성값 추가.
JavaScript의 Top-Level await, Error Cause, Private class methods에 대응.
또, WebGL 2, Web Share API를 지원, 1초 이내 제한으로 requestAnimationFrame을 통해 사용자 제스처가 전파되도록 변경.
그 외로 iPad에서 VP9 / WebM 하드웨어 가속 지원, Private Click Measurement 갱신, autocomplete=one-time-code 대응


사이트, 서비스, 문서


Core Web Vitals Checker | Calibre

calibreapp.com/tools/core-web-vitals-checker

performance Tools Chrome

Chrome User Experience Report (CrUX)의 데이터를 기반으로 WebVital 스코어를 검사하는 도구.


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


unjs/unstorage: 🌍 💾 Universal Storage Layer

github.com/unjs/unstorage

JavaScript library

localForge 처럼 driver를 교체하여 사용할 수 있는 KVS 라이브러리.


도서


Gatsby: The Definitive Guide

learning.oreilly.com/library/view/gatsby-the-definitive/9781492087502/

JavaScript React book

Gatsby 입문서.


유려한 JavaScript 제 3 판 (no starch pressress) | 마린 하버비케, 이노우 | 책 | 통신 판매 | Amazon(일본어)

www.amazon.co.jp/dp/4802613377/

JavaScript book

Eloquent JavaScript의 일본어 번역서.


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