JSer.info #544 - React 18 알파 버전 릴리스 소식과 React 18에서 변경될 예정인 내용 공개.
React 18 알파 버전은 라이브러리의 유지보수 용이며 이와 함께 React 워킹 그룹도 개설됐다.
React 18에 대한 자세한 변경 예정 사항은 다음 Discussions에 정리 및 논의되고 있다.
React 18로의 변경은 기본적으로 ReactDOM.createRoot라는 새로운 API를 사용하는 것으로 즉, 옵트인 방식으로 제공.
전체적인 개요는 다음 스레드에 정리돼 있으니 참고.
주요 변경 사항에 대한 각 개요는 다음과 같다.
- Replacing render with createRoot · Discussion #5 · reactwg/react-18
ReactDOM.render를 대체할React.createRoot라는 Root(Container)를 만들기 위한 API 추가.- Legacy
renderAPI는 호환성을 위해 유지한다. - React 18의 기능 변경 및 추가 기능은 기본적으로 이 새로운
React.createRootAPI로 생성한 하위 트리에 적용.
- Automatic batching for fewer renders in React 18 · Discussion #21 · reactwg/react-18
- state 변경이 자동으로 batch 처리(그룹화)되며 렌더링 역시 취합됨.
- 이전에 있던
unstable_batchedUpdates에 해당하는 처리. - 의도적으로 각 변경마다 렌더링을 일으키는 방법으로
ReactDOM.flushSyncAPI가 추가됨.
- Upgrading to React 18 on the server · Discussion #22 · reactwg/react-18
- Suspense에 대응한 SSR을 지원하는
pipeToNodeWritable추가. - 자세한 구조는 New Suspense SSR Architecture in React 18 #37에 설명돼 있음.
- React 18: Suspense를 이용한 새로운 SSR 아키텍처(한국어)
- Suspense에 대응한 SSR을 지원하는
- New feature: startTransition · Discussion #41 · reactwg/react-18
- 전환(transition)을 표시(marked)하는 startTransition에 대해. 전환 중에 불필요한 렌더링을 중단하여 응답성을 유지하는데 목적이 있음.
- 즉, UI를 크게 바꾸는 처리를 전환(transition)으로 표시(marked)하여 다른 처리가 발생(interrupt)하면 해당 처리를 중단하는 방식.
- Adding Strict Effects to StrictMode · Discussion #19 · reactwg/react-18
- 버그를 조기에 발견하기 위해 Development 모드의
StrictMode에서는 컴포넌트를 이중으로 렌더링 함. - mount → unmount → mount 하는 것으로 의도하지 않은 effect를 발견.
- How to support strict effects · Discussion #18 · reactwg/react-18
- 버그를 조기에 발견하기 위해 Development 모드의
Deno 1.11 릴리스.
Docker Image 추가, Web Crypto APIs 개선, crypto.randomUUID 지원, Fetch API에서 AbortSignal 지원, deno lint가 Stable로 전환됨, deno compile에서 Dynamic Import 지원, Text{Encoder,Decodeer}Stream 지원.
그 외로 deno lsp의 개선이 이뤄졌고 Deno API가 file://이나 URL 객체를 지원한다.
헤드라인
Release v7.0.0 · d3/d3
github.com/d3/d3/releases/tag/v7.0.0
D3.js v7.0.0 릴리스.
ESM에 대응, null에 대한 대응 변경, d3.selectAll등 에서 Array-like를 Array로 변경하여 다루도록 변경됐다.
추가된 가능으로는 d3.mode, d3.flatGroup, d3.flatRollup, transition.selectChild가 있다.
Release v0.7.0 · nextapps-de/flexsearch
github.com/nextapps-de/flexsearch/releases/tag/0.7.0
JavaScript로 작성된 전문(글의 전체) 검색 엔진 flexsearch 0.7.0 릴리스.
처음부터 다시 작성한 버전이다.
메모리 사용량 및 성능 개선, Bidirectional Context 지원, Node.js의 worker_thread에 대응.
Deno 1.11 Release Notes | Deno Blog
Deno 1.11 릴리스.
Docker Image 추가, Web Crypto APIs 개선, crypto.randomUUID 지원, Fetch API에서 AbortSignal 지원, deno lint가 Stable로 전환됨, deno compile에서 Dynamic Import 지원, Text{Encoder,Decodeer}Stream 지원.
Release 2.16.0 · qunitjs/qunit
github.com/qunitjs/qunit/releases/tag/2.16.0
QUnit 2.16.0 릴리스.
QUnit.test.each 메서드, failOnZeroTests 옵션, TAP 보고서 삭제.
QUnit.module에서 Promise를 반환한 경우 경고가 출력 되도록 개선.
🎉 Announcing Plotly.js 2.0! - Graphing Library / Plotly.js - Plotly Community Forum
community.plotly.com/t/announcing-plotly-js-2-0/53675
Plotly.js 2.0 릴리스.
IE 9/10 지원 종료, 비권장 API인 Plotly.plot()과 plotly.d3 등 삭제.
CSP의 usafe-eval에 대응, Custom Bundle 작성 방법 추가 등.
CSS Layout Generator
CSS Grid Layout 제너레이터 도구.
CSS Grid의 프로퍼티를 수정해가면서 레이아웃이 어떻게 구성되는지 알 수 있다.
Release 5.0.0 · Unitech/pm2
github.com/Unitech/pm2/releases/tag/5.0.0
Node 프로세스 관리 도구 pm2 5.0.0 릴리스.
로컬 시스템 모니터링이 개편됐고 서버 지표(메트릭스) 표시가 추가됐다.
pm2.io 로 송신하는 데이터를 JSON Patch 기반으로 차분하는 것으로 데이터 전송량을 줄이도록 개선됐다.
Introducing Astro: Ship Less JavaScript
astro.build/blog/introducing-astro
자바스크립트를 전혀 포함하지 않는 정적 사이트를 생성할 수 있는 SSG 도구.
Island Architecture와 같이 상호작용이 필요한 부분은 자바스크립트를 포함한 컴포넌트만 로드해 사용하도록 돼 있다.
The Plan for React 18 – React Blog
reactjs.org/blog/2021/06/08/the-plan-for-react-18.html
React 18의 알파 버전 릴리스와 함께 변경될 예정인 내용 정리.
Automatic batching과 flushSync 추가, Suspense의 SSR 지원 및 pipeToNodeWritable 추가, Concurrent 모드를 옵트인으로 지원.
새로운 render API인 createDOM 추가, 버그를 조기에 발견하기 위해 StrictMode에서는 컴포넌트를 이중으로 렌더링 하게됨.
또, React의 Working Group 저장소도 공개됐다.
- Discussions · reactwg/react-18
- Automatic batching for fewer renders in React 18 · Discussion #21 · reactwg/react-18
- Upgrading to React 18 on the server · Discussion #22 · reactwg/react-18
- New feature: startTransition · Discussion #41 · reactwg/react-18
- Replacing render with createRoot · Discussion #5 · reactwg/react-18
- Adding Strict Effects to StrictMode · Discussion #19 · reactwg/react-18
Release v0.153.0 · facebook/flow
github.com/facebook/flow/releases/tag/v0.153.0
Flow 0.153.0 릴리스.
this를 사용하는 클래스의 메서드를 변수에 넣은 후 this의 bind를 해제하는 경우가 감지되면 에러가 되도록 개선, flow fix 명령어로 자동 수정을 실행할 수 있도록 변경.
아티클
Introducing libSquoosh
web.dev/introducing-libsquoosh/
리사이즈 등 이미지 압축 처리에 활용할 수 있는 Squoosh를 노드 라이브러리로 만든 libSquoosh 소개 글.
Introducing the Memory Inspector - Chrome Developers
developer.chrome.com/blog/memory-inspector/
Chrome 91의 DevTools에 추가된 Memory Inspector 소개 글.
ArrayBuffers 바이트의 엔디언을 선택해 살펴 볼 수 있음. 또, DWARF를 사용하여 C++이나 Wasm의 메모리도 볼 수 있다.
Stryker를 사용해 TypeScript에서 Mutation Testing 하기(일본어)
zenn.dev/daikik/articles/8cd20776991a9c
Stryker-js를 사용한 Mutation Testing 소개.
Securing Your Website With Subresource Integrity | CSS-Tricks
css-tricks.com/securing-your-website-with-subresource-integrity/
JavaScript를 배포하는 CDN이나 S3 bucket 등이 변조 됐을 경우에 웹 사이트에서 오염된 리소스 로드를 방지하기 위한 Subresource Integrity (SRI) 개념과 사용 방법 소개.
실제 비슷한 보안 문제 사례를 소개하면서 이야기를 풀어간다.
What's coming in ESLint v8.0.0 - ESLint - Pluggable JavaScript linter
eslint.org/blog/2021/06/whats-coming-in-eslint-8.0.0
ESLint v8.0.0에서 변경될 예정인 내용 정리.
비호환 변경 사항으로 Node 10 지원 종료, meta.hasSuggestions와 meta.fixable이 각각 필수 속성으로 변경, CLIEngine 삭제.
또, ES2022 지원, 사용하지 않는 비활성화 지시문(directives)을 자동으로 제거할 수 있도록 --fix에 대응.
도서
From AVIF to WebP: A New Smashing Book By Addy Osmani — Smashing Magazine
www.smashingmagazine.com/2021/06/image-optimization-book-release/
이미지 포멧, 이미지 압축, 불러오기 방법, 렌더링, Core Web Vitals 등을 소개하는 글.
