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
- 😘 Recommend JSer.info to your friends!
- ❤️ Support @azu on GitHub Sponsors/JSer.info Sponsors
- 🐦 Follow @jser_info on X(Twitter)
헤드라인
Announcing React Native 0.70 · React Native
reactnative.dev/blog/2022/09/05/version-070
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 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
miniflare 2.8.0 릴리스.
Vitest 지원, getMiniflareWaitUntil()
추가, Web Streams의 호환성 개선, Queues 에뮬레이터 지원 등.
preactjs/signals
Preact와 React에서 이용할 수 있는 상태 관리 라이브러리.
Ref와 비슷한 값을 갖고있는 시그널 오브젝트를 제공하며 이 객체를 Props로 전달하더라도 중간 컴포넌트를 재렌더링 되지 않는 구조.
한편, 값이 변경됐을 때 해당 Signal을 이용하고 있는 컴포넌트는 재렌더링 될 수 있도록 렌더링 처리를 훅한다.
Release v2.1.0 · nuxt/content
github.com/nuxt/content/releases/tag/v2.1.0
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/
Safari Technology Preview 153 릴리스.
import-assertion과 JSON 모듈 지원, Temporal.PlainDateTime
을 플래그 붙여 구현.
ShadowDOM의 Imperative Slot API 구현, navigator.permissions.query
를 Worker에서 지원.
Blog - Next.js 12.3 | Next.js
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 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
Jasmine 4.4.0 릴리스.
테스트 스위트의 성능 개선
Release v9.0.0-pre.0 · npm/cli
github.com/npm/cli/releases/tag/v9.0.0-pre.0
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 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
npm 레파지토리로 부터 패키지를 설치하는 패키지 매니저를 직접 만들어보면서 패키지 매니저의 구조, 구현 방법 등을 배워볼 수 있는 글.
Bytecode Alliance
bytecodealliance.org/articles/wasmtime-10-performance
WebAssembly 컴파일러 Cranelift과 런타임인 Wasmtime 소개.
어떻게 Wasm 실행을 최적화할 수 있는지 다루고 있다.
사이트, 서비스, 문서
hand-dot/react-inspector: Easily detect React components source code from Chrome!
github.com/hand-dot/react-inspector
클릭한 React 컴포넌트의 소스 코드를 에디터에서 살펴볼 수 있도록 도와주는 Chrome 확장
GradeJS | Production Webpack Bundle Analyzer
URL로 지정한 사이트의 production build(webpack)로 부터 어떠한 라이브러리와 버전이 포함돼 있는지를 분석해주는 도구.
facebookincubator/memlab: A testing framework for finding JavaScript memory leaks and analyzing heap snapshots
github.com/facebookincubator/memlab
웹 애플리케이션의 메모리 릭을 시나리오 기반으로 발견할 수 있는 디버그 도구.
시나리오를 정의하고 Puppeteer를 사용해 브라우저 접속 전 / 후 힙 스냅샷을 토대로 메모리 릭을 발생시키는 객체를 찾는 도구와 뷰어.
소프트웨어, 도구, 라이브러리
frameable/el: Minimal JavaScript application framework / WebComponents base class
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.
SVG 기반의 플로우 다이어그램 에디터 라이브러리.