Fork me on GitHub

2021-08-17: Next.js 11.1, Rails 7에서 예정돼 있는 import maps 기반 JS 라이브러리 이용

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #553 - Next.js 11.1 릴리스.

오픈 리다이렉터의 취약성이 수정됐다.
experimental.esmExternals 옵션으로 Node.js의 ESM를 지원한다.
그 외로 node-fetch의 keepAlive를 기본적으로 활성화, Source Map / ESLint / next/image가 개선됐다.

또, Rust 기반 JS / TS Compiler / Bundler인 SWC 개발자인 DongYoon Kang이 Vercel에 합류, Next.js에서의 컴파일러로 SWC를 이용할 수 있도록 개발중 이다.


Rails 7.0에서 현재 webpacker(webpack)이 아닌 Import maps를 사용해 JavaScript 라이브러리르 이용하는 방법을 기본 전략으로 제안하고 있다.

Import maps는 ES Modules로 import 할 때에 import 하는 모듈의 이름 해결을 정의하는 웹 표준이다.

다음과 같이 type="importmap"으로 Import maps를 지정한다.

<script type="importmap">
{
  "imports": {
    "app": "./src/app.js",
    "md5": "https://cdn.skypack.dev/md5"
  }
}
</script>

이 Import maps의 정의가 각 모듈에서 이름 해결에 이용된다.

import app from "app"; // ./src/app.js 를 불러온다.
import md5 from "md5"; // https://cdn.skypack.dev/md5 를 불러온다.

Import maps은 Chrome계 브라우저만 지원 하고 있어서 그 외 브라우저에서는 ES Module Shims의 도움이 필요하다. (rails/importmap-railsにはshimが同梱されています)

Rails 7에서는 JavaScript의 build이나 bundle 하지 않고 CDN에서 라이브러리를 가져올 수 있는 구조를 Import maps과 함께 사용할 수 있도록 개선하고 webpacker를 옵션으로 변경할 예정이다.
단, TypeScript나 React와 같이 빌드가 꼭 필요한 경우에는 여전히 webpacker를 사용해야 한다.

동작 방식에 대한 자세한 내용은 아래 영상을 통해 살펴볼 수 있다.


헤드라인


August 2021 Security Releases | Node.js

nodejs.org/en/blog/vulnerability/aug-2021-security-releases/

node.js security ReleaseNote

Node.js 보안 업데이트.
각 버전에 대응하는 Node v12.22.5 (LTS), Node v14.17.5 (LTS), Node v16.6.2가 릴리스 됐다.
DNS 라이브러리 c-ares의 보안 수정, http2의 stream를 닫았을 경우의 Use after free 처리 수정.
rejectUnauthorizedundefined을 전달하면 기한 만료 증명서로 인식하는 문제 수정.


Hopping on Firefox 91 - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2021/08/hopping-on-firefox-91/

Firefox ReleaseNote

Firefox 91 릴리스.
Visual Viewport API, Intl.DateTimeFormat 개선, Error Cause 지원.
또, Gamepad API가 Secure Context에서만 동작하도록 변경.


Blog - Next.js 11.1 | Next.js

nextjs.org/blog/next-11-1

Next.js ReleaseNote

Next.js 11.1 릴리스.
오픈 리다이렉터의 취약점 수정, experimental로 Node.js의 ESM 지원, Rust 기반의 JS / TS 컴파일러 SWC를 이용할 수 있게 됐다.
node-fetch의 keepAlive를 기본적으로 활성화, Source Map / ESLint / next/image 개선 등.


Announcing TypeScript 4.4 RC | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-4-rc/

TypeScript ReleaseNote

TypeScript 4.4 RC 릴리스.
Control Flow Analysis 개선, Index Signatures에 Symbol이나 Template String를 이용할 수 있도록.
Catch 절의 기본 타입을 unknown 타입으로 하는 useUnknownInCatchVariables 옵션 추가.
optional과 undefined 값을 구별하는 exactOptionalPropertyTypes 옵션 추가.
또, ES Proposal Stage 3의 class static block 지원.
declaration 생성 및 strict 모드의 빌드 성능 개선.


