JSer.info #511 - React 17 정식 릴리스.
React 17에 추가된 새로운 기능은 없으며 업데이트를 단계적으로 하기 쉽게 만들기 위한 시스템이 추가됐다.
향후 React 18이 릴리스 될 때 React 17과 React 18이 하나의 애플리케이션 내에서 함께 실행될 수 있도록 하는 시스템이다.
이는 앱 내에서 단계적으로 React 버전을 업데이트 할 수 있도록 하는 것에 목적이 있다.
이 와 관련해 React의 Event Delegation 구조가 변경됐다.
지금까지는 Document 노드에 이벤트를 위임했지만 React 17부터는 렌더링한 Root 노트에 이벤트를 위임한다.
비호환 변경 사항으로 event pooling 구조 삭제, event.persist() 비활성화, onScroll이 버블링 되지 않도록, useEffect의 cleanup 함수가 반드시 비동기로 실행되도록 변경됐다.
자세한 내용은 17 RC 문서에 정리돼 있다.
또, 관련해 Create React App 4.0도 릴리스 됐다.
React 17 / 새로운 JSX 변환 대응, TypeScript 4, ESLint 7, Jest 26로 갱신됐다.
이어 Fast Refresh, workbox 개선, Web Vitals 리포트를 지원한다.
Node.js 15.0.0이 릴리스됐다.
Note: 홀수 버전이므로 LTS 아님
- Node v15.0.0 (Current) | Node.js
- Node.js v15.0.0 is here!. This blog was written by Bethany… | by Node.js | Oct, 2020 | Medium
비호환 변경 사항으로 N-API 7으로, npm 7으로, V8 8.6으로 각각 갱신됐으며 unhandledRejection=throw가 기본 모드로 설정됐고 URL 객체가 사양에 맞춰 변경됐다.
또, 웹표준 API와의 호환성을 위해 AbortController와 EventTarget을 지원하고 crypto 모듈이 Web Crypto API를 지원한다.
그 외로 timers/promise와 stream/promises가 추가됐고, 실험적으로 QUIC 기능을 지원한다.
C++로 작성된 LibSass(node-sass)가 비권장됐다.
현재는 Dart로 작성된 DartSass(sass)가 메인으로 개발되고 있으며 LibSass는 기능 추가나 새로운 문법을 지원하지 않으며 유지보수만 진행한다.
헤드라인
React v17.0 – React Blog
reactjs.org/blog/2020/10/20/react-v17.html
React 17.0 릴리스.
여러개의 버전을 함께 실행할 수 있도록 하여 단계적으로 업데이트 가능하도록 시스템을 개선했다.
관련해 이벤트 위임 구조 변경, 새로운 JSX 체계를 대응하며 0.14.x, 15.x, 16.x에 대한 지원도 백포트하고 있다.
Firefox 82.0, See All New Features, Updates and Fixes
www.mozilla.org/en-US/firefox/82.0/releasenotes/
Firefox 82 릴리스.
server-sent events의 inspect 지원, Media Session API 기본적으로 활성화, 페이지 로드 및 스타트업 관련 성능 개선.
또, 크로스 오리진에서 window.name은 항상 빈문자열을 반환하도록 수정됐다.
- Firefox 82 for developers - Mozilla | MDN
- Coming through with Firefox 82 - Mozilla Hacks - the Web developer blog
Introducing Microsoft Edge preview builds for Linux - Microsoft Edge Blog
blogs.windows.com/msedgedev/2020/10/20/microsoft-edge-dev-linux/
MSEdge Dev Channel의 Linux 빌드가 공기됐다.
Release v4.0.0 · facebook/create-react-app
github.com/facebook/create-react-app/releases/tag/v4.0.0
create-react-app 4.0.0 릴리스.
React 17 / 새로운 JSX 변환 대응, TypeScript 4, ESLint 6, Jest 26로 각각 갱신.
Fast Refresh, workbox 개선, Web Vitals 리포트 지원.
Release Notes for Safari Technology Preview 115 | WebKit
webkit.org/blog/11333/release-notes-for-safari-technology-preview-115/
Safari Technology Preview 115 릴리스.
Web Audio API를 prefix 없이 사용가능 하며 HTMLMediaElement.setSinkId, CSS math-style를 지원한다.
Node v15.0.0 (Current) | Node.js
nodejs.org/en/blog/release/v15.0.0/
Node.js 15.0 릴리스.
비호환 변경 사항으로 N-API 7, npm 7, V8 8.6으로 각각 갱신됐으며 unhandledRejection=throw를 기본 모드로 변경, URL 객체가 사양에 맞춰 개선됐다.
이어 AbortController와 EventTarget 지원하며 crypto 모듈이 Web Crypto API룰 지원한다.
또, timers/promise와 stream/promises 삭제, 실험적으로 QUIC 기능을 지원한다.
- Node.js v15.0.0 is here!. This blog was written by Bethany… | by Node.js | Oct, 2020 | Medium
- Node.js v15 주요 변경 사항 - 별로 안 힘든 블로그
- 10월 20일에 메이저 업데이트 되는 Node.js v15 소개 | watilde's blog
- Node.js 15 release: Updated handling of rejections, npm 7, N-API Version 7, and more – IBM Developer
Sass: LibSass is Deprecated
sass-lang.com/blog/libsass-is-deprecated
C++로 작성된 LibSass(node-sass)가 비권장됐다.
Dart로 작성된 DartSass(sass)가 메인으로 개발되며 LibSass는 기능 추가나 새로운 문법 지원 없이 유지보수만 진행된다.
- sass/libsass: A C/C++ implementation of a Sass compiler
- sass/dart-sass: The reference implementation of Sass, written in Dart.
아티클
브라우저와 Node.js에서 동작하는 1kB 스토리지 라이브러리를 만들었다 | Web Scratch(일본어))
파일 크기가 작은 Key-Value 스토리지 라이브러리.
브라우저(IndexedDB, LocalStorage), Node.js(파일)에서 동작하며 마이그레이션 API, TypeScript 환경에서 스키마를 지원한다.
Cumulative Layout Shift in Practice | NicJ.net
nicj.net/cumulative-layout-shift-in-practice/
Cumulative Layout Shift (CLS)를 주제로 한 글
CLS는 어떤 매트릭스인지, 적절한 스코어와 그 계산식, CLS가 나쁘면 어떤 문제가 발생하는지 작성돼 있다.
RUM과 Synthetic에서의 축정 도구나 라이브러리, Chrome Dev Tools에서의 디버깅 방법도 소개돼 있다.
사이트, 서비스, 문서
npm public roadmap
github.com/npm/roadmap/projects/1
npm의 로드맵.
Redirection from Internet Explorer to Microsoft Edge for compatibility with modern web sites | Microsoft Docs
docs.microsoft.com/en-us/deployedge/edge-learnmore-neededge
IE에서 IE 비호환 사이트에 접근했을 때 MSEdge로 자동 리다이렉트되는 기능이 MSEdge 87에 적용됐다.
보호환 여부는 Microsoft의 관리 목록을 이용해 판정한다. 자동으로 리다이렉트 할지에 대한 여부는 그룹 정책에서 선택할 수 있다.
소프트웨어, 도구, 라이브러리
bytedance/bytemd: A hackable Markdown editor component built with Svelte
Svelte로 개발된 markdown 에디터 라이브러리. UI 프레임워크 없이 동작할 수 있고 React, Vue 용 바인딩을 제공한다.
sinclairzx81/typebox: JSON Schema Type Builder with Static Type Resolution for TypeScript
github.com/sinclairzx81/typebox
JSON Schema를 TypeScript에서 정의할 수 있는 builder 함수를 제공하는 라이브러리.
sysgears/webpack-virtual-modules: Webpack Virtual Modules is a webpack plugin that lets you create, modify, and delete in-memory files in a way that webpack treats them as if they were physically presented in the file system.
github.com/sysgears/webpack-virtual-modules
webpack에서 빌드 시 특정 경로에 특정 코드가 있는 것 처럼 보이도록 하는 webpack plugin.
webpack 빌드 중에 가상 모듈을 추가할 수 있다.
developit/snarkdown: A snarky 1kb Markdown parser written in JavaScript
github.com/developit/snarkdown
작은 크기의 Markdown to HTML 라이브러리.
piscinajs/piscina: A fast, efficient Node.js Worker Thread Pool implementation
Node.js 용 worker pool 라이브러리
mjs 지원, AbortController를 사용한 취소 지원, 백프레셔(Back pressure) 지원.
openplayerjs/openplayerjs: Lightweight HTML5 video/audio player with smooth controls and ability to play VAST/VPAID/VMAP ads
github.com/openplayerjs/openplayerjs
영상 / 음악 플레이어 라이브러리.
IE11 이상 지원, 캡션, VAST/VPAID 영상 광고 지원, 커스터마이즈가 가능하도록 설계돼 있다.
HLS 영상은 hls.js, MPEG-DASH 영상은 dash.js를 사용하여 지원한다.
