JSer.info #605 - React / Vue / svelte 등의 UI 프레임워크를 이용할 수 있는 컨텐츠 퍼스트 웹 사이트 용 프레임워크인 Astro 1.0 릴리스.
베타를 기준으로 SSR Builds 추가, 이미지를 최적화하는 <Image>와 <Picture> 추가, MDX 지원, Vite 3.0로 업데이트가 이뤄졌다.
이전 가이드는 아래 문서를 통해 공개돼 있으니 참고한다.
Node.js v16.17.0가 릴리스 됐다.
Node.js 18로 부터의 backport가 주로 이뤄져 util.parseArgs, ESM Loader Hooks API, node:test 모듈이 추가 됐고, Web Crypto API의 호환성이 개선됐다.
Big Changes Ahead for Deno에서는 Deno의 향후 방향성에 대해서 정리하고 있다.
npm: URL를 사용해 npm 모듈을 설치 가능하도록 하여 Node.js와의 호환성 향상, FFI 개선 등을 토대로 성능 향상, 코드로 부터 문서를 자동 생성할 수 있도록 하는 업데이트 예정 사항이 정리돼 있다.
이러한 변경 내용은 Node.js compability mode 등에서 원래 검토 됐던 부분의 연장이라 볼 수 있으나 Bun과의 기능, 벤치마크 비교 등을 의식한 부분도 있는 것 같다.
한편 Bun은 안정성 향상, npm 패키지 / Node.js와의 호환성 향상, Contribution 흐름 개선, 오래된 CPU에서도 동작 가능하도록 하는 것에 우선도를 높게 두고 있다.
헤드라인
Astro 1.0 | Astro
Astro 1.0 릴리스.
SSR Builds 추가, 이미지를 최적화하는 <Image>와 <Picture> 추가, MDX 지원, Vite 3.0으로 업데이특.
Release v0.15.0 · evanw/esbuild
github.com/evanw/esbuild/releases/tag/v0.15.0
esbuild v0.15.0 릴리스.
Yarn의 pnp를 지원한다.
Announcing TypeScript 4.8 RC - TypeScript
devblogs.microsoft.com/typescript/announcing-typescript-4-8-rc/
TypeScript 4.8 RC 릴리스.
* strictNullChecks가 유효할 시에 unknown를 {} | null | undefined의 통합 유형으로 다룰 수 있도록 관련 조작 흐름 분석 개선
* Template String Types에서의 infer 개선
* --build / -watch / --incremental에 의한 빌드 성능 개선
* 객체 리터럴과 배열 리터널을 동등(==) 혹은 일치(===) 연산자로 비교할 경우 에러가 발생하도록 변경
* Binding pattern 타입 추론 기능 개선
* --watch의 안전성 개선
Release Notes for Safari Technology Preview 151 | WebKit
webkit.org/blog/13093/release-notes-for-safari-technology-preview-151/
Safari Technology Preview 151 릴리스.
* CSS의 color-mix() 함수 지원
* media query의 scan 지원
* :dir 의사 클래스 지원
* iframe의 lazy loading을 기본으로 활성화
* XHR의 abort를 사양에 근거하여 수정
Node v16.17.0 (LTS) | Node.js
nodejs.org/en/blog/release/v16.17.0/
Node.js 16.17.0 릴리스.
util.parseArgs, ESM Loader Hooks API, node:test 모듈, Web Crypto API의 호환성 개선 내용 백포트.
Release v0.22.0 · vitest-dev/vitest
github.com/vitest-dev/vitest/releases/tag/v0.22.0
vitest 0.22.0 릴리스.
커버리지 도구로 c8과 istanbul을 선택할 수 있도록 @vitest/coverage-c8과 @vitest/coverage-istanbul가 PeerDependency로 변경됐다.
Big Changes Ahead for Deno
Deno의 향후 계획을 소개하는 글.
FFI 개선, npm: URL을 사용해 npm 모듈을 설치할 수 있도록 호환성 개선, 코드로 부터 문서를 자동 생성하는 업데이트를 예정하고 있다.
Release 3.0.0-alpha.0 · prettier/prettier
github.com/prettier/prettier/releases/tag/3.0.0-alpha.0
prettier 3.0.0-alpha.0 릴리스.
ESM 대응, Node.js 12 지원 종료, Public API의 비동기화, trailingComma의 기본값을 all로 변경.
아티클
Objects, Functions, and Type Narrowing | Learning TypeScript
www.learningtypescript.com/articles/objects-functions-and-type-narrowing?s=t
TypeScript의 Narrowing를 소개하는 글.
변수 객체 속성, 함수 호출, 함수 인수 등의 경우에 따른 Narrowing의 동작 방식에 대해서 이야기한다.
Will Bun JavaScript Take Node's Crown
semaphoreci.com/blog/javascript-bun
Node.js / Deno / Bun 벤치마크 비교 글
Why is CrUX data different from my RUM data?
web.dev/crux-and-rum-differences/
CrUX와 RUM의 차이, CrUX의 측정 데이터란 무엇인지 소개.
outline is your friend - Manuel Matuzović
www.matuzo.at/blog/2022/focus-outline/
CSS outline 속성의 개요와 장/단점 등을 소개하는 글.
The blind programmers who created screen readers - The Verge
www.theverge.com/23203911/screen-readers-history-blind-henter-curran-teh-nvda
스크린리더의 JAWS와 NVDA가 어떤 경위로 만들어졌는지 그 역사를 다루는 글.
소프트웨어, 도구, 라이브러리
pemistahl/grex-js: A JavaScript / WebAssembly library for generating regular expressions from user-provided test cases
문자열 배열에서 이와 매치되는 정규 표현을 생성하는 라이브러리.
const testCases = ['hello', 'world'];
const pattern = RegExpBuilder.from(testCases).build();
console.log(pattern === '^(?:hello|world)$');
