Fork me on GitHub

2022-09-13: Next.js 12.3, npm 9 pre 릴리스, Safari 16

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #609 - Next.js 12.3가 릴리스 됐다.

TypeScript 자동 설치 지원, .env 등을 변경할 시 Fast Refreshが 지원, next/future/image 컴포넌트 개선.
또, 실험적인 옵션으로 unoptimized 추가 됐으며 SWC로 코드를 압축하는 swcMinify가 안정적(stable)으로 됐다.


npm v9.0.0-pre.0가 릴리스 됐다.

Node.js 12 지원이 종료 됐다.
workspaces에서 semver의 range를 지정 가능하도록 개선, npm birthday 명령어, npm bin 명령어 삭제.
또, npm pkg 명령어가 있기 대문에 v8.11.0에서 비권장 됐던 npm set-script가 삭제 됐다.
로컬 패키지를 symbolic link가 아니라 패키지로서 설치하는 install-links 옵션의 기본 값이 true로 변경 됐다.


각 iOS / iPad OS / macOS에서 운영체제 갱신이 이뤄지고 Safari 16가 공개됐다.

AVIF 형식 지원, Passkeys 지원, Web Inspector Extensions 지원, CSS의 Container Queries, Subgrid 지원.
또, display: contents의 접근성 개선,Motion Path, Overscroll Behavior, Shared Workers 지원 등이 포함됐다.
그 외로 <form>.requestSubmit(), showPicker()도 지원이 이뤄졌다.


To support JSer.info


헤드라인


Announcing React Native 0.70 · React Native

reactnative.dev/blog/2022/09/05/version-070

React Native ReleaseNote

React Native, 0.70.0 릴리스.
Hermes를 기본 엔진으로 변경, iOS와 Android에서의 Codegen 설정 통합, Androi의 빌드 환경 개선 등.


7.19.0 Released: Stage 3 decorators and more RegExp features! · Babel

babeljs.io/blog/2022/09/05/7.19.0

babel JavaScript ReleaseNote

Babel 7.19.0 릴리스.
decorators와 recordAndTuple 기본 설정 변경, Stage 3의 decorators를 지원하는 플러그인 버전 추가, Duplicate named capturing groups 지원 등.


Release v2.8.0 · cloudflare/miniflare

github.com/cloudflare/miniflare/releases/tag/v2.8.0

cloudflare JavaScript Tools ReleaseNote

miniflare 2.8.0 릴리스.
Vitest 지원, getMiniflareWaitUntil() 추가, Web Streams의 호환성 개선, Queues 에뮬레이터 지원 등.


preactjs/signals

github.com/preactjs/signals

JavaScript React library performance

Preact와 React에서 이용할 수 있는 상태 관리 라이브러리.
Ref와 비슷한 값을 갖고있는 시그널 오브젝트를 제공하며 이 객체를 Props로 전달하더라도 중간 컴포넌트를 재렌더링 되지 않는 구조.
한편, 값이 변경됐을 때 해당 Signal을 이용하고 있는 컴포넌트는 재렌더링 될 수 있도록 렌더링 처리를 훅한다.


Release v2.1.0 · nuxt/content

github.com/nuxt/content/releases/tag/v2.1.0

Vue library ReleaseNote

Nuxt Content 2.1.0 릴리스.
Document Driven 모드 추가, <Markdown>을 비권장하고 대신 <ContentSlot />를 추가했다.


Release Notes for Safari Technology Preview 153 | WebKit

webkit.org/blog/13148/release-notes-for-safari-technology-preview-153/

webkit safari ReleaseNote

Safari Technology Preview 153 릴리스.
import-assertion과 JSON 모듈 지원, Temporal.PlainDateTime을 플래그 붙여 구현.
ShadowDOM의 Imperative Slot API 구현, navigator.permissions.query를 Worker에서 지원.


Blog - Next.js 12.3 | Next.js

nextjs.org/blog/next-12-3

Next.js ReleaseNote

