JSer.info #567 - TypeScript 4.5가 정식 릴리스 됐다.

Announcing TypeScript 4.5 - TypeScript

TypeScript가 빌트인으로 갖고 있는 lib의 타입 정의를 package.json의 dependencies를 사용해 지정할 수 있도록 개선 됐다.
Awaited 타입 추가, Top-Level await을 지원하는 module: es2022 지원, Condition Types에서 꼬리 재귀 최적화 되도록 하는 변경도 포함됐다.
import 명에 적용할 수 있는 type modifier 지원, ES Proposal의 Private Field Presence Checks, Import Assertions 지원 등도 추가됐다.

TypeScript 4.5 Beta에 추가됐던 Node.js의 ESM 지원 사항은 4.6 이후로 릴리스가 연기됐다.

React 18 beta가 릴리스됐다.

useSyncExternalStore / useId / useInsertionEffect API가 각각 추가됐다.
React 18의 기능 개발은 이것으로 마무리되며 정식 버전의 릴리스를 위해 문서나 에러 개선 등을 진행하고 있다.

React 기반 웹 프레임워크인 Remix v1이 릴리스됐다.

Remix v1 | Remix

Next.js 등 처럼 React를 기반으로 한 프레임워크로 CLI, 라우팅, 라이프 사이클 메서드, React Hooks 등을 제공한다.
다른 프레임워크와 다른 점으로 SSG(Static Site Generator)가 아니라 클라이언트 서버 모델을 기본으로 채택하고 있다.
서버가 데이터를 반환할 때 필요한 데이터만 남도록 필터링 하여 클라이언트에 전송할 데이터를 최소화하는 데 목적을 둔 loader 함수를 갖고 있다.
어떠한 관점으로 만들고 있는지 다음 문서에 잘 정리돼 있으니 이해하는데 참고하길 바란다.

Remix | Philosophy

기본적으로 서버가 필요하기 때문에 서버 측 코드도 함께 공개돼 있다.
이 서버는 공식 호스팅 서비스 이외에도 fly.io나 Cloudflare Workers 등의 Edge로 동작할 수 있도록 고려돼 있다.

헤드라인

Announcing TypeScript 4.5 - TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-5/

TypeScript ReleaseNote

TypeScript 4.5 릴리스.
TypeScript가 빌트인으로 제공하는 lib의 타입 정의를 dependencies로 지정할 수 있도록 개선.
Awaited 타입 추가, Top-Level await을 지원하는 module: es2022 지원, Condition Types에서 꼬리 재귀 최적화 되도록.
import 명에 적용할 수 있는 type modifier 지원, ES Proposal의 Private Field Presence Checks, Import Assertions 지원

React 18 is now in beta · Discussion #112 · reactwg/react-18

github.com/reactwg/react-18/discussions/112

React ReleaseNote

React 18 beta 릴리즈.
useSyncExternalStore(useMutableSource를 이름 변경한 것), useId, useInsertionEffect 추가

Remix v1 | Remix

remix.run/blog/remix-v1

React library ReleaseNote

React 기반의 웹 프레임워크 Remix v1 릴리스.
CLI, 라우팅, 라이프 사이클 메서드, React Hooks 등을 제공한다.
클라이언트 서버 모델로, 서버가 반환하는 데이터를 필터링하여 최소한의 데이터를 이용할 수 있도록 하는 loader 함수를 갖고 있다.
서버 측을 fly.io나 Cloudflare Workers 등의 Edge로 실행하는데 목적을 두고 있다.

Release v6.0.0 · sindresorhus/execa

github.com/sindresorhus/execa/releases/tag/v6.0.0

node.js library ReleaseNote

execa 6.0.0 릴리스.
ESM 지원을 위한 변경, default export를 삭제하고 named export로 변경.

Release v4.0.0 · emberjs/ember.js

github.com/emberjs/ember.js/releases/tag/v4.0.0

Ember ReleaseNote

Ember 4.0.0 릴리스.

Ember 3.28 and 4.0 Beta Released

아티클

Chrome Devtools를 이용한 프런트엔드 성능 측정(일본어)

zenn.dev/koki_tech/articles/9deb70d0a9befb

Chrome debug article

Chrome 개발자 도구의 퍼포먼스 탭을 읽는 방법과 그래프가 나타내는 수치를 설명하는 글

Reimagine Atomic CSS

antfu.me/posts/reimagine-atomic-css

CSS article

Atomic CSS를 주제로 한 글.
사전 생성 + Prune로 접근하는 Tailwind 방식, 온디멘드 생성 방식 TailwindCSS 소개.
또, 아직 실험(개발) 중인 Atomic CSS 엔진 UnoCSS도 소개하고 있다.

What's New In DevTools (Chrome 96) - Chrome Developers

developer.chrome.com/blog/new-in-devtools-96/

Chrome debug article

Chrome96 개발자 도구의 변경 사항 정리.
CSS Overview 패널 추가, prefers-contrast와 Auto Dark Theme의 에뮬레이터 기능 추가.
Network 패널에 Payload 탭 추가, 시험적으로 Reporting API 패널이 추가 됐다.