Fork me on GitHub

2020-10-06: MobX 6.0, Declarative Shadow DOM, ffmpeg.wasm

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #508 - 상태 관리 라이브러리 MobX 6.0 릴리스.

decorate를 삭제하는 대신 makeObservablemakeAutoObservable 추가.
ES Proposal의 Decorator 문법을 사용한 코드를 이전하는 도구로 mobx-undecorate 공개.
또, 6.0에서는 ES2015의 Proxy가 없는 환경에서도 제한없이 동작할 수 있도록 useProxies: "never" 설정이 지원된다.

MobX 4.x, 5.x에서 이전하는 방법은 다음 문서에 정리돼 있다.


Declarative Shadow DOM에서는 선언적 Shadow DOM에 대해 다루고 있다.
Declarative Shadow DOM은 Chrome 85에서 플래그(chrome://flags)를 활성화하여 사용할 수 있으며 Chrome 88에서는 플래그 없이 지원될 예정이다.

이는 간단히 말해 <tempalte> 요소의 showroot 속성으로 선언적으로 Shadow Root를 선언할 수 있도록 하자는 Proposal.

<host-element>
    <template shadowroot="open">
        <style>shadow styles</style>
        <h2>Shadow Content</h2>
        <slot></slot>
    </template>
    <h2>Light content</h2>
</host-element>

Declarative Shadow DOM의 주 목적인 SSR 대응과 getInnerHTML()에서의 ShaowRoot 취득, Custom Element의 attachShadow() 동작 등을 자세히 설명한다.


브라우저와 Node.js에서 동작하는 ffmpeg.wasm 공개.
ffmpeg의 일부를 WebAssembly로 컴파일하여 개발.

다음 문서에 어떻게 컴파일하는지 설명돼 있으니 관심 있다면 함께 살펴보길 바란다.


헤드라인


Node v14.13.0 (Current) | Node.js

nodejs.org/en/blog/release/v14.13.0/

node.js ReleaseNote

Node.js 14.13.0 릴리스.
exports 필드에서 * 패턴 지원, CommonJS와 ESM의 interop과 관련한 구현 추가.


mobx/CHANGELOG.md at mobx6 · mobxjs/mobx

github.com/mobxjs/mobx/blob/mobx6/CHANGELOG.md#600

JavaScript library ReleaseNote

MobX 6.0.0 릴리스.
decorate를 삭제하고 makeObservablemakeAutoObservable 추가.
Proxy API 없이도 동작할 수 있도록 개선.
Decorator를 사용한 코드를 이전하는 도구로 mobx-undecorate 공개.


The npm Blog — Release v7.0.0-rc.0

blog.npmjs.org/post/630786103662821376/release-v700-rc0

npm ReleaseNote

npm 7.0.0 RC 릴리스.


Bootstrap 5 Alpha 2 | Bootstrap Blog

blog.getbootstrap.com/2020/09/29/bootstrap-5-alpha-2/

CSS library ReleaseNote

Bootstrap 5 Alpha 2 릴리스.
.carousel-dark, .dropdown-menu-dark 추가. close 버튼 디자인 변경. Util 클래스 추가.


Release v6.4.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v6.4.0

Chrome performance Tools ReleaseNote

Lighthouse 6.4.0 릴리스.
large-javascript-libraries의 Audit을 시험적(experimental)으로 추가. unsized-images의 Audit 추가.


아티클


JQuery to React: How we rewrote the HelloSign Editor - Dropbox

dropbox.tech/application/jquery-to-react--how-we-rewrote-the-hellosign-editor

jQuery React article

jQuery로 작성된 서명 앱을 React로 이전한 이야기.
이전할 때 UI를 재설계 해야만 하는지, 앱의 구조, UI에 대한 상태 설계, 스토리북을 사용한 디버깅 환경 등에 대해 작성돼 있다.


Declarative Shadow DOM

web.dev/declarative-shadow-dom/

WebComponents article

Chrome 85에 구현된 Declarative Shadow DOM에 대한 소개 글. 실험 플래그를 활성화해서 사용해 볼 수 있다.
<tempalte> 요소의 showroot 속성으로 선언적으로 Shadow Root를 선언할 수 있다.
SSR 대응, getInnerHTML()에서의 ShaowRoot 취득, Custom Element의 attachShadow() 동작 등 자세히 설명돼 있다.


What's New In DevTools (Chrome 87)  |  Web  |  Google Developers

developers.google.com/web/updates/2020/10/devtools

Chrome debug article

Chrome 87의 DevTools 변경 사항 정리.
CSS Grid의 디버깅 기능, WebAuth 탭 추가, Lighthouse 6.4로 갱신, resource-type과 url로 필터링 할 수 있도록 개선됐다.
COEP와 COOP 관련 보고서 출력, CSS Overview 패널에서 contrast 문제 표시, 숏컷을 커스터마이징 할 수 있다.


사이트, 서비스, 문서


a11yresources - A growing list of accessibility tools and resources

a11yresources.webflow.io/

accessibility Tools

접근성과 관련된 여러 리소스 정리.


Indicium: V8 runtime tracer tool · V8

v8.dev/blog/system-analyzer

V8 debug Tools

V8/Chrome의 실행 로그를 토대로 Inline Cache와 Map이 어떻게 동작하는지 트레이스, 디버깅, 분석할 수 있는 도구


소프트웨어, 도구, 라이브러리


yamalight/graffiti: Minimalistic GraphQL framework

github.com/yamalight/graffiti/

GraphQL node.js library

fastify / graphql-compose / Mongoose를 사용해 개발된 GraphQL 프레임워크


bytedance/IconPark: Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons

github.com/bytedance/IconPark

SVG Vue React library

SVG 아이콘 모음집.
React, Vue 컴포넌트로도 사용할 수 있다.


Robot - a fast 1kB functional library for creating Finite State Machines

thisrobot.life/

JavaScript library

상태 머신(Finite State Machines)으로서 상태를 관리할 수 있는 라이브러리


happykit/flags: 🏳 Feature Flags for Next.js

github.com/happykit/flags

JavaScript Next.js library webservice

Next.js 용 Feature Flag 관리 라이브러리와 웹 서비스.


ffmpegwasm/ffmpeg.wasm: FFmpeg for browser and node, powered by WebAssembly

github.com/ffmpegwasm/ffmpeg.wasm

JavaScript Image library WebAssembly

ffmpeg를 WebAssembly로 동작할 수 있도록 개발된 라이브러리.


Pull Request to this article
JSer.info Slackに参加する