JSer.info #508 - 상태 관리 라이브러리 MobX 6.0 릴리스.
decorate
를 삭제하는 대신 makeObservable
과 makeAutoObservable
추가.
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 14.13.0 릴리스.
exports
필드에서 *
패턴 지원, CommonJS와 ESM의 interop과 관련한 구현 추가.
mobx/CHANGELOG.md at mobx6 · mobxjs/mobx
github.com/mobxjs/mobx/blob/mobx6/CHANGELOG.md#600
MobX 6.0.0 릴리스.
decorate
를 삭제하고 makeObservable
와 makeAutoObservable
추가.
Proxy API 없이도 동작할 수 있도록 개선.
Decorator를 사용한 코드를 이전하는 도구로 mobx-undecorate
공개.
The npm Blog — Release v7.0.0-rc.0
blog.npmjs.org/post/630786103662821376/release-v700-rc0
npm 7.0.0 RC 릴리스.
Bootstrap 5 Alpha 2 | Bootstrap Blog
blog.getbootstrap.com/2020/09/29/bootstrap-5-alpha-2/
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
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로 이전한 이야기.
이전할 때 UI를 재설계 해야만 하는지, 앱의 구조, UI에 대한 상태 설계, 스토리북을 사용한 디버깅 환경 등에 대해 작성돼 있다.
Declarative Shadow DOM
web.dev/declarative-shadow-dom/
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 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
접근성과 관련된 여러 리소스 정리.
Indicium: V8 runtime tracer tool · V8
V8/Chrome의 실행 로그를 토대로 Inline Cache와 Map이 어떻게 동작하는지 트레이스, 디버깅, 분석할 수 있는 도구
소프트웨어, 도구, 라이브러리
yamalight/graffiti: Minimalistic GraphQL framework
github.com/yamalight/graffiti/
fastify / graphql-compose / Mongoose를 사용해 개발된 GraphQL 프레임워크
bytedance/IconPark: Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons
SVG 아이콘 모음집.
React, Vue 컴포넌트로도 사용할 수 있다.
Robot - a fast 1kB functional library for creating Finite State Machines
상태 머신(Finite State Machines)으로서 상태를 관리할 수 있는 라이브러리
happykit/flags: 🏳 Feature Flags for Next.js
Next.js 용 Feature Flag 관리 라이브러리와 웹 서비스.
ffmpegwasm/ffmpeg.wasm: FFmpeg for browser and node, powered by WebAssembly
github.com/ffmpegwasm/ffmpeg.wasm
ffmpeg를 WebAssembly로 동작할 수 있도록 개발된 라이브러리.