From 12e1f0466a61cb1f8803b1faeebca753f73886bf Mon Sep 17 00:00:00 2001 From: U-Yeong Ju Date: Fri, 17 Dec 2021 13:32:41 +0900 Subject: [PATCH] Translate to korean 2021-12-15 --- ...refox-87.0-next.js-next.js-10.1-spectre.md | 244 +++++++++++++++++ ....0.0apple-low-latency-hls-storybook-6.2.md | 247 ++++++++++++++++++ ...s-14.17.0-typescript-4.3-rc-angular-v12.md | 244 +++++++++++++++++ ...nd-css-v3.0-create-react-app-v5.0.0-cls.md | 187 +++++++++++++ 4 files changed, 922 insertions(+) create mode 100644 _i18n/ko/_posts/2021/2021-03-30-firefox-87.0-next.js-next.js-10.1-spectre.md create mode 100644 _i18n/ko/_posts/2021/2021-04-06-typescript-4.3-beta-hls.js-v1.0.0apple-low-latency-hls-storybook-6.2.md create mode 100644 _i18n/ko/_posts/2021/2021-05-18-node.js-14.17.0-typescript-4.3-rc-angular-v12.md create mode 100644 _i18n/ko/_posts/2021/2021-12-15-tailwind-css-v3.0-create-react-app-v5.0.0-cls.md diff --git a/_i18n/ko/_posts/2021/2021-03-30-firefox-87.0-next.js-next.js-10.1-spectre.md b/_i18n/ko/_posts/2021/2021-03-30-firefox-87.0-next.js-next.js-10.1-spectre.md new file mode 100644 index 00000000000..39d4373ce04 --- /dev/null +++ b/_i18n/ko/_posts/2021/2021-03-30-firefox-87.0-next.js-next.js-10.1-spectre.md @@ -0,0 +1,244 @@ +--- +title: "2021-03-30のJS: Firefox 87.0、Next.js 10.1、Spectreの対応" +author: "azu" +layout: post +date : 2021-03-30T06:12:26.680Z +category: JSer +tags: +- TypeScript +- book +- npm +- security +- Tools + +--- + +JSer.info #533 - Firefox 87.0がリリースされました。 + +- [Firefox 87.0, See All New Features, Updates and Fixes](https://www.mozilla.org/en-US/firefox/87.0/releasenotes/) + +トラッカースクリプトをブロックするとサイトの表示が遅くなる問題があり、トラッカースクリプトを何もしないローカルで差し替えてパフォーマンスの劣化を防ぐSmartBlockという機能が実装されています。 + +- [Firefox 87 introduces SmartBlock for Private Browsing - Mozilla Security Blog](https://blog.mozilla.org/security/2021/03/23/introducing-smartblock/) + +また、Chromeと同様にReferrer Policyのデフォルト値が`strict-origin-when-cross-origin`となる変更が含まれています。 + +- [Firefox 87 trims HTTP Referrers by default to protect user privacy - Mozilla Security Blog](https://blog.mozilla.org/security/2021/03/22/firefox-87-trims-http-referrers-by-default-to-protect-user-privacy/) +- [A new default Referrer-Policy for Chrome: strict-origin-when-cross-origin](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default) + +--- + +Next.js 10.1がリリースされました。 + +- [Blog - Next.js 10.1 | Next.js](https://nextjs.org/blog/next-10-1) + +webpack 5をopt-inで対応、パッケージサイズの改善、`next/image`がApple M1の対応や新しい`layout`オプションの追加されています。 +その他には、`pages/500.js`での500ページのカスタマイズ、`router.push`や`router.replace`時にページトップへスクロールするように変更なども含まれています。 + +---- + +次の記事では、CPUの設計上の脆弱性を使ったSpectreでのサイドチャネル攻撃について書かています。 + +- [Google Developers Japan: Spectre の影響を受けないウェブを作るための概念実証について](https://developers-jp.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html) +- [Google Online Security Blog: A Spectre proof-of-concept for a Spectre-proof web](https://security.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html) + +ブラウザやウェブ標準においてSpectre対策としてのプロセス分離やサイト分離、クロスオリジンリソースの読み取り防止などのセキュリティメカニズムについて書かれています。 +しかし、Spectre自体はCPUの設計上の問題であるため、サイドチャネル攻撃によってメモリ上のデータを読み取ることを防ぐことはできません。読み取れるメモリ上に機密な情報が乗らないようにするための対策となっています。 + +また、 でSpectreの脆弱性をJavaScriptから利用してメモリ上のデータを読み取るインタラクティブなデモが公開されています。 +Intel Skylake CPU + Chrome 88 で動作が確認できるデモですが、デモ内では高精度なタイマーを使わずにどのようにメモリ上のキャッシュヒットを推測しているのかなどの仕組みについても書かれています。 + +- [Spectre JS Demo - YouTube](https://www.youtube.com/watch?v=V_9cQP60ZGI) + +あわせて、Spectre以後のウェブ開発における脅威モデルと戦略について書かれた次のドキュメントも参照すると良いかもしれません。 + +- [Post-Spectre Web Development](https://w3c.github.io/webappsec-post-spectre-webdev/) + +---- + +

ヘッドライン

+ +---- + +## Release v7.7.0 · npm/cli +[github.com/npm/cli/releases/tag/v7.7.0](https://github.com/npm/cli/releases/tag/v7.7.0 "Release v7.7.0 · npm/cli") +

npm ReleaseNote

+ +npm 7.7.0リリース。 +npm run-scriptと`npm exec`が`--workspace`フラグでworkspacesをサポートなど + + +---- + +## Firefox 87.0, See All New Features, Updates and Fixes +[www.mozilla.org/en-US/firefox/87.0/releasenotes/](https://www.mozilla.org/en-US/firefox/87.0/releasenotes/ "Firefox 87.0, See All New Features, Updates and Fixes") +

Firefox ReleaseNote