Release v6.0.0 · vueuse/vueuse

github.com/vueuse/vueuse/releases/tag/v6.0.0

Vue ReleaseNote library

vueuse 6.0.0 릴리스.
Vue 3.2의 effectScope API에 대응, createSharedComposable / toReactive / useEventBus 추가.
useStorage에 onError 콜백 함수 추가.


아티클


JavaScript Development: Making a Web Worker optional | by Tobias Uhlig | Aug, 2021 | ITNEXT

itnext.io/javascript-development-making-a-web-worker-optional-f23a13490b28

JavaScript webworker article

무거운 로직을 별도의 Web Worker로 분리하는 것은 의미 있지만 스레드가 거의 유휴(idle) 상태의 경우에 Worker를 나누면 오히려 postMessage 만큼의 지연이 발생한다.
그래서 Worker로 나눠 실행하고 있던 처리를 같은 API를 유지하면서 동일 스레드에서 실행하도록 하는 접근법을 neo.mjs 2.3.4에서의 대응 사례와 함께 소개한다.


<Lazy> rendering in Vue to improve performance | by Martin Malinda | Vue.js Developers | Aug, 2021 | Medium

medium.com/js-dojo/lazy-rendering-in-vue-to-improve-performance-dcccd445d5f

Vue article performance

Vue에서 지연 렌더링을 사용해 성능을 개선하는 방법 소개.
렌더링 타이밍 늦추기, Intersection Observer를 사용해 viewport에 들어온 시점에 렌더링 하기, 무한 리스트 UI 구현 방법 등.


Slinkity

slinkity.dev/

JavaScript Tools React Vue Svelte

정적 사이트 제너레이터인 11ty에 React / Vue / Svelte 등의 컴포넌트를 import 할 수 있도록 하는 확장 기능.


Modern web apps without JavaScript bundling or transpiling

world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755

rails JavaScript article

Rails 7.0에서 webpacker(webpack) 같은 번들러를 사용하지 않고 import-map 기반의 접근 전략으로 변경하는 방안을 소개한다.


Don’t attach tooltips to document.body - Atif Afzal

atfzl.com/don-t-attach-tooltips-to-document-body

JavaScript DOM CSS performance article

document.body 바로 아래에 툴팁 표시 용 요소를 추가하면 커다란 요소 스타일 갱신 처리가 이뤄져 성능 문제가 발생한다.
어떤식으로 레이아웃 영향을 확인했는지, 툴팁 표시 용 요소를 한번 래핑하여 스타일 갱신 영향 범위를 줄이는 방법을 소개한다.


CSS Grid tooling in DevTools - Chrome Developers

developer.chrome.com/blog/css-grid-tooling/

CSS Chrome debug article

Chrome DevTools의 CSS Grid 디버깅 기능과 추가된 CDP(chrome devtools protocol) 소개.
DevTools의 Grid 오버레이 항시 표시, DOM 변경 즉시 반영 또, Computed한 Style 에서 요소 검색을 구현하기 위해 CDP에 새로운 명령어를 구현했다고 한다.


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


craigmichaelmartin/pure-orm: A Node.js SQL toolkit for writing native SQL queries yielding pure business objects

github.com/craigmichaelmartin/pure-orm

DB node.js library

ORM 라이브러리.
Business Object(BO)와 Data Access Object(DAO)를 사용해 DB와의 데이터를 주고 받을 수 있다.
DAO는 쿼리 빌더가 아니라 순수 SQL 구문에 가까운 문법을 이용한다.


microlinkhq/keyv: Simple key-value storage with support for multiple backends.

github.com/microlinkhq/keyv

JavaScript node.js library

redis / mongo / SQLite / MySQL / PostgreSQL 등의 여러 백엔드 환경에 대응(adapter)한 KVS 라이브러리.


jlongster/absurd-sql: sqlite3 in ur indexeddb (hopefully a better backend soon)

github.com/jlongster/absurd-sql

SQL JavaScript IndexedDB library

sql.js의 IndexedDB 백엔드.


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