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 라이브러리르 이용하는 방법을 기본 전략으로 제안하고 있다.
- Modern web apps without JavaScript bundling or transpiling
- Replace webpack with importmapped Hotwire as default js by dhh · Pull Request #42999 · rails/rails
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 보안 업데이트.
각 버전에 대응하는 Node v12.22.5 (LTS), Node v14.17.5 (LTS), Node v16.6.2가 릴리스 됐다.
DNS 라이브러리 c-ares의 보안 수정, http2
의 stream를 닫았을 경우의 Use after free 처리 수정.
rejectUnauthorized
에 undefined
을 전달하면 기한 만료 증명서로 인식하는 문제 수정.
Hopping on Firefox 91 - Mozilla Hacks - the Web developer blog
hacks.mozilla.org/2021/08/hopping-on-firefox-91/
Firefox 91 릴리스.
Visual Viewport API, Intl.DateTimeFormat 개선, Error Cause 지원.
또, Gamepad API가 Secure Context에서만 동작하도록 변경.
Blog - Next.js 11.1 | Next.js
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 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
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
무거운 로직을 별도의 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에서 지연 렌더링을 사용해 성능을 개선하는 방법 소개.
렌더링 타이밍 늦추기, Intersection Observer를 사용해 viewport에 들어온 시점에 렌더링 하기, 무한 리스트 UI 구현 방법 등.
Slinkity
정적 사이트 제너레이터인 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 7.0에서 webpacker(webpack) 같은 번들러를 사용하지 않고 import-map 기반의 접근 전략으로 변경하는 방안을 소개한다.
- rails/importmap-rails: Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.
- Replace webpack with importmapped Hotwire as default js by dhh · Pull Request #42999 · rails/rails
- Alpha preview: Modern JavaScript in Rails 7 without Webpack - YouTube
Don’t attach tooltips to document.body - Atif Afzal
atfzl.com/don-t-attach-tooltips-to-document-body
document.body
바로 아래에 툴팁 표시 용 요소를 추가하면 커다란 요소 스타일 갱신 처리가 이뤄져 성능 문제가 발생한다.
어떤식으로 레이아웃 영향을 확인했는지, 툴팁 표시 용 요소를 한번 래핑하여 스타일 갱신 영향 범위를 줄이는 방법을 소개한다.
CSS Grid tooling in DevTools - Chrome Developers
developer.chrome.com/blog/css-grid-tooling/
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
ORM 라이브러리.
Business Object(BO)와 Data Access Object(DAO)를 사용해 DB와의 데이터를 주고 받을 수 있다.
DAO는 쿼리 빌더가 아니라 순수 SQL 구문에 가까운 문법을 이용한다.
microlinkhq/keyv: Simple key-value storage with support for multiple backends.
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.js의 IndexedDB 백엔드.