Next.js 12.3 지원.
TypeScript 자동 설치 지원, .env 등을 변경할 시 Fast Refresh 지원, next/future/image 컴포넌트 개선.
실험적 옵션으로 unoptimized 추가, SWC에서 코드를 압축하는 swcMinify 추가


Node v18.9.0 (Current) | Node.js

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

node.js ReleaseNote

Node.js 18.9.0 릴리스.
diagnostics_channel에서 process/worker 지원, os.machine() 메서드 추가


jasmine/4.4.0.md at main · jasmine/jasmine

github.com/jasmine/jasmine/blob/main/release_notes/4.4.0.md

JavaScript testing library ReleaseNote

Jasmine 4.4.0 릴리스.
테스트 스위트의 성능 개선


Release v9.0.0-pre.0 · npm/cli

github.com/npm/cli/releases/tag/v9.0.0-pre.0

npm ReleaseNote

npm v9.0.0-pre.0 릴리스.
Node.js 12 지원 종료.
workspaces에서 semver의 range를 지정 가능하도록, npm birthday 명령어, npm bin 명령어 삭제, npm pkg 명령어가 있으므로 npm set-script 삭제.
로컬 패키지를 symbolic link이 아닌 패키지로서 설지하는 install-links 옵션의 기본 값을 true로 변경


WebKit Features in Safari 16.0 | WebKit

webkit.org/blog/13152/webkit-features-in-safari-16-0/

safari ReleaseNote

Safari 16의 변경 사항 정리.
AVIF 형식 지원, Passkeys 지원, Web Inspector Extensions 지원, CSS의 Container Queries, Subgrid 지원.
display: contents의 접근성 개선.
Motion Path, Overscroll Behavior, Shared Workers 지원.
<form>.requestSubmit(), showPicker() 지원.


아티클


엣지 있게 패키지 매니저를 만들어 보자(일본어)

zenn.dev/sa2knight/articles/d473ca2894b659

JavaScript node.js article npm

npm 레파지토리로 부터 패키지를 설치하는 패키지 매니저를 직접 만들어보면서 패키지 매니저의 구조, 구현 방법 등을 배워볼 수 있는 글.


Bytecode Alliance

bytecodealliance.org/articles/wasmtime-10-performance

WebAssembly article

WebAssembly 컴파일러 Cranelift과 런타임인 Wasmtime 소개.
어떻게 Wasm 실행을 최적화할 수 있는지 다루고 있다.


사이트, 서비스, 문서


hand-dot/react-inspector: Easily detect React components source code from Chrome!

github.com/hand-dot/react-inspector

React debug Tools

클릭한 React 컴포넌트의 소스 코드를 에디터에서 살펴볼 수 있도록 도와주는 Chrome 확장


GradeJS | Production Webpack Bundle Analyzer

gradejs.com/

webpack Tools webservice

URL로 지정한 사이트의 production build(webpack)로 부터 어떠한 라이브러리와 버전이 포함돼 있는지를 분석해주는 도구.


facebookincubator/memlab: A testing framework for finding JavaScript memory leaks and analyzing heap snapshots

github.com/facebookincubator/memlab

JavaScript debug Tools puppeteer

웹 애플리케이션의 메모리 릭을 시나리오 기반으로 발견할 수 있는 디버그 도구.
시나리오를 정의하고 Puppeteer를 사용해 브라우저 접속 전 / 후 힙 스냅샷을 토대로 메모리 릭을 발생시키는 객체를 찾는 도구와 뷰어.


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


frameable/el: Minimal JavaScript application framework / WebComponents base class

github.com/frameable/el

WebComponents library

Web Components 기반의 웹 어플리케이션 프레임워크.


AlexeyBoiko/DgrmJS: DgrmJS is a JavaScript library for creating SVG flow diagrams. The main goal of the library is to set up workflows in BPM (Business Process Management) systems. Works on desktop and mobile, has no dependency, 3.5 KB gzipped.

github.com/AlexeyBoiko/DgrmJS

SVG diagram library JavaScript

SVG 기반의 플로우 다이어그램 에디터 라이브러리.


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