JSer.info #552 - 패키지 매니저 pnpm 6.12.9 릴리스.

Release v6.12.0 · pnpm/pnpm

pnpm 6.12.0에는 pnpm env use --global 16.5.0와 같이 Node.js를 설치하는 명령어가 추가됐다.
pnpm 자체를 single binary로 배포하게 되면 Node.js가 전역 설치 돼 있지 않은 환경에서도 pnpm를 사용할 수 있게 된다.
이러한 경우에 pnpm로 Node.js를 설치 할 수 있도록 pnpm env가 추가된 것.

Using pnpm as a Node.js version manager · Discussion #3434 · pnpm/pnpm

webpack 5.49.0 릴리스.

Release v5.49.0 · webpack/webpack

실험적인 기능으로 experiments.buildHttp라는 옵션으로 원격 리소스를 import 할 수 있게 됐다. 다음과 같이 import 문으로 HTTP URL을 지정하여 리소스를 다운로드하고 함께 번들할 수 있다.

import pMap1 from "https://cdn.skypack.dev/p-map";

다운로드한 리소스는 <name>.webpack.lock.data 디렉터리에 저장되며 리소스 락 파일은 <name>.webpack.lock으로 저장된다.
구조적으로는 Deno와 비슷한 형태로 구현 됐다.

Vue 3.2 릴리스.

Experimental 이었던 <script setup>과 <style>에서의 v-bind가 Stable로 변경됐다.

defineCustomElement가 추가돼 Vue Component API 기반의 Custom Element를 작성할 수 있다.

Vue and Web Components | Vue.js

또, Runtime과 Compile의 성능 개선, Node.js 환경에 의존하지 않는 SSR의 Stream API 추가 등이 이뤄졌다.

헤드라인

Release v6.12.0 · pnpm/pnpm

github.com/pnpm/pnpm/releases/tag/v6.12.0

npm ReleaseNote

pnpm 6.12.0 릴리스.
pnpm env use --global <version>으로 Node.js를 설치하여 사용할 수 있다.
Node.js 버전 관리 도구로서 pnpm를 사용할 수 있도록 개선된 것.

Using pnpm as a Node.js version manager · Discussion #3434 · pnpm/pnpm

Bootstrap 5.1.0 | Bootstrap Blog

blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/

CSS library ReleaseNote

Bootstrap 5.1.0 릴리스.
새로운 CSS Grid 구조를 옵트-인으로 사용할 수 있도록 변경, Placeholders 추가, Horizontal collapse 지원

Release v5.49.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v5.49.0

webpack ReleaseNote

webpack 5.49.0 릴리스.
import로 http(s)의 URL 모듈을 가져올 수 있는 experiments.buildHttp 옵션 추가.
다운로드 한 모듈은 webpack.lock.data/** 아래에 저장되며 webpack.lock으로 잠긴 파일로 관리 된다.

V8 release v9.3 · V8

v8.dev/blog/v8-release-93

V8 JavaScript ReleaseNote

V8 9.3 릴리스.
JIT 컴파일러 Sparkplug에 Batch Compilation을 도입해 컴파일 속도 개선.
Object.hasOwn, Error Cause 지원 등.

Release V1.1.0 - Interrupting Cow · solidjs/solid

github.com/solidjs/solid/releases/tag/v1.1.0

JavaScript library ReleaseNote

Solid 1.1.0 릴리스.
hydrate에 대응한 createUniqueId 추가, Observable 등을 Signal로 변한하는 from 추가.
enabledScheduling으로 Concurrent Rendering과 Transition 시 인터럽트 처리 지원, startTransition 추가 등.

Vue 3.2 Released! | The Vue Point

blog.vuejs.org/posts/vue-3.2.html

Vue ReleaseNote

Vue 3.2 릴리스.
<script setup>과 <style>에서의 v-bind를 Stable로 변경, defineCustomElement로 Custom Element를 작성할 수 있도록.
또, Runtime과 Compile의 성능 개선, Node.js 환경에 의존하지 않는 SSR의 Stream API 추가가 이뤄졌다.

vue-next/CHANGELOG.md at master · vuejs/vue-next

아티클

Super Duper Secure Mode | Microsoft Browser Vulnerability Research

microsoftedge.github.io/edgevr/posts/Super-Duper-Secure-Mode/

MSEdge security article

V8의 CVE 중 45%가 JIT과 관련된 것으로, 이를 방지 하기 위한 JIT less 모드인 Super Duper Secure Mode(SDSM)를 소개하는 글.
JIT 유무에 따른 성능 차이가 정리돼 있다.

JavaScript needs more helper functions for iteration (map, filter, etc.) – where should we put them?

2ality.com/2021/08/iteration-helpers.html

JavaScript ECMAScript article

Iterable한 객체를 Iteration 할 수 있도록 하는 접근 방식 소개.

Chrome DevTools의 Rendering 탭을 사용하자 | 프런트엔드 Blog | 미쯔에린쿠스(일본어)

www.mitsue.co.jp/knowledge/blog/frontend/202107/28_1056.html

Chrome debug article

Chrome DevTools의 Rendering 탭 기능을 소개하는 기사.

슬라이드, 영상

Preact 2021 - What if? @Trivago - Google スライド

docs.google.com/presentation/d/1sZyETbDiacqAznlEGEpfyPz0q37Q-12bOB5Mq3OtyKQ/edit#slide=id.p

React slide

Preact 향후 로드맵에 대한 슬라이드.
IE 지원을 종료하고 workarounds 삭제, 재귀가 아닌 루프를 사용하는 방식으로 콜스택 개선, 커맨드 패턴과 같은 처리 방식의 새로운 렌더링 구상 등 소개.
deoptimization를 제거하여 성능을 개선하고 있다.

사이트, 서비스, 문서

Replacing Sass · Discussion #44 · Shopify/polaris

github.com/Shopify/polaris/discussions/44

CSS opinion issue

Shopify의 Design System인 Polaris에서 CSS 프레임워크를 선정하는 논의 과정을 살펴볼 수 있다.
Sass 대체제로 Tailwind CSS, CSS Modules, Stitches, vanilla-extract를 비교하고 최종적으로 vanilla-extract를 유력한 후보로 선택하고 있다.