JSer.info #573 - AVA 4가 릴리스 됐다.
worker_threads를 이용한 병렬 실행을 기본 활성화, Shared workers가 안정 기능(stable)으로 변경됐다.
또, 상위 디렉터리의 ava.config.* 파일도 탐색하도록 개선, Snapshot 포맷 변경, 이전에 실패한 테스트 파일을 기억했다가 재실행 시 해당 테스트를 우선 순위 높게 다루도록 변경.
이어 ava.config.* 파일 자체를 ECMAScript Modules로 작성할 수 있도록 개선됐다.
Parcel 2.1.0이 릴리스 됐다.
ESM만 제공하는 라이브러리가 늘어남에 따라 browserslist에서 지정하고 있는 지원 브라우저를 근거하여 node_modules도 기본적으로 변환(transpile)하도록 변경됐다.
SharedArrayBuffer를 사용한 그래프 데이터로 재작성하여 성능 개선, 개발 시에는 지연 컴파일 하는 방식으로 성능 개선, HMR의 버그 수정 등이 포함됐다.
Excited to finally ship the graph implementation that @lettertwo and team worked on!
— Devon Govett (@devongovett) January 5, 2022
Some serious engineering went into this. It's a custom data structure backed by SharedArrayBuffer with similar perf to native v8 hash maps but with no serialization cost to send between threads! https://t.co/kP79Osa9Gd pic.twitter.com/0fgLlxf8J0
UI 프레임워크 Solid 1.3.0이 릴리스 됐다.
renderToStream API를 추가하고 HTML Streaming 지원, SSR 시에도 Error Boundaries가 가능하도록 개선 됐다.
hydrate 함수에서 renderId를 지원하며 동일 페이지 내 여러개의 Solid 애플리케이션을 각각 hydrate 가능하도록 변경됐고 createReaction API 추가 등도 이뤄졌다.
또 실험적인 API로서 enableExternalSource, refetchResources가 추가됐다.
헤드라인
jasmine/4.0.0.md at main · jasmine/jasmine
github.com/jasmine/jasmine/blob/main/release_notes/4.0.0.md
Jasmine 4.0.0 릴리스.
ES2017+를 갖는 실행 환경을 지원하기 위해 IE 지원을 종료하고, Ruby와 Python 버전 패키지 개발이 종료됐다.
beforeAll과 beforeEach의 에러 핸들링 개선, 전역 공간에 API를 추가하지 않는 noGlobals() 함수 지원.
What's new in Svelte: January 2022
svelte.dev/blog/whats-new-in-svelte-january-2022
개발 중인 SvelteKit의 변경 사항 정리.
precompress 옵션으로 brotli 압축 지원, config.kit.prerender.concurrency 옵션 추가, CSS를 JS 보다 우선하여 preload 하도록 변경.
Vite 2.7로 갱신, 설정을 변경한 경우에 서버를 자동으로 재시작하도록 개선.
helmet/CHANGELOG.md at main · helmetjs/helmet
github.com/helmetjs/helmet/blob/main/CHANGELOG.md#500---2022-01-02
helmet 5.0.0 릴리스.
ECMAScript Modules에 대응.
contentSecurityPolicy 옵션의 기본값 변경.
COEP, COOP, CORP, Origin-Agent-Cluster 헤더를 기본으로 활성화.
Release AVA 4 · avajs/ava
github.com/avajs/ava/releases/tag/v4.0.0
AVA 4 릴리스.
worker_threads를 사용한 병령 실행 기본 활성화.
Shared workers를 안정 기능(stable)으로 변경.
상위 디렉터리의 ava.config.* 파일을 탐색하도록 개선, Snapshot 포맷 변경, 이전에 실패한 테스트를 기억하고 재실행 시 해당 테스트를 우선 순위 높게 다루도록 변경, ESM 지원.
Ember 4.1 Released
blog.emberjs.com/ember-4-1-released/
Ember 4.1 릴리스.
@ember/service가 service를 export 하도록 변경, RouterService에 refresh 추가, @cached 활성화.
또, 이번 릴리스부터 AutoLocation 클래스를 비권장한다.
Release 1.2.0-beta.0 · vercel/swr
github.com/vercel/swr/releases/tag/1.2.0-beta.0
React 용의 Query 라이브러리 SWR 1.2.0 beta가 릴리스 됐다.
mutate에 즉각적 갱신을 하는 optimisticData과 에러가 발생한 경우 롤백할 수 있는 rollbackOnError 옵션이 추가 됐다.
parcel/CHANGELOG.md at v2 · parcel-bundler/parcel
github.com/parcel-bundler/parcel/blob/v2/CHANGELOG.md#210---2021-01-05
Parcel 2.1.0 릴리스.
node_modules를 기본적으로 변환(transpile)하도록 변경.
SharedArrayBuffer를 사용한 그래프 데이터 구조로 재작성하여 성능 개선, 개발 시에는 지연 컴파일하는 방식으로 성능 개선, HMR 버그 수정 등.
solid/CHANGELOG.md at main · solidjs/solid
github.com/solidjs/solid/blob/main/CHANGELOG.md#130---2021-1-5
Solid 1.3.0 릴리스.
renderToStream API를 추가하고 HTML Streaming 지원, SSR 시에도 Error Boundaries가 기능하도록 변경.
hydrate 함수에서 renderId를 지원하며 동일 페이지 내 여러개의 Solid 애플리케이션을 각각 hydrate 가능하도록 변경됐고 createReaction API 추가 됐다.
또, 실험적인 API로 enableExternalSource, refetchResources가 추가됐다.
아티클
브라우저 뒤로가기 시의 페이지 경험을 최적화하는 Yahoo!뉴스의 대처 사례 - Yahoo! JAPAN Tech Blog(일본어)
techblog.yahoo.co.jp/entry/2022010530253635/
브라우저 뒤로가기 여부를 판정하고 처리하는 기본적인 방법과 BFCache를 사용한 판단 및 처리하는 방법 소개.
뒤로가기 시의 스크롤 저장, BFCache가 유효한 조건, BFCache에서의 로그 문제 등을 다룬다.
Vite in the browser - ‹div›RIOTS
divriots.com/blog/vite-in-the-browser
브라우저 상에서 Vite를 실행하는 browser-vite의 구조 소개.
HTTP server를 Service Worker 기반으로 변경, 파일 시스템 의존을 삭제하고 in-memory로 동작하도록 개선, Bundler 구조를 플러그인과 서버측 번들링 구조로 변경, 크로스 브라우저 대응.
HMR에서 사용하고 있던 WebSockets을 postMessage 기반으로 변경하는 등 브라우저 상에서 Vite를 실행시킬 수 있도록 어떤 방법으로 접근했는지 이야기한다.
Node.js를 브라우저에서 실행하는 WebContainers(Chrome에서만 실행 가능)와는 다르게 Firefox / Chrome / Safari에서 동작할 수 있다.
소프트웨어, 도구, 라이브러리
vitebook/vitebook: 🔥 Blazing fast alternative to Storybook. Powered by Vite.
Vite 기반의 Storybook 대체 구현.
DioxusLabs/dioxus: Elegant React-like library for building user interfaces for desktop, web, mobile, SSR, liveview, and more.
Rust 환경에서 React 스럽게 선언적으로 UI를 표현할 수 있는 UI 프레임워크
RSX! 매크로를 사용한 선언적 UI 표현 방법 제공, React Hooks와 비슷한 API도 제공한다.
브라우저에서는 Wasm으로 변환하여 실행할 수 있으며 데스크탑과 모바일 앱 등에서는 WebView와 네이티브 Rust를 기반으로 동작한다.
도서
휘어잡는 CSS 설계 | 마이네비북스(일본어)
book.mynavi.jp/ec/products/detail/id=126973
CSS 설계 방법과 관련 도구 등을 다루는 도서.