+ +Firefox 87.0リリース。 +Referrer Policyのデフォルト値を`strict-origin-when-cross-origin`に変更、トラッカーのスクリプトをローカルで置き換えるSmartBlock。 +DevToolsで`prefers-color-scheme`のシミュレートなど + +- [Firefox 87 for developers - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/87 "Firefox 87 for developers - Mozilla | MDN") +- [Firefox 87 trims HTTP Referrers by default to protect user privacy - Mozilla Security Blog](https://blog.mozilla.org/security/2021/03/22/firefox-87-trims-http-referrers-by-default-to-protect-user-privacy/ "Firefox 87 trims HTTP Referrers by default to protect user privacy - Mozilla Security Blog") +- [Firefox 87 introduces SmartBlock for Private Browsing - Mozilla Security Blog](https://blog.mozilla.org/security/2021/03/23/introducing-smartblock/ "Firefox 87 introduces SmartBlock for Private Browsing - Mozilla Security Blog") + +---- + +## Release v8.0.0 · ajv-validator/ajv +[github.com/ajv-validator/ajv/releases/v8.0.0](https://github.com/ajv-validator/ajv/releases/v8.0.0 "Release v8.0.0 · ajv-validator/ajv") +

JSON library JavaScript ReleaseNote

+ +JSON SchemaバリデーターのAjv 8.0.0リリース。 +JSON Schema draft-2020-12のサポート、JSON Type Definition(JTD)の仕様と揃えるために`instancePath`を`dataPath`にリネームなど。 + +- [JSON Type Definition](https://jsontypedef.com/ "JSON Type Definition") + +---- + +## JSON Type Definition +[jsontypedef.com/](https://jsontypedef.com/ "JSON Type Definition") +

JSON TypeScript program spec

+ +コードジェネレーター向けにJSONで型定義を表現する仕様。IETF/RFC 8927として策定中。 +JTDはコード生成を意識して作られているのでコンパクトな仕様、エラーに関しても仕様で定義されているため実装に依存しにくいポータブルなものを目指している。JSONまたはYAMLで記述できる。 + + +---- + +## billboard.js 3.0 release: D3.js v6 support & new candlestick type! | by Jae Sung Park | Mar, 2021 | Medium +[netil.medium.com/billboard-js-3-0-release-d3-js-v6-support-new-candlestick-type-9bd74af6a753](https://netil.medium.com/billboard-js-3-0-release-d3-js-v6-support-new-candlestick-type-9bd74af6a753 "billboard.js 3.0 release: D3.js v6 support & new candlestick type! | by Jae Sung Park | Mar, 2021 | Medium") +

JavaScript SVG graphic library ReleaseNote

+ +billboard.js 3.0リリース。 +D3.js v6へアップデート、Candlestick Chartの追加、`.export()` API がサイズ指定をサポートなど + +- [Release 3.0.0 · naver/billboard.js](https://github.com/naver/billboard.js/releases/tag/3.0.0 "Release 3.0.0 · naver/billboard.js") + +---- + +## Blog - Next.js 10.1 | Next.js +[nextjs.org/blog/next-10-1](https://nextjs.org/blog/next-10-1 "Blog - Next.js 10.1 | Next.js") +

Next.js library ReleaseNote

+ +Next.js 10.1リリース。 +webpack 5をopt-inで対応、パッケージサイズの改善、`next/image`がApple M1の対応や`layout`オプションの追加サポートなど。 +その他には、500ページのカスタマイズ、`router.push`や`router.replace`時にページトップへスクロールするように変更など + + +---- +

アーティクル

+ +---- + +## TypeScriptの型定義からバリデーションコードを生成するツールを書いた | Web Scratch +[efcl.info/2021/03/26/create-validator-ts/](https://efcl.info/2021/03/26/create-validator-ts/ "TypeScriptの型定義からバリデーションコードを生成するツールを書いた | Web Scratch") +

TypeScript security express article Tools

+ +TypeScriptの型定義からAjvとJSON Schemaを使ったバリデーションコードを生成するツールについて。 +また、リクエストをバリデーションせずにMongoなどのNoSQLのクエリにわたすと発生するNoSQL Injectionについて + +- [azu/create-validator-ts: Create JSON Schema validator from TypeScript.](https://github.com/azu/create-validator-ts "azu/create-validator-ts: Create JSON Schema validator from TypeScript.") + +---- + +## React State Management Libraries and How to Choose +[daveceddia.com/react-state-management/](https://daveceddia.com/react-state-management/ "React State Management Libraries and How to Choose") +

React JavaScript library article

+ +Reactのステート管理方法/ライブラリの比較。 +`useState`/`useReducer`、Redux、MobX、Recoil、react-query、XStateについて利点と欠点について書かれている + +- [JS 状態管理ライブラリ探索記 – Introduction - to-R Media](https://www.to-r.net/media/js-state-libraries-introduction/ "JS 状態管理ライブラリ探索記 – Introduction - to-R Media") + +---- + +## Handling User Permissions in JavaScript | CSS-Tricks +[css-tricks.com/handling-user-permissions-in-javascript/](https://css-tricks.com/handling-user-permissions-in-javascript/ "Handling User Permissions in JavaScript | CSS-Tricks") +

JavaScript article

+ +JavaScriptでパーミッションのビジネスロジックを実装する方法についての記事。 +Single source of truthであること、変更が簡単であること、テスト可能で有ることを意識した設計と実装方法について + + +---- + +## Making the slowest 'fast' page | Tune The Web +[www.tunetheweb.com/blog/making-the-slowest-fast-page/](https://www.tunetheweb.com/blog/making-the-slowest-fast-page/ "Making the slowest 'fast' page | Tune The Web") +

performance article opinion

+ +Lighthouse/WebVitalで満点な遅いページを作る方法について。 +意図して表示を遅らせることでスコアをあげるという実験。現実的には遅い"fast"なサイトは、スコアを上げる以外の意味はないため概念実証としての話。 + + +---- + +## Google Developers Japan: Spectre の影響を受けないウェブを作るための概念実証について +[developers-jp.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html](https://developers-jp.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html "Google Developers Japan: Spectre の影響を受けないウェブを作るための概念実証について") +

browser security CPU Chrome article

+ +A Spectre proof-of-concept for a Spectre-proof webの翻訳記事。 +Spectreの脆弱性、ブラウザ上でのSpectreのデモ、ブラウザでのSpectre対策としてのプロセス分離について + +- [Google Online Security Blog: A Spectre proof-of-concept for a Spectre-proof web](https://security.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html "Google Online Security Blog: A Spectre proof-of-concept for a Spectre-proof web") +- [leaky.page](https://leaky.page/ "leaky.page") + +---- +

サイト、サービス、ドキュメント

+ +---- + +## Deno Deploy +[deno.com/deploy](https://deno.com/deploy "Deno Deploy") +

deno webservice ServiceWorker

+ +Denoを扱うFaaS。 +Cloudflare Workersと同じくService Worker APIをベースにしていて、DenoのスクリプトをCDN Edgeで動かせるサービス。 + + +---- +

ソフトウェア、ツール、ライブラリ関係

+ +---- + +## seek-oss/vanilla-extract: Zero-runtime Stylesheets-in-TypeScript +[github.com/seek-oss/vanilla-extract](https://github.com/seek-oss/vanilla-extract "seek-oss/vanilla-extract: Zero-runtime Stylesheets-in-TypeScript") +

CSS JavaScript Tools

+ +CSSをTypeScriptで書いて、スコープ付きのCSS Variablesを含んだCSSファイルに展開するツール。 +Babelとwebpackを使いビルド時にCSSファイルを生成し、HTML側にはクラス名のみが入る。 + + +---- + +## toplenboren/simple-git-hooks: A simple git hooks manager for small projects +[github.com/toplenboren/simple-git-hooks](https://github.com/toplenboren/simple-git-hooks "toplenboren/simple-git-hooks: A simple git hooks manager for small projects") +

npm git library

+ +Git hooksを管理するnpmモジュール。 +`simple-git-hooks`コマンドを実行するとpackage.jsonや`.simple-git-hooks.js`に定義したGit Hookスクリプトを`.git/hooks/*`にインストールする。 + + +---- +

書籍関係

+ +---- + +## Developing Web Components with TypeScript - Native Web Development Using Thin Libraries | Jörg Krause | Apress +[www.apress.com/gp/book/9781484268391](https://www.apress.com/gp/book/9781484268391 "Developing Web Components with TypeScript - Native Web Development Using Thin Libraries | Jörg Krause | Apress") +

TypeScript WebComponents book

+ +TypeScriptを使ったWeb Components開発についての書籍 + + +---- + +## Manning | Testing JavaScript Applications +[www.manning.com/books/testing-javascript-applications](https://www.manning.com/books/testing-javascript-applications "Manning | Testing JavaScript Applications") +

JavaScript book testing

+ +2021年4月13日発売。 +JavaScriptのテストについての書籍。 +フロントエンド、バックエンド、React、E2Eテスト、CI/CDについて + + +---- diff --git a/_i18n/ko/_posts/2021/2021-04-06-typescript-4.3-beta-hls.js-v1.0.0apple-low-latency-hls-storybook-6.2.md b/_i18n/ko/_posts/2021/2021-04-06-typescript-4.3-beta-hls.js-v1.0.0apple-low-latency-hls-storybook-6.2.md new file mode 100644 index 00000000000..8c631a7b679 --- /dev/null +++ b/_i18n/ko/_posts/2021/2021-04-06-typescript-4.3-beta-hls.js-v1.0.0apple-low-latency-hls-storybook-6.2.md @@ -0,0 +1,247 @@ +--- +title: "2021-04-06のJS: TypeScript 4.3 Beta、hls.js v1.0.0(Apple Low-Latency HLS)、Storybook 6.2" +author: "azu" +layout: post +date : 2021-04-05T22:08:25.064Z +category: JSer +tags: +- Tools +- node.js +- TypeScript +- Vue +- license + +--- + +JSer.info #534 - TypeScript 4.3 Betaがリリースされました。 + +- [Announcing TypeScript 4.3 Beta | TypeScript](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-beta/) + +今までは、getterとsetterは同じ型であることが強制されていましたが、setterにgetterより幅広い型を指定できるようになっています。また、継承したメソッドをoverrideしていることを意味する`override`キーワードが追加され、`--noImplicitOverride`でチェックできるようになっています。 + +その他には、Template String Typeの改善、一部不完全だったPrivate Class Elements(fields/methods/accessors)のサポートが改善されています。 +Private Class ElementsのサポートはRuntimeの変更も含まれるため、これに合わせてruntimeのライブラリであるtslib 2.2.0がリリースされています。 + +- [Release tslib 2.2.0 · microsoft/tslib](https://github.com/microsoft/tslib/releases/2.2.0) + +また、Promiseオブジェクトを条件式に渡してしまうミスのチェックができるようになり、`static` Index Signaturesのサポートも追加されています。 + +---- + +HLS(HTTP Live Streaming)を扱うライブラリであるhls.js 1.0.0がリリースされました。 + +- [Release v1.0.0 · video-dev/hls.js](https://github.com/video-dev/hls.js/releases/tag/v1.0.0) + +1.0.0では低遅延の動画を扱うApple Low-Latency HLSがサポートされています。 +また、fmp4 streamのサポート改善、コードベースをTypeScriptに書きなおしなども含まれています。 +破壊的な変更として`backBufferLength`のデフォルト値の変更、イベントのシグネチャの変更なども含まれています。 + +リリースに合わせてマイグレーションガイドも公開されています。 + +- [hls.js/MIGRATING.md at master · video-dev/hls.js](https://github.com/video-dev/hls.js/blob/master/MIGRATING.md#migrating-from-hlsjs-0x-to-1x) + +---- + +Storybook 6.2がリリースされました。 + +- [Storybook 6.2](https://storybook.js.org/blog/storybook-6-2/) + +Storybook 6.2ではVue 3とSvelteのサポートが追加されています。 + +- [Storybook for Vue 3](https://storybook.js.org/blog/storybook-vue3/) +- [Storybook for Svelte](https://storybook.js.org/blog/storybook-for-svelte/) + +Yarn 2のPnP/npm 7/ESMのサポート、webpack 5をopt-inでサポートしています。 + +- [Storybook for Webpack 5](https://storybook.js.org/blog/storybook-for-webpack-5/) + +また、Controls addonが改善され、JSON editorやcolor pickerなどの機能が追加されています。 + +---- + +

ヘッドライン

+ +---- + +## Node v12.22.0 (LTS) | Node.js +[nodejs.org/en/blog/release/v12.22.0/](https://nodejs.org/en/blog/release/v12.22.0/ "Node v12.22.0 (LTS) | Node.js") +

node.js ReleaseNote

+ +Node.js 12.22.0リリース。 +`--http-parser=legacy`を非推奨化、ES ModulesをStable化、`NAPI_VERSION`を`8`に変更。 +`v8.takeCoverage()`、`v8.stopCoverage()`、`worker.performance.eventLoopUtilization()`の追加など + + +---- + +## Release v6.0.0 · typicode/husky +[github.com/typicode/husky/releases/tag/v6.0.0](https://github.com/typicode/husky/releases/tag/v6.0.0 "Release v6.0.0 · typicode/husky") +

JavaScript Tools license ReleaseNote

+ +husky 6.0.0リリース。 +5.0.0はParity Publicライセンスとしてリリースされ、30日経過したので6.0.0ではMITライセンスとなった。 + + +---- + +## Node v15.13.0 (Current) | Node.js +[nodejs.org/en/blog/release/v15.13.0/](https://nodejs.org/en/blog/release/v15.13.0/ "Node v15.13.0 (Current) | Node.js") +

node.js ReleaseNote

+ +Node.js 15.13.0リリース。 +ウェブとの互換性を目的として`buffer`モジュールに`btoa`と`atob`メソッドを実装など + + +---- + +## Announcing TypeScript 4.3 Beta | TypeScript +[devblogs.microsoft.com/typescript/announcing-typescript-4-3-beta/](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-beta/ "Announcing TypeScript 4.3 Beta | TypeScript") +

TypeScript ReleaseNote

+ +TypeScript 4.3 Betaリリース。 +setterにgetterとは異なる型を指定できるように、`override`キーワードの追加、Template String Typeの改善。 +Private Class Elements(fields/methods/accessors)のサポート、Promiseオブジェクトを条件式に渡してしまうミスのチェックを追加。 +その他には、`static` Index Signatureのサポートなど + + +---- + +## Release v5.30.0 · webpack/webpack +[github.com/webpack/webpack/releases/tag/v5.30.0](https://github.com/webpack/webpack/releases/tag/v5.30.0 "Release v5.30.0 · webpack/webpack") +

webpack JavaScript ReleaseNote

+ +webpack 5.30.0リリース。 +`cache.type: "memory"`でwatch中に`[contenthash]`などを使うと、ファイル変更ごとにゴミがメモリに貯まる問題の改善。 +`cache.maxGenerations`と`cache.maxAge`で不要となったキャッシュを削除できるように + +- [SourceMapDevTool plugin leaks memory in watch mode · Issue #12947 · webpack/webpack](https://github.com/webpack/webpack/issues/12947 "SourceMapDevTool plugin leaks memory in watch mode · Issue #12947 · webpack/webpack") +- [memory usage improvements, add GC support for memory cache, persistent cache only mode by sokra · Pull Request #12990 · webpack/webpack](https://github.com/webpack/webpack/pull/12990 "memory usage improvements, add GC support for memory cache, persistent cache only mode by sokra · Pull Request #12990 · webpack/webpack") + +---- + +## Release v1.0.0 · video-dev/hls.js +[github.com/video-dev/hls.js/releases/tag/v1.0.0](https://github.com/video-dev/hls.js/releases/tag/v1.0.0 "Release v1.0.0 · video-dev/hls.js") +

JavaScript HLS library ReleaseNote

+ +HLS.js 1.0.0リリース。 +Apple Low-Latency HLSのサポート、fmp4 streamのサポート改善、コードベースをTypeScriptに書きなおしなど。 +破壊的な変更として`backBufferLength`のデフォルト値の変更、イベントのシグネチャの変更など + +- [hls.js/MIGRATING.md at master · video-dev/hls.js](https://github.com/video-dev/hls.js/blob/master/MIGRATING.md#migrating-from-hlsjs-0x-to-1x "hls.js/MIGRATING.md at master · video-dev/hls.js") + +---- + +## Proposal for dropping ie11 support in Vue 3 · Discussion #296 · vuejs/rfcs +[github.com/vuejs/rfcs/discussions/296](https://github.com/vuejs/rfcs/discussions/296 "Proposal for dropping ie11 support in Vue 3 · Discussion #296 · vuejs/rfcs") +

Vue IE proposal

+ +Vue 3ではIE 11のサポートをしないというRFC。 +代わりにVue 2.xへ3.xの機能をバックポートすることに注力するというProposal。 + + +---- + +## Release v2.0.0 · js-reporters/js-reporters +[github.com/js-reporters/js-reporters/releases/tag/v2.0.0](https://github.com/js-reporters/js-reporters/releases/tag/v2.0.0 "Release v2.0.0 · js-reporters/js-reporters") +

JavaScript test library ReleaseNote spec

+ +JavaScriptのテストフレームワークのレポートの共通インターフェイスを定義する目的のjs-reporters 2.0.0リリース。 +`SummaryReporter`の実装、Proposalの更新など + + +---- + +## Storybook 6.2 +[storybook.js.org/blog/storybook-6-2/](https://storybook.js.org/blog/storybook-6-2/ "Storybook 6.2") +

JavaScript debug Tools ReleaseNote

+ +Storybook 6.2リリース。 +Vue 3とSvelteサポート、Yarn 2のPnp/npm 7/ESMのサポート、webpack 5をopt-inでサポート。 +Controls addonにJSON editorやcolor pickerの追加など + + +---- +

アーティクル

+ +---- + +## React Hooksのみでドラッグ＆ドロップの並び替えを実装する +[zenn.dev/uttk/articles/b90454baec68c8](https://zenn.dev/uttk/articles/b90454baec68c8 "React Hooksのみでドラッグ＆ドロップの並び替えを実装する") +

React article tutorial

+ +Reactで要素の並び替えをD&Dする実装についての記事。 +マウスイベントとCSSを使ったD&D、要素の重なりの判定、要素の入れ替えのアニメーションなどを実装しながら見ていく記事 + + +---- + +## 特定の端末のみで起こる WebView プチフリーズを Tracing を利用して追った話 - SmartNews Engineering Blog +[developer.smartnews.com/blog/2021/03/chrome\_tracing/](https://developer.smartnews.com/blog/2021/03/chrome_tracing/ "特定の端末のみで起こる WebView プチフリーズを Tracing を利用して追った話 - SmartNews Engineering Blog") +

Chrome webview performance article

+ +WebViewのパフォーマンスデバッグについての記事。 +ChromeのRemote Inspectを使ってデバイスに接続し、プロファイルやTracingを使ったボトルネックの調査方法について + + +---- +

サイト、サービス、ドキュメント

+ +---- + +## Organize Kubernetes manifests in JavaScript | Kosko +[kosko.dev/](https://kosko.dev/ "Organize Kubernetes manifests in JavaScript | Kosko") +

kubernetes JavaScript Tools

+ +kubernetesのmanifestをJavaScript/TypeScriptで書けるツール。 + + +---- +

ソフトウェア、ツール、ライブラリ関係

+ +---- + +## mistlog/typetype: A programming language designed for typescript type generation +[github.com/mistlog/typetype](https://github.com/mistlog/typetype "mistlog/typetype: A programming language designed for typescript type generation") +

TypeScript library

+ +TypeScriptの型書くDSLのパーサとジェネレーター。 +Conditional Typeを表現する`if`、Mapped Typesを表現する`for`などを使って型定義を書ける。 +パーサはreact-pegを使い、パースしたASTからBabelを通してTSのコードを出力している + +- [mistlog/react-peg: A react style parser generator based on PEG.js](https://github.com/mistlog/react-peg "mistlog/react-peg: A react style parser generator based on PEG.js") + +---- + +## egoist/esbuild-register: Transpile JSX, TypeScript and esnext features on the fly with esbuild +[github.com/egoist/esbuild-register](https://github.com/egoist/esbuild-register "egoist/esbuild-register: Transpile JSX, TypeScript and esnext features on the fly with esbuild") +

JavaScript Tools node.js

+ +esbuildを使ったruntimeでの変換ツール。 +@babel/registerやts-node/registerのように`--require`に指定して変換処理をする + + +---- + +## FicusJS - a set of lightweight functions for developing applications using web components +[docs.ficusjs.org/](https://docs.ficusjs.org/ "FicusJS - a set of lightweight functions for developing applications using web components") +

WebComponents library

+ +Web Componentsでアプリケーションを開発する目的のライブラリセット。 +コンポーネントの作成、`uhtml`/`lit-html`/`htm`などを使ったレンダリング、Storeでのステート管理などの機能を提供する + +- [Developing Without a Build (1): Introduction - DEV Community 👩‍💻👨‍💻](https://dev.to/open-wc/developing-without-a-build-1-introduction-26ao "Developing Without a Build (1): Introduction - DEV Community 👩‍💻👨‍💻") + +---- +

書籍関係

+ +---- + +## Accessible Vue – The Why and How of building inclusive apps in Vue.js +[accessible-vue.com/](https://accessible-vue.com/ "Accessible Vue – The Why and How of building inclusive apps in Vue.js") +

Vue accessibility book

+ +ウェブアクセシビリティとVueでの実装についての書籍 + +- [Accessible Vue by Marcus Herrmann \[Leanpub PDF/iPad/Kindle\]](https://leanpub.com/accessible-vue "Accessible Vue by Marcus Herrmann \[Leanpub PDF/iPad/Kindle\]") + +---- diff --git a/_i18n/ko/_posts/2021/2021-05-18-node.js-14.17.0-typescript-4.3-rc-angular-v12.md b/_i18n/ko/_posts/2021/2021-05-18-node.js-14.17.0-typescript-4.3-rc-angular-v12.md new file mode 100644 index 00000000000..4e39d1e145a --- /dev/null +++ b/_i18n/ko/_posts/2021/2021-05-18-node.js-14.17.0-typescript-4.3-rc-angular-v12.md @@ -0,0 +1,244 @@ +--- +title: "2021-05-18のJS: Node.js 14.17.0、TypeScript 4.3 RC(インクリメンタルビルドの改善)、Angular v12" +author: "azu" +layout: post +date : 2021-05-18T02:32:50.556Z +category: JSer +tags: +- TypeScript +- React +- node.js +- CSS +- issue + +--- + +JSer.info #540 - 現在のLTSの最新版であるNode v14.17.0がリリースされました。 + +- [Node v14.17.0 (LTS) | Node.js](https://nodejs.org/en/blog/release/v14.17.0/) + +Node v14.17.0では、Node.js 15.x で追加された機能やモジュールがバックポートされています。 + +診断情報を扱う[diagnostics_channel](https://nodejs.org/api/diagnostics_channel.html)モジュールの追加、UUID v4を生成する`crypto.randomUUID()`が追加されています。 +`crypto.randomUUID()` はWHATWGで定義されている仕様で、[Chromeにも実装が追加](https://chromium.googlesource.com/chromium/src/+/e70b29ae998ed65902cdaeb0b2418a13d0755773)されています。 + +- [WICG/uuid: UUID V4](https://github.com/WICG/uuid) +- [crypto.randomUUID() - Chrome Platform Status](https://www.chromestatus.com/feature/5689159362543616) + +また、` --experimental-abortcontroller`の実験フラグ付きですが、`AbortController`と`AbortSignal`の対応が次のメソッドに追加されています。 + +- `child_process.exec` +- `child_process.execFile` +- `child_process.fork` +- `child_process.spawn` +- `dgram.createSocket` +- `events.on` +- `events.once` +- `fs.readFile` +- `fs.watch` +- `fs.writeFile` +- `http.request` +- `https.request` +- `http2Session.request` +- Promise版の`setImmediate`と`setTimeout` + +---- + +TypeScript 4.3 RC(リリース候補)がリリースされました。 + +- [Announcing TypeScript 4.3 RC | TypeScript](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/) + +基本的な変更内容はBetaのものを含んでいます。 + +- [2021-04-06のJS: TypeScript 4.3 Beta、hls.js v1.0.0(Apple Low-Latency HLS)、Storybook 6.2 - JSer.info](https://jser.info/2021/04/06/typescript-4.3-beta-hls.js-v1.0.0apple-low-latency-hls-storybook-6.2/) + +RCで新たに追加されたものとして、`--incremental`と`--watch`を使った初回のビルドが遅い問題が解消されています。 + +- [Do not calculate signatures if old state is not used by sheetalkamat · Pull Request #43314 · microsoft/TypeScript](https://github.com/microsoft/TypeScript/pull/43314) +- [Make initial incremental/watch builds as fast normal builds by sokra · Pull Request #42960 · microsoft/TypeScript](https://github.com/microsoft/TypeScript/pull/42960) + +また、`--incremental`フラグなどを使った際に生成される[`.tsbuildinfo`のファイルサイズが改善](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/#tsbuildinfo-size-improvements)されています。 + +---- + +[6ヶ月ごとにメジャーアップデート](https://angular.io/guide/releases#release-frequency)されるAngularの最新版であるAngular 12がリリースされました。 + +- [Angular v12 is now available. It’s that time again, friends — we’re… | by Mark Techson | May, 2021 | Angular Blog](https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49) +- [Release 12.0.0 · angular/angular](https://github.com/angular/angular/releases/tag/12.0.0) + +View Engineは非推奨となりIvyがデフォルトへと移行、Legacy i18n Message IDsからの移行ツールが公開されています。 + +- [Angular - Migrating legacy localization IDs](https://angular.io/guide/migration-legacy-message-id) + +以前、開発終了を告知されていたProtractorについても、Angular 12からProtractorはデフォルトでは新規プロジェクトには含めないようになっています。 + +- [Future of Angular E2E & Plans for Protractor · Issue #5502 · angular/protractor](https://github.com/angular/protractor/issues/5502#issuecomment-837432362) + +また、Angular 12ではIE 11のサポートが非推奨となり警告が出るようになっています。 +IE 11のサポートはAngular 13で削除される予定です。 +そのため、AngularでのIEサポートはAngular 12が最後となり、Angular 12のLTS期限である2022年11月で完全にIEサポートが終了する予定となっています。 + +- [RFC: Internet Explorer 11 support deprecation and removal · Issue #41840 · angular/angular](https://github.com/angular/angular/issues/41840) + +その他には、インラインSassのサポートなど。 TypeScript 4.2へのアップデート、webpack 5の正式サポートなども含まれています。 + + + +---- + +

ヘッドライン

+ +---- + +## What do you not like about DefinitelyTyped as a user and contributor? · Issue #44030 · microsoft/TypeScript +[github.com/microsoft/TypeScript/issues/44030](https://github.com/microsoft/TypeScript/issues/44030 "What do you not like about DefinitelyTyped as a user and contributor? · Issue #44030 · microsoft/TypeScript") +

TypeScript issue

+ +DefinitelyTypedへの意見を募集しているIssue + + +---- + +## Node v14.17.0 (LTS) | Node.js +[nodejs.org/en/blog/release/v14.17.0/](https://nodejs.org/en/blog/release/v14.17.0/ "Node v14.17.0 (LTS) | Node.js") +

node.js ReleaseNote

+ +Node v14.17.0リリース。 +試験的に`diagnostics_channel`を追加、`crypto.randomUUID()`の追加。 +また、Node.js 15で実装されていたコアモジュールにおける`AbortController`と`AbortSignal`の対応をバックポートなど + + +---- + +## Deno 1.10 Release Notes | Deno Blog +[deno.com/blog/v1.10](https://deno.com/blog/v1.10 "Deno 1.10 Release Notes | Deno Blog") +

deno ReleaseNote

+ +Deno 1.10リリース。 +`deno test`がisolateした状態でparallelにテストを実行、`permissions`の指定に対応、出力の変更、コメントのコードの型チェックに対応など。 +`Worker.postMessage`がstructured clone algorithmに対応、localStorageなどのWeb Storage APIに対応。 +`WebAssembly.Memory`が`shared`オプションに対応、`--import-map`へリモートURLを指定できるようになるなど + + +---- + +## Announcing TypeScript 4.3 RC | TypeScript +[devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/ "Announcing TypeScript 4.3 RC | TypeScript") +

TypeScript ReleaseNote

+ +TypeScript 4.3 RCリリース。 +setterにgetterとは異なる型を指定できるように、`override`キーワードの追加、Template String Typeの改善。 +Private Class Elements(fields/methods/accessors)のサポート、`static` Index Signatureのサポート。 +`ConstructorParameters`がAbstract classをサポート、Genericsにおける型の絞り込みの改善、Promiseオブジェクトを条件式に渡してしまうミスのチェックを追加。 +その他には、`.tsbuildinfo`のサイズ改善、watch時の初回ビルドの改善など。 + + +---- + +## Angular v12 is now available. It’s that time again, friends — we’re… | by Mark Techson | May, 2021 | Angular Blog +[blog.angular.io/angular-v12-is-now-available-32ed51fbfd49](https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49 "Angular v12 is now available. It’s that time again, friends — we’re… | by Mark Techson | May, 2021 | Angular Blog") +

Angular ReleaseNote

+ +Angular 12リリース。 +View Engineは非推奨となりIvyがデフォルトへと移行、Legacy i18n Message IDsからの移行ツール、インラインSassのサポートなど。 +TypeScript 4.2へのアップデート、webpack 5の正式サポート、IE 11サポートの非推奨化など + +- [Release 12.0.0 · angular/angular](https://github.com/angular/angular/releases/tag/12.0.0 "Release 12.0.0 · angular/angular") +- [Angular - Migrating legacy localization IDs](https://angular.io/guide/migration-legacy-message-id "Angular - Migrating legacy localization IDs") + +---- + +## V8 release v9.1 · V8 +[v8.dev/blog/v8-release-91](https://v8.dev/blog/v8-release-91 "V8 release v9.1 · V8") +

V8 ReleaseNote

+ +V8 v9.1リリース。 +Top-level awaitのデフォルトサポート、`#foo in obj`のPrivate brand checksのサポートなど + + +---- + +## Announcing Docusaurus 2 Beta | Docusaurus +[docusaurus.io/blog/2021/05/12/announcing-docusaurus-two-beta](https://docusaurus.io/blog/2021/05/12/announcing-docusaurus-two-beta "Announcing Docusaurus 2 Beta | Docusaurus") +

React document

+ +Docusaurus 2 Betaリリース + + +---- +

アーティクル

+ +---- + +## Writing A Type Safe Store | Lachlan Miller +[lachlan-miller.me/articles/advanced-type-a-type-safe-store-for-vue-3](https://lachlan-miller.me/articles/advanced-type-a-type-safe-store-for-vue-3 "Writing A Type Safe Store | Lachlan Miller") +

Vue TypeScript article

+ +Vueのステート管理ライブラリであるPiniaのType SafeなStoreの型定義の解説 + +- [posva/pinia: 🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support](https://github.com/posva/pinia/ "posva/pinia: 🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support") + +---- + +## Next Gen CSS: @container | CSS-Tricks +[css-tricks.com/next-gen-css-container/](https://css-tricks.com/next-gen-css-container/ "Next Gen CSS: @container | CSS-Tricks") +

CSS article

+ +`@container`についての記事。 +親要素には`contain`プロパティを指定する必要がある点、`@container`でのレスポンシブデザインについて + + +---- + +## Cross-browser tracking vulnerablity in Tor, Safari, Chrome and Firefox - FingerprintJS +[fingerprintjs.com/blog/external-protocol-flooding/](https://fingerprintjs.com/blog/external-protocol-flooding/ "Cross-browser tracking vulnerablity in Tor, Safari, Chrome and Firefox - FingerprintJS") +

browser security privacy article

+ +ブラウザからURLスキームでアプリを開くときの挙動を利用してフィンガープリントできるという話。 +未知のプロトコルを開く際にはダイアログでの確認やユーザインタラクションが必要となっている。 +しかし、それぞれのブラウザで既知のプロトコルや`about:blank`を使ったSOP(Same Origin Policy)での抜け道で、どのアプリがインストールされているかを判定できるという話 + + +---- + +## DocBaseのフロントエンド改修をどのように進めたか – KRAY Inc. +[kray.jp/blog/how-to-docbase-renewal/](https://kray.jp/blog/how-to-docbase-renewal/ "DocBaseのフロントエンド改修をどのように進めたか – KRAY Inc.") +

CoffeeScript React TypeScript refacoring article

+ +Backbone + Marionette + CoffeeScriptで書かれていたウェブサービスをReact + TypeScriptに一括で移行した話。 +E2Eを使ったテスト、構造を維持しながらReact化、コンポーネントへの分離などの移行の方法についてなど + + +---- + +## Babel is used by millions, so why are we running out of money? · Babel +[babeljs.io/blog/2021/05/10/funding-update.html](https://babeljs.io/blog/2021/05/10/funding-update.html "Babel is used by millions, so why are we running out of money? · Babel") +

babel article

+ +Babelの資金の状態、ロードマップ、寄付について。 + +- [Babel Roadmap · Babel](https://babeljs.io/docs/en/roadmap#babel-2021-roadmap "Babel Roadmap · Babel") + +---- + +## styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ +[blog.cybozu.io/entry/2020/06/25/105457](https://blog.cybozu.io/entry/2020/06/25/105457 "styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ") +

CSS React article sass

+ +Sassで書かれていたスタイルをCSS in JSに移行する話。 +styled-componentsを使って書く場合にスタイリングとJSXを分離するためのルール、Sassの変数を抽出して移行するスクリプトについてなど + + +---- +

ソフトウェア、ツール、ライブラリ関係

+ +---- + +## coderaiser/simport: Import like with require but using async +[github.com/coderaiser/simport](https://github.com/coderaiser/simport "coderaiser/simport: Import like with require but using async") +

node.js library

+ +ESMなNode.jsで`require`、`__filename`、`__dirname`などのshim機能を提供するライブラリ + + +---- diff --git a/_i18n/ko/_posts/2021/2021-12-15-tailwind-css-v3.0-create-react-app-v5.0.0-cls.md b/_i18n/ko/_posts/2021/2021-12-15-tailwind-css-v3.0-create-react-app-v5.0.0-cls.md new file mode 100644 index 00000000000..9b02843aaf8 --- /dev/null +++ b/_i18n/ko/_posts/2021/2021-12-15-tailwind-css-v3.0-create-react-app-v5.0.0-cls.md @@ -0,0 +1,187 @@ +--- +title: "2021-12-15: Tailwind CSS v3.0, create-react-app v5.0.0, CLS 개선" +author: "azu" +translator: U-Yeong Ju +layout: post +date : 2021-12-15T00:08:41.159Z +category: JSer +tags: +- node.js +- CSS +- safari +- Tools +- DOM + +--- + +JSer.info #570 - Tailwind CSS v3.0가 릴리스 됐다. + +- [Tailwind CSS v3.0 – Tailwind CSS](https://tailwindcss.com/blog/tailwindcss-v3) + +클래스 명으로 지정한 템플릿을 토대로 스타일 클래스를 생성하는 Just-in-Time Mode 엔진이 개편됐다. +또, Box Shadow Color가 추가됐고 CSS Scroll Snap, Multi-column layout 등을 지원한다. +그 외로는 시험적으로 RTL과 LTR modifiers를 지원하며 따로 빌드 없이 브라우저에서 바로 사용할 수 있는 개발용 CDN(Paly CDN) 스크립트를 지원한다. + + +- [Installation: Play CDN - Tailwind CSS](https://tailwindcss.com/docs/installation/play-cdn) + +---- + +Create React App 5.0가 릴리스 됐다. + +- [Release v5.0.0 · facebook/create-react-app](https://github.com/facebook/create-react-app/releases/tag/v5.0.0) + +webpack 5, Jest 27, ESLint 8, PostCSS 8로 각각 갱신됐다. +또, tailwind.config.js를 지원하고 의존 버전 고정을 삭제했으며 Node 10, 12가 지원 종료됐다. + +---- + +BuzzFeed에서 CLS 개선을 주제로 정리한 연재 글을 공개했다. + +- [Improving CLS at BuzzFeed — Part 1 | BuzzFeed Tech](https://tech.buzzfeed.com/improving-cumulative-layout-shift-at-buzzfeed-part-1-8b7ead2381dd) +- [Improving CLS at BuzzFeed — Part 2 | BuzzFeed Tech](https://tech.buzzfeed.com/improving-cumulative-layout-shift-at-buzzfeed-part-2-2a846adeb097) +- [Improving CLS at BuzzFeed — Part 3 | BuzzFeed Tech](https://tech.buzzfeed.com/improving-cumulative-layout-shift-at-buzzfeed-part-3-3a36240861e4) + +RUM과 Synthetic Moniting에서의 CLS 스코어 모니터링, RUM 로그로 부터 CLS를 발생 시키고 있는 요소 검출과 수정, 서드 파티에서 삽입하는 컨텐츠에 의한 CLS 문제를 개선하는 방법 등 폭넓게 다루고 있다. + + +---- + +

헤드라인

+ +---- + +## Tailwind CSS v3.0 – Tailwind CSS +[tailwindcss.com/blog/tailwindcss-v3](https://tailwindcss.com/blog/tailwindcss-v3 "Tailwind CSS v3.0 – Tailwind CSS") +

CSS library ReleaseNote

+ +Tailwind CSS v3.0 릴리스. +Just-in-Time Mode 엔진 개편, Box Shadow Color 추가, CSS Scroll Snap 지원, Multi-column layout 지원 등. + + +---- + +## Release 13.0.0 · puppeteer/puppeteer +[github.com/puppeteer/puppeteer/releases/tag/v13.0.0](https://github.com/puppeteer/puppeteer/releases/tag/v13.0.0 "Release 13.0.0 · puppeteer/puppeteer") +

Chrome library ReleaseNote

+ +puppeteer 13.0.0 릴리스. +`already-handled`의 typo를 수정. + + +---- + +## Release Notes for Safari Technology Preview 136 | WebKit +[webkit.org/blog/12137/release-notes-for-safari-technology-preview-136/](https://webkit.org/blog/12137/release-notes-for-safari-technology-preview-136/ "Release Notes for Safari Technology Preview 136 | WebKit") +

safari ReleaseNote WebExtension

+ +Safari Technology Preview 136 릴리스. +`contain: paint`, `revert-layer`, `flex-basis: content` 지원. +`Temporal.Instant` 구현, WebExtension의 Manigest V3를 지원. + + +---- + +## GitHub Actions: GitHub-hosted runners now run Node.js 16 by default | GitHub Changelog +[github.blog/changelog/2021-12-10-github-actions-github-hosted-runners-now-run-node-js-16-by-default/](https://github.blog/changelog/2021-12-10-github-actions-github-hosted-runners-now-run-node-js-16-by-default/ "GitHub Actions: GitHub-hosted runners now run Node.js 16 by default | GitHub Changelog") +

Github Actions node.js news

+ +GitHub Actions의 Node.js 기본 버전이 Node.js 16으로 변경됐다. + + +---- + +## Release v5.0.0 · facebook/create-react-app +[github.com/facebook/create-react-app/releases/tag/v5.0.0](https://github.com/facebook/create-react-app/releases/tag/v5.0.0 "Release v5.0.0 · facebook/create-react-app") +

React Tools ReleaseNote

+ +create-react-app v5.0.0 릴리스. +webpack 5, Jest 27, ESLint 8, PostCSS 8로 각각 업데이트. +tailwind.config.js 지원, 의존 버전 고정 삭제, Node 10와 12 지원 종료 등. + + +---- + +## New WebKit Features in Safari 15.2 | WebKit +[webkit.org/blog/12140/new-webkit-features-in-safari-15-2/](https://webkit.org/blog/12140/new-webkit-features-in-safari-15-2/ "New WebKit Features in Safari 15.2 | WebKit") +

safari ReleaseNote WebAssembly

+ +Safari 15.2의 변경 사항 정리 및 소개. +Wasm에서 이용 가능한 메모리가 4GB로 확장, COOP / COEP HTTP 헤더를 지원하고 crossOriginIsolated 시 SharedArrayBuffer / Wasm 스레드를 이용할 수 있도록 변경. +Canvas에서 `colorSpace: "display-p3"`를 지원 등. + + +---- + +## Release 5.0.0 – ESM support, CSS Selectors Level 4 · css/csso +[github.com/css/csso/releases/tag/v5.0.0](https://github.com/css/csso/releases/tag/v5.0.0 "Release 5.0.0 – ESM support, CSS Selectors Level 4 · css/csso") +

CSS Tools ReleaseNote

+ +CSS minify 도구 CSSO 5.0.0 릴리스. +CSS Selectors Level 4 지원, 모듈 시스템을 ESM으로 변경했지만 ESM to CJS으로 dual module을 지원한다. + + +---- +

아티클

+ +---- + +## Improving CLS at BuzzFeed — Part 1 | BuzzFeed Tech +[tech.buzzfeed.com/improving-cumulative-layout-shift-at-buzzfeed-part-1-8b7ead2381dd](https://tech.buzzfeed.com/improving-cumulative-layout-shift-at-buzzfeed-part-1-8b7ead2381dd "Improving CLS at BuzzFeed — Part 1 | BuzzFeed Tech") +

article performance

+ +BuzzFeed의 Web Vitals 측정과 이를 이용한 개선을 주제로한 연재 글. +RUM과 Synthetic Moniting을 이용한 CLS 스코어 모니터링, RUM 로그에서 CLS를 발생시키고 있는 요소 검출과 수정, 서드 파티의 삽입 컨텐츠에 의한 CLS 문제 개선 등. + +- [Improving CLS at BuzzFeed — Part 2 | BuzzFeed Tech](https://tech.buzzfeed.com/improving-cumulative-layout-shift-at-buzzfeed-part-2-2a846adeb097 "Improving CLS at BuzzFeed — Part 2 | BuzzFeed Tech") +- [Improving CLS at BuzzFeed — Part 3 | BuzzFeed Tech](https://tech.buzzfeed.com/improving-cumulative-layout-shift-at-buzzfeed-part-3-3a36240861e4 "Improving CLS at BuzzFeed — Part 3 | BuzzFeed Tech") + +---- + +## New in Node.js: \`node:\` protocol imports +[2ality.com/2021/12/node-protocol-imports.html](https://2ality.com/2021/12/node-protocol-imports.html "New in Node.js: \`node:\` protocol imports") +

node.js article

+ +`node:` protocol을 이용한 Node.js의 빌트인 모듈 참조 방법 소개. +`node:` 는 Node.js 내장 모듈을 참조할 때 쓰는 새로운 방식. + + * Node.js의 내장 모듈을 참조하고 있음을 바로 알 수 있다. + * 몇 개의 내장 모듈을 참조하고 있는지 판단할 때 유용한 정보. + * `node_modules` 내의 모듈이 내장 모듈을 재정의 할 위험이 없다. + * Node.js가 새로운 내장 모듈을 추가할 때 특히 중요(기존 npm 모듈과의 충돌 방지). + + +---- + +## Debug memory leaks with the Microsoft Edge Detached Elements tool - Microsoft Edge Blog +[blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/](https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/ "Debug memory leaks with the Microsoft Edge Detached Elements tool - Microsoft Edge Blog") +

MSEdge debug article

+ +MSEdge 개발자 도구의 Detached Elements 기능 소개. +DOM 트리에서 분리된 요소를 나열해서 살펴볼 수 있으며 이 정보로 DOM 메모리 릭을 디버깅할 수 있다. + + +---- +

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

+ +---- + +## capricorn86/happy-dom: A jsdom alternative with support for server side rendering of web components. +[github.com/capricorn86/happy-dom](https://github.com/capricorn86/happy-dom "capricorn86/happy-dom: A jsdom alternative with support for server side rendering of web components.") +

JavaScript DOM node.js library

+ +JSDOM 처럼 Node.js에서 DOM API를 사용할 수 있도록 하는데 목적을 둔 라이브러리. +서버 사이드 렌더링 용 패키지도 함께 공개돼 있다. + + +---- + +## Akryum/peeky: Test framework for curious minds 🐈️ Powered by Vite ⚡️ +[github.com/Akryum/peeky](https://github.com/Akryum/peeky "Akryum/peeky: Test framework for curious minds 🐈️ Powered by Vite ⚡️") +

vite testing library

+ +Vite를 사용한 테스트 프레임워크. +테스트 개발 용 GUI를 제공한다. + + +----