-
-
Notifications
You must be signed in to change notification settings - Fork 68
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
210 additions
and
0 deletions.
There are no files selected for viewing
210 changes: 210 additions & 0 deletions
210
_i18n/ko/_posts/2022/2022-10-05-deno-1.26-axios-v1.0.0-optimize-long-tasks.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,210 @@ | ||
| --- | ||
| title: "2022-10-05: Deno 1.26, axios v1.0.0, Optimize long tasks" | ||
| author: "azu" | ||
| translator: U-Yeong Ju | ||
| layout: post | ||
| date : 2022-10-05T02:58:23.681Z | ||
| category: JSer | ||
| tags: | ||
| - TypeScript | ||
| - tutorial | ||
| - browser | ||
| - WebAssembly | ||
| - node.js | ||
|
|
||
| --- | ||
|
|
||
| JSer.info #612 - Deno 1.26 릴리스 됐다. | ||
|
|
||
| - [Deno 1.26 Release Notes](https://deno.com/blog/v1.26) | ||
|
|
||
| Cache API 지원, 새로운 퍼미션으로 `--allow-sys` 플래그가 추가됐다. | ||
| 또, `node_modules` 디렉터리를 다루는 취급하는 `--node-modules-dir` 플래그를 추가하고 Node.js 와의 호환성 모드로 쓰이던 `--compat` 플래그를 삭제했다. 이제 `compat` 모드는 `npm:` 식별자에 의해 대체된다. | ||
|
|
||
| 이어 Node.js 코어 모듈과의 호환성 개선, `Deno.serve()` API 등 성능 개선, TypeScrtipt 4.8로 업데이트가 이뤄졌다. | ||
|
|
||
| --- | ||
|
|
||
| HTTP 클라이언트 라이브러리 axios v1.0.0이 릴리스 됐다. | ||
|
|
||
| - [Release v1.0.0 · axios/axios](https://github.com/axios/axios/releases/tag/v1.0.0) | ||
|
|
||
| [여러 큰 변경은 없다고](https://github.com/axios/axios/discussions/4761#discussioncomment-2937754) 하며 아직 자세한 마이그레이션 가이드는 공개되지 않았다. | ||
|
|
||
| - [Are there any Migration Guide for v1.0.0? · Discussion #4996 · axios/axios](https://github.com/axios/axios/discussions/4996) | ||
|
|
||
| --- | ||
|
|
||
| [Optimize long tasks](https://web.dev/optimize-long-tasks/)에서는 50ms 이상 소요되는 long tasks를 어떻게 최적화 할 수 있는지 소개하고 있다. | ||
|
|
||
| long task가 있는 경우 해당 task로 인해 어떤 사용자 입력이나 표시 갱신을 차단하는 경우가 발생한다. | ||
| 이를 개선하기 위해 태스크를 분해하는 방법과 `navigator.scheduling.isInputPending()`을 이용한 실행 타이밍 판정, `schedulerpostTask` API 사용 방법 등을 소개한다. | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| <h1 class="site-genre">헤드라인</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Deno 1.26 Release Notes | ||
| [deno.com/blog/v1.26](https://deno.com/blog/v1.26 "Deno 1.26 Release Notes") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Deno 1.26 릴리스. | ||
| Cache API 지원, `--allow-sys` 플래그 추가, `node_modules` 디렉터리를 취급하느 `--node-modules-dir` 플래그 추가하고 `--compat` 플래그 삭제. | ||
| 또, Node.js 코어 모듈과의 호환성 개선, `Deno.serve()` API 등 성능 개선, TypeScrtipt 4.8로 갱신 등 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Astro 1.4.0 Release | Astro | ||
| [astro.build/blog/astro-140/](https://astro.build/blog/astro-140/ "Astro 1.4.0 Release | Astro") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">astro</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Astro 1.4.0 릴리스. | ||
| `Astro.cookies` 추가, pnpm 지원 개선, CSS의 명시도(specificity)가 public / import / style 태그로 동일할 경우의 우선 순위 조정. | ||
| Vue에서 JSX 지원 등. | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## watch: add initial implementation for \`node --watch\` by MoLow · Pull Request #44366 · nodejs/node | ||
| [github.com/nodejs/node/pull/44366](https://github.com/nodejs/node/pull/44366 "watch: add initial implementation for \`node --watch\` by MoLow · Pull Request #44366 · nodejs/node") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">issue</span></p> | ||
|
|
||
| Node.js에 `--watch` 플래그가 추가 됐다. | ||
| nodemon 처럼 파일 변경 된 경우 프로세스를 재시작 한다. | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release v9.0.0-pre.3 · npm/cli | ||
| [github.com/npm/cli/releases/tag/v9.0.0-pre.3](https://github.com/npm/cli/releases/tag/v9.0.0-pre.3 "Release v9.0.0-pre.3 · npm/cli") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| npm v9.0.0-pre.3 릴리스. | ||
| `package.json`에 `files` 배열이 있는 경우 `npm pack`은 root에 있는 gitignore와 npmignore를 무시하도록 변경됐다. | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## tools/CHANGELOG.md at main · rome/tools | ||
| [github.com/rome/tools/blob/main/CHANGELOG.md#0100](https://github.com/rome/tools/blob/main/CHANGELOG.md#0100 "tools/CHANGELOG.md at main · rome/tools") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Rome 0.10.0 릴리스. | ||
| 성능 개선, ignore에 Glob을 이용할 수 있도록 변경, Formatter와 Linter 관련 규칙 및 기능 추가 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release v1.0.0 · axios/axios | ||
| [github.com/axios/axios/releases/tag/v1.0.0](https://github.com/axios/axios/releases/tag/v1.0.0 "Release v1.0.0 · axios/axios") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">HTTP</span></p> | ||
|
|
||
| axios v1.0.0 릴리스. | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Node v18.10.0 (Current) | Node.js | ||
| [nodejs.org/en/blog/release/v18.10.0/](https://nodejs.org/en/blog/release/v18.10.0/ "Node v18.10.0 (Current) | Node.js") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Node.js v18.10.0 릴리스. | ||
| `ReadableByteStream.tee()` 추가 등. | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Electron 21.0.0 | Electron | ||
| [www.electronjs.org/blog/electron-21-0](https://www.electronjs.org/blog/electron-21-0 "Electron 21.0.0 | Electron") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Electron</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Electron 21.0.0 릴리스. | ||
| Chromium 106, Node.js 16.16.0, V8 10.6으로 업데이트. | ||
| `webFrameMain.origin`와 `WebContents.ipc` 추가, NSPanel와 비슷한 동작 지원.또, V8 Memory Cage가 활성화 돼 off-heap을 가리키는 ArrayBuffers는 허용되지 않게 됐다. | ||
|
|
||
| - [Electron and the V8 Memory Cage | Electron](https://www.electronjs.org/blog/v8-memory-cage "Electron and the V8 Memory Cage | Electron") | ||
|
|
||
| ---- | ||
| <h1 class="site-genre">아티클</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Ten Years of TypeScript - TypeScript | ||
| [devblogs.microsoft.com/typescript/ten-years-of-typescript/](https://devblogs.microsoft.com/typescript/ten-years-of-typescript/ "Ten Years of TypeScript - TypeScript") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| TypeScript 10 주년 기념 기사. | ||
| TypeScript가 탄생한 이후 10년이 지났다. 초기의 분위기 부터 오늘날 까지 간략하게 회고하는 글. | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Optimize long tasks | ||
| [web.dev/optimize-long-tasks/](https://web.dev/optimize-long-tasks/ "Optimize long tasks") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">browser</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| 50ms 이상 소요되는 long tasks를 분해하여 사용자 입력이나 표시를 방해하지 않도록 최적화하는 방법을 소개하는 글. | ||
| 태스크 분해 하기, `navigator.scheduling.isInputPending()`을 이용한 실행 타이밍 판정, `scheduler.postTask()` API 사용 방법 등을 소개한다. | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Postgres WASM by Snaplet and Supabase | ||
| [supabase.com/blog/postgres-wasm](https://supabase.com/blog/postgres-wasm "Postgres WASM by Snaplet and Supabase") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">PostgreSQL</span> <span class="jser-tag">WebAssembly</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| PostgreSQL의 WebAssembly 빌드 버전 소개. | ||
| PostgreSQL 자체를 Wasm으로 빌드하는 것은 어려웠기 때문에 VM을 만들고 그것을 x86 애뮬레이터로 실행한다. | ||
| 또, WebSockets을 사용한 Proxy나 시작 시간 및 이미지 크기 최적화 등에 대해서도 이야기 하고 있다. | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Client-side WebAssembly WordPress with no server – Make WordPress Core | ||
| [make.wordpress.org/core/2022/09/23/client-side-webassembly-wordpress-with-no-server/](https://make.wordpress.org/core/2022/09/23/client-side-webassembly-wordpress-with-no-server/ "Client-side WebAssembly WordPress with no server – Make WordPress Core") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">wordpress</span> <span class="jser-tag">WebAssembly</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| WordPress의 WebAssembly 빌드 버전 소개. | ||
| PHP를 Wasm으로 빌드하고 Wordpress를 실행한다. | ||
| 브라우저에서의 요청은 Service Worker로 Proxy 한다. | ||
| WordPress를 브라우저 상에서 확인할 수 있는 환경을 제공해 WordPress 개발 및 디버깅 등을 용이하게 하는데 목적이 있다. | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Type-Level TypeScript — Introduction | ||
| [type-level-typescript.com/](https://type-level-typescript.com/ "Type-Level TypeScript — Introduction") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">tutorial</span></p> | ||
|
|
||
| TypeScript의 타입에 대한 튜토리얼 사이트 | ||
| 각 타입에 대한 설명과 챕터 당 풀어볼 수 있는 연습 문제를 제공한다. | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Closing a 30 pixel gap between native and web - Microsoft Edge Blog | ||
| [blogs.windows.com/msedgedev/2022/09/27/closing-pixel-gap-native-web-window-controls-overlay/](https://blogs.windows.com/msedgedev/2022/09/27/closing-pixel-gap-native-web-window-controls-overlay/ "Closing a 30 pixel gap between native and web - Microsoft Edge Blog") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">MSEdge</span> <span class="jser-tag">UI</span> <span class="jser-tag">browser</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Window Controls Overlay를 소개하는 글. | ||
| 브라우저 윈도우의 타이틀바 영역을 PWA 앱에서 조작할 수 있도록 하는 구조. | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">사이트, 서비스, 문서</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Learn Accessibility | ||
| [web.dev/learn/accessibility/](https://web.dev/learn/accessibility/ "Learn Accessibility") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">HTML</span> <span class="jser-tag">accessibility</span> <span class="jser-tag">tutorial</span></p> | ||
|
|
||
| 웹 접근성에 대해서 학습할 수 있는 튜토리얼 사이트. | ||
|
|
||
|
|
||
| ---- | ||
|
|