JSer.info #586 - React 18 가 정식으로 릴리스되었다.
Internet Explorer의 지원이 종료되었다.
주요 변경점으로서 Concurrent Rendering을 지원하기 위한 변경과 새로운 API가 추가되었다.
setState의 호출을 자동적으로 배치화하고 opt-out하기 위한 flushSync가 추가(긴급하고 긴급하지 않은 상태 변경의 갱신을 취급하는 Transition API) 되었다.
클라이언트의 ReactDOM.render과ReactDOM.hydrate과 서버의renderToString는 모두 권장되지(deprecated) 않는다.
이에 새롭게 지원하는 API로서, 클라이언트에 createRoot/hydrateRoot、서버에 renderToPipeableStream/renderToReadableStream가 추가되었다.
또한,<StrictMode>가 개발시에 리마운트를 테스트하는 동작을 변경하였으며,useId/useSyncExternalStore/useInsertionEffect의 Hooks 등이 추가되었다.
상세한 마이그레이션 방법에 관해서는, 다음 문서가 공개되었다.
TypeScript의 타입 정의는 아직 React 18 지원 버전이 공개되어 있지않지만, 다음 Issue와 PR로 지원하고 있다.
React 주변의 도구나 라이브러리의 React 18 호환에 관해서는 다음 기사에 정리 되어있다.
Vite 2.9.0 버전이 릴리스 되었다.
의존관계의 scan과 pre-bundle 처리의 개선, 실험적인 CSS의 Source Map 지원, Web Worker의 Source Map 지원 개선이 포함되어 있다.
Glob Imports에{ as: 'raw' }가 추가 되어、{ assert: { type: 'raw' }}은 권장 되지 않는다.
{ assert: { type: 'raw' }}은 Vite 2.8 에서、Import Assertions을 의식하여 도입된 구문이지만,
Import Assertions은 읽어들이는 모듈의 `type'을 검증(assert)하는목적의 Proposal이다。그렇기 때문에 읽어 들이는 모듈의 평가 방법을 변경하는 구문이 아니다.
한편으로는, 읽어들이는 모듈의 평가 방법을 지정하는 Proposal로서 Import Reflection이 있다. Vite 2.9에서는 이곳의 Import Reflection 을 의식한 구문이 변경되었다.
Firefox의 퍼포먼스 도구가 새로워졌다.
UI도 크게 변했으며, 취득할 수 있는 데이터도 웹 사이트나 동영상 등의 특성에 맞춰 프리셋이 준비되어 있어, 각각 맞춤형 프로필을 얻을 수 있다.
또한 취득한 퍼포먼스 데이터는 https://profiler.firefox.com/ 에 표시되며 공유할 수 있다.
헤드라인
React v18.0 – React Blog
reactjs.org/blog/2022/03/29/react-v18.html
React 18 버전 릴리스
Concurrent Rendering에 지원하기 위한 변경과 새로운 API가 추가됨.
setState의 호출을 자동적으로 배치화하고 opt-out하기 위한 flushSync을 추가 및 페이지 변경시 상태를 취급하는 Transition API를 추가.
클라이언트에 createRoot/hydrateRoot, 서버에renderToPipeableStream/renderToReadableStream을 추가.
<StrictMode>가 개발시에 리마운트를 테스트하는 동작을 변경,useId/useSyncExternalStore/useInsertionEffect Hooks의 추가 등.
Release v6.3.0 · remix-run/react-router
github.com/remix-run/react-router/releases/tag/v6.3.0
React Router 6.3.0 버전 릴리스
v5에서 v6로의 이행을 보조하기 위해 react-router-dom-v5-compat 모듈 추가
Chromium Blog: Chrome 101: Federated Credential Management Origin Trial, Media Capabilities for WebRTC, and More
blog.chromium.org/2022/03/chrome-101-federated-credential.html
Chrome 101 베타 릴리스
UA 문자열 감소 개시
Origin Trial로서 FedCM의 추가、Priority Hints가 기본값으로 유효화
AudioContext.outputLatency의 구현、CSS ont-palette 프로퍼티의 구현、MediaCapabilities API가 WebRTC 를 서포트
Third-Party context 에서의 WebSQL 서포트 삭제 등
Announcing React Native 0.68 · React Native
reactnative.dev/blog/2022/03/30/version-068
React Native 0.68 릴리스
의존관계 업데이트, opt-in에서 New Architecture로의 지원을 지원함
React 18의 지원에 포함되어 있지 않음
Release 0.7.0 · facebookexperimental/Recoil
github.com/facebookexperimental/Recoil/releases/tag/0.7.0
Recoil 0.7.0 버전 릴리스
atom()과atomFamily()에default옵션을 추가、Snapshot 에getStoreID()메서드 추가 등
ECMAScript proposal updates @ 2022-03 | ECMAScript Daily
ecmascript-daily.github.io/ecmascript/2022/04/03/ecmascript-proposal-update
2022년 3월 TC39 Meeting 에서 논의된 ECMAScript Proposal State 변경 사항 정리
Type Annotations 이 State 1로, Decorator가 Stage 3이 되었다.
vite/CHANGELOG.md at main · vitejs/vite
github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30
Vite 2.9.0 릴리스
의존관계의 scan과 pre-bundle의 처리를 개선, 실험적 CSS의 Source Map의 지원, Web Worker의 Source Map 지원 개선
Glob Imports에 { as: 'raw' }가 추가되어、{ assert: { type: 'raw' }}은 권장 되지 않음
Plugin에 대한 변경점으로서, Client와 Server 간의 WebSockets에서 상호 교환할 수 있는 API의 추가 등
Electron 18.0.0 | Electron
www.electronjs.org/blog/electron-18-0
Electron 18.0.0 릴리스
Chromium 100、Node.js 16.13.2、V8 10.0 로 업데이트
Electron 15에서 nativeWindowOpen: true가 기본값으로 되었으므로, 이를 무효화하기 위해서만 남겨져 있던 nativeWindowOpen 옵션이 삭제되었다.
아티클
Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog
hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/
Firefox 의 퍼포먼스탭이 새로워짐
프로필을 기록하고, 그 퍼포먼스 데이터를 https://profiler.firefox.com/ 에서 표시하고 공유할 수 있도록 됨
What's New In DevTools (Chrome 100) - Chrome Developers
developer.chrome.com/blog/new-in-devtools-100/
Chrome 100의 개발자 도구의 변경점에 관하여
@support의 지원、Recorder 에서 data-test속성등의 지원、기록된 셀렉터 변경을 지원
"Droppped frames"을"Partially presented frames"이라는 표현으로 변경 등
When does React render your component?
www.zhenghao.io/posts/react-rerender
React 컴포넌트가 언제 렌더링되는지에 관해 쓰인 기사
React 컴포넌트가 리렌더링되는 조건, Props와 Child 컴포넌트의 렌더링, Context와 리렌더링에 관해서 등
Understanding Layout Algorithms
www.joshwcomeau.com/css/understanding-layout-algorithms/
CSS의 레이아웃 알고리즘(레이아웃 모드)에 관해서
각각의 레이아웃 알고리즘에 의해 같은 프로퍼티라도 어떻게 처리되는지는 다르다. 프로퍼티는 레이아웃 알고리즘이라는 함수에 전달된 인수같은 것이라는 이야기
Locale Aware Sorting in JavaScript
elijahmanor.com/byte/js-locale-sort
Intl.Collator를 사용한 로컬라이즈된 문자열의 정렬에 관해서
사이트、서비스、문서
Shakerphobia
npm 패키지 때부터 import 할 것을 지정하고, Tree Shaking 후에 번들 사이즈를 측정하는 도구
nuxodin/dialog-polyfill: "insert and thats it"-dialog-polyfill
github.com/nuxodin/dialog-polyfill
Dialog 요소의 polyfill 라이브러리
소프트웨어、도구、라이브러리 관련
nicolo-ribaudo/jest-light-runner: A Jest runner that runs tests directly in bare Node.js, without virtualizing the environment.
github.com/nicolo-ribaudo/jest-light-runner
Jest를 위한 가벼운 Runner
jest-runner에서 테스트케이스 째로 Isolation의 지원을 제거함으로써, 테스트의 실행을 더욱 빠르게 한다.
