JSer.info #528 - 개발 환경 도구 Vite 2.0 릴리스.
Vite 2.0은 특정 프레임워크에 의존하지 않으며, 다양한 프레임워크에 대응한 템플릿이 준비돼 있다.
Preact의 WMR에 영감을 받아 개발된 Rollup 인터페이스를 확장한 플러그인을 지원하고 CSS를 다루는 방식이 개선됐다.
또, 시험적으로 SSR 지원이 추가됐다.
이와 함께 1.x에서의 마이그레이션 가이드도 공개됐다.
Babel 7.13.0 릴리스.
Babel 설정 시 plugins이나 presets 내에서 중복해서 설정 했던 값을 한번에 다룰 수 있는 targets와 assumptions 지원이 추가됐다.
targets: 지원하는 브라우저 정보를 기입하는 옵션 -assumptions: 사양의 엣지케이스를 무시하고 보다 작은 코드를 출력하기 위한 옵션
assumptions는 각 plugins이나 presets에서 loose로 설정 했었던 것을 정리한 옵션이다.
그 외로는 ES Proposal Stage 2의 Records와 Tuples 지원, Flow의 this 파라메터 지원, 타입스크립트 4.2 지원 등이 추가됐다.
또, @babel/runtime이 Node.js의 exports 필드에 대응됐고 useESModules 옵션은 비권장 됐다.
Streams—The definitive guide에는 WHATWG Stream에 대한 설명이 자세히 작성돼 있다.
Stream의 기본적인 컨셉, 구조, ReadableStream/ WritableStream / TransformStream의 사용법, pipeTo로 연결하는 방법을 다루고 있다.
또, Fetch API, Text Encoding, Compression, File System API, Web Sockets 등 Stream을 지원하고 있는 API도 소개한다.
헤드라인
Announcing Vite 2.0 - DEV Community 👩💻👨💻
dev.to/yyx990803/announcing-vite-2-0-2f0a
특정 프레임워크에 의존하지 않는 개발 환경 도구 Vite 2.0 릴리스.
공식 템플릿을 제공하여 Vue와 React 등을 지원, WMR에 영감을 받아 개발된 Rollup 인터페이스를 확장한 플러그인 지원, CSS를 다루는 방식 개선.
또, 실험적으로 SSR도 지원한다.
Node v15.9.0 (Current) | Node.js
nodejs.org/en/blog/release/v15.9.0/
Node.js 15.9.0 릴리스.
fs/promises에 watch() 추가, fs.watch가 AbortSignal을 지원, timers/promises에서 setInterval을 async iterator로 다룰 수 있도록 개선.
Release 3.9.0 - 2021.02.19 · zloirock/core-js
github.com/zloirock/core-js/releases/tag/v3.9.0
core-js 3.9.0 릴리스.
ES Proposal Stage 1의 Array#findLast(), Array#findLastIndex() 지원.
Release v2.0.0 · svg/svgo
github.com/svg/svgo/releases/tag/v2.0.0
SVG 최적화 도구인 SVGO 2.0 릴리스.
설정 파일의 서식 변경, CLI에서 json config를 inline으로 전달할 수 없도록 변경, Node.js API 변경.
또, 브라우저 용 bundle이 패키지에 포함됐다.
Release v1.0.0-rc.1 · video-dev/hls.js
github.com/video-dev/hls.js/releases/tag/v1.0.0-rc.1
hls.js 1.0.0 RC1 릴리스.
비호환 변경 사항으로 API 일부 변경, Promise를 의존하는 방식으로 수정됐다.
Low-Latency HLS지원, 실험적으로 IMSC1의 기본적인 기능을 지원한다.
Release v5.24.0 · webpack/webpack
github.com/webpack/webpack/releases/tag/v5.24.0
webpack 5.24.0 릴리스.
Concatenation하는 모듈을 탐색할 때의 성능 개선.
7.13.0 Released: Records and Tuples, granular compiler assumptions, and top-level targets · Babel
babeljs.io/blog/2021/02/22/7.13.0
Babel 7.13.0 릴리스.
targets 설정을 Top-Level에 하여 각 플러그인이 그 설정을 이용할 수 있도록 개선, 사양의 엣지케이스를 무시하고 보다 작은 코드를 출력하는 assumptions 옵션 추가
ES Proposal Stage 2의 Records와 Tuples 지원, Flow의 this 인자 지원, TypeScript 4.2 지원.
또, @babel/runtime이 Node.js의 exports 필드에 대응한다.
A Fabulous February Firefox — 86! - Mozilla Hacks - the Web developer blog
hacks.mozilla.org/2021/02/a-fabulous-february-firefox-86/
Firefox 86 릴리스.
ETP의 Strict Mode에서 State Partitioning 도입. Dev Tools의 iframe inspection 개선.
prefix 없이 :autofill CSS 의사 클래스 지원, Intl.DisplayNames를 기본적으로 활성화.
또, 다른 도메인에서 페이지를 불러왔을 때 Window.name이 빈 문자열이 되도록 변경됐다.
- Firefox 86.0, See All New Features, Updates and Fixes
- Firefox 86 for developers - Mozilla | MDN
- Note Window.name privacy behavior in Firefox 86+ by Rumyra · Pull Request #9129 · mdn/browser-compat-data
Announcing TypeScript 4.2 | TypeScript
devblogs.microsoft.com/typescript/announcing-typescript-4-2/
TypeScript 4.2 릴리스.
Tuple Types에서 Rest Element 지원, Type Alias의 타입 추론 개선 ,오브젝트가 아니라 오퍼랜드에 대한 in 연산자 검사 추가, noPropertyAccessFromIndexSignature 옵션 추가, abstract new 지원.
February 2021 Security Releases | Node.js
nodejs.org/en/blog/vulnerability/february-2021-security-releases/
Node.js 보안 업데이트로 10.x, 12.x, 14.x, 15.x가 각각 릴리스 됐다.
HTTP2의 unknownProtocol를 사용한 DoS 대응, --inspect 시의 DNS rebinding 수정, OpenSSL 보안 개선.
아티클
Interview with Ryan Dahl, Node.js & Deno creator by Evrone
evrone.com/ryan-dahl-interview
Node.js와 Deno 개발자인 Ryan Dahl 인터뷰 기사
JavaScript / TypeScript, Deno 설계, 프로그래밍 언어의 특성과 문제 영역, 오픈소스에 관해 이야기한다.
Understanding Z-Index in CSS
ishadeed.com/article/understanding-z-index/
CSS의 z-index에 대해 그림과 함께 시각적으로 학습할 수 있는 튜토리얼.
스택 컨텍스트, 스캑 컨텍스트를 만드는 속성, z-index와의 관계에 대해 설명한다.
Using AbortController as an Alternative for Removing Event Listeners | CSS-Tricks
css-tricks.com/using-abortcontroller-as-an-alternative-for-removing-event-listeners/
Chrome 88부터 addEventListener가 Abort Signal에 대응했기 때문에 removeEventListener를 사용하지 않고 AbortController를 이용해서도 이벤트 리스너를 삭제할 수 있다.
Listify a JavaScript Array
kentcdodds.com/blog/listify-a-java-script-array
Intl.ListFormat를 사용하여 "A, B, and C"와 같은 문자를 각 언어 대응해서 표현을 작성할 수 있다.
Introducing State Partitioning - Mozilla Hacks - the Web developer blog
hacks.mozilla.org/2021/02/introducing-state-partitioning/
Firefox 86에서 ETP Strict 모드에서 활성화 되는 State Partitioning에 대해 소개.
Cookie의 보존도 사이트 별로 doubled key가 되며, 3rd party cookie 등도 분리된다.
SSO 등을 망가뜨리지 않도록 하기 위한 opener를 사용한 휴리스탁한 회피 방법과 Storage Access API에 대해서도 다루고 있다.
- State Partitioning - Mozilla | MDN
- Firefox 86 Introduces Total Cookie Protection - Mozilla Security Blog
Streams—The definitive guide
WHATWG Streams 설명 글.
컨셉, 구조 ReadableStream / WritableStream / TransformStream 사용 방법과 pipeTo와의 연계.
Fetch API, Text Encoding, Compression, File System API, Web Sockets 등 Stream을 지원하고 있는 API도 함께 소개.
사이트, 서비스, 문서
w3c/browser-statuses: Implementation support information of Web technologies on main desktop and mobile browsers
github.com/w3c/browser-statuses
Can I Use, Chrome Platform Status, MDN, WebKit Feature Status 데이터를 정규화한 데이터 세트.
API 별 브라우저나 폴리필 지원 현황을 취급할 수 있는 라이브러리.
소프트웨어, 도구, 라이브러리
ThomasAribart/json-schema-to-ts: Infer TS types from JSON schemas 📝
github.com/ThomasAribart/json-schema-to-ts
JSON Schema로 부터 TypeScript을 추론하는 라이브러리.
