|
| 1 | +--- |
| 2 | +title: "2024-01-28: Firefox 122, Deno 1.40, Safari 17.4 Beta" |
| 3 | +author: "azu" |
| 4 | +translator: rewrite0w0 |
| 5 | +layout: post |
| 6 | +date: 2024-01-28T06:24:28.239Z |
| 7 | +category: JSer |
| 8 | +tags: |
| 9 | +- document |
| 10 | +- browser |
| 11 | +- nodejs |
| 12 | +- TypeScript |
| 13 | +- Firefox |
| 14 | + |
| 15 | +--- |
| 16 | + |
| 17 | +JSer.info #678 - Firefox 122.0가 출시되었어요. |
| 18 | + |
| 19 | +- [Firefox 122.0, See All New Features, Updates and Fixes](https://www.mozilla.org/en-US/firefox/122.0/releasenotes/) |
| 20 | +- [Firefox 122 for developers - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/122) |
| 21 | + |
| 22 | +`<select>` 자식 요소로 `<hr>` 허용, CSS `offset-position`과 `offset-path` 프로퍼티를 기본적으로 유효화해요. |
| 23 | +`ArrayBuffer.prototype.transfer()` 구현, [XSS 대책으로](https://github.com/w3c/svgwg/pull/901) SVG의 `<use>`에 Data URL 이용할 수 없도록 변경되었어요. |
| 24 | +또한, 실험적 기능으로 Declarative shadow DOM, Popover API, Clipboard API, `Intl.Segmenter`가 구현되었어요. |
| 25 | + |
| 26 | +---- |
| 27 | + |
| 28 | +Deno 1.40가 출시되었어요. |
| 29 | + |
| 30 | +- [Deno 1.40: Temporal API](https://deno.com/blog/v1.40) |
| 31 | + |
| 32 | +Temporal API 지원, `import.meta.filename`/`import.meta.dirname` 지원되어요. |
| 33 | +`import.meta.filename`/`import.meta.dirname`는, Node.js와 Bun에서도 지원되고 있어요. |
| 34 | + |
| 35 | +- [Node.js — Node v20.11.0 (LTS)](https://nodejs.org/en/blog/release/v20.11.0) |
| 36 | +- [Bun v1.0.23 | Bun Blog](https://bun.sh/blog/bun-v1.0.23#import-meta-dirname-and-import-meta-filename-support) |
| 37 | + |
| 38 | +그 외로는, `window`, `Deno.run()`, `Deno.serveHttp()`, `Deno.metrics()` 등 오래된 API를 비권장화했어요. |
| 39 | + |
| 40 | +---- |
| 41 | + |
| 42 | +Safari 17.4 Beta가 출시되었어요. |
| 43 | + |
| 44 | +- [Safari 17.4 Beta Release Notes | Apple Developer Documentation](https://developer.apple.com/documentation/safari-release-notes/safari-17_4-release-notes) |
| 45 | + |
| 46 | +CSS, `@scope` 지원, Block Containers에서의 `align-content` 지원이 있어요. |
| 47 | +HTML, `<select>` 안에 `<hr>` 지원. `<input type=checkbox switch>` 지원이 있구요. |
| 48 | +JS, `Promise.withResolvers`, `ArrayBuffer.prototype.transfer`, `Object.groupBy` 지원이 추가되었어요. |
| 49 | +그리고, iOS에서 VP8/VP9/WebM 지원, Full Screen API 지원 소식도 있어요. |
| 50 | + |
| 51 | +이 버전과 관계없지만, Apple은 EU에서는 WebKit 이외의 브라우저 엔진을 이용가능하다 발표했어요. |
| 52 | +꽤 많은 제한이 있어서, 실제 이용이 어떤지는 불명확하지만, iOS 상에서 다른 브라우저 엔진 이용가능할 수 있을 가능성이 생겼어요. |
| 53 | + |
| 54 | +- [Apple announces changes to iOS, Safari, and the App Store in the European Union - Apple](https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/) |
| 55 | + - [Using alternative browser engines in the European Union - Support - Apple Developer](https://developer.apple.com/support/alternative-browser-engines) |
| 56 | + |
| 57 | +관런된 내용으로, Mozilla가 Apple나 Google OS 플랫폼이 제한 하고 있는 내용한 웹사이트도 공개하고 있어요. |
| 58 | + |
| 59 | +- [Platform Tilt - Mozilla](https://mozilla.github.io/platform-tilt/) |
| 60 | + |
| 61 | +---- |
| 62 | + |
| 63 | +{% include inline-support.html %} |
| 64 | + |
| 65 | +---- |
| 66 | + |
| 67 | +<h1 class="site-genre">헤드라인</h1> |
| 68 | + |
| 69 | +---- |
| 70 | + |
| 71 | +## Release v2.0.0 · volarjs/volar.js |
| 72 | +[github.com/volarjs/volar.js/releases/tag/v2.0.0](https://github.com/volarjs/volar.js/releases/tag/v2.0.0 "Release v2.0.0 · volarjs/volar.js") |
| 73 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> |
| 74 | + |
| 75 | +volar v2.0.0 출시. |
| 76 | +코어를 TypeScript에 의존하지 않도록 변경, `@volar/cdn` 비권장화 |
| 77 | + |
| 78 | + |
| 79 | +---- |
| 80 | + |
| 81 | +## Firefox 122.0, See All New Features, Updates and Fixes |
| 82 | +[www.mozilla.org/en-US/firefox/122.0/releasenotes/](https://www.mozilla.org/en-US/firefox/122.0/releasenotes/ "Firefox 122.0, See All New Features, Updates and Fixes") |
| 83 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Firefox</span> <span class="jser-tag">ReleaseNote</span></p> |
| 84 | + |
| 85 | +Firefox 122 출시. |
| 86 | +`<select>` 자식 요소로 `<hr>` 허용, CSS `offset-position`과 `offset-path` 프로퍼티 기본적으로 유효화. |
| 87 | +`ArrayBuffer.prototype.transfer()` 구현, SVG `<use>`에 Data URL 이용 불가능하도록 변경. |
| 88 | +실험적 기능으로 Declarative shadow DOM, Popover API, Clipboard API, `Intl.Segmenter` 구현 |
| 89 | + |
| 90 | +- [Firefox 122 for developers - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/122 "Firefox 122 for developers - Mozilla | MDN") |
| 91 | + |
| 92 | +---- |
| 93 | + |
| 94 | +## Release v5.90.0 · webpack/webpack |
| 95 | +[github.com/webpack/webpack/releases/tag/v5.90.0](https://github.com/webpack/webpack/releases/tag/v5.90.0 "Release v5.90.0 · webpack/webpack") |
| 96 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">webpack</span> <span class="jser-tag">ReleaseNote</span></p> |
| 97 | + |
| 98 | +webpack v5.90.0 출시. |
| 99 | +`node.{__filename,__dirname}`에 `node-module` 옵션 추가, 버그 수정 |
| 100 | + |
| 101 | + |
| 102 | +---- |
| 103 | + |
| 104 | +## Deno 1.40: Temporal API |
| 105 | +[deno.com/blog/v1.40](https://deno.com/blog/v1.40 "Deno 1.40: Temporal API") |
| 106 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">ReleaseNote</span></p> |
| 107 | + |
| 108 | +Deno v1.40 출시. |
| 109 | +Temporal API 지원, `import.meta.filename`/`import.meta.dirname` 지원, `deno.json`의 `imports` 지정 방법 개선. |
| 110 | +`window`, `Deno.run()`, `Deno.serveHttp()`, `Deno.metrics()` 오래된 API 비권장화 |
| 111 | + |
| 112 | + |
| 113 | +---- |
| 114 | + |
| 115 | +## Safari 17.4 Beta Release Notes | Apple Developer Documentation |
| 116 | +[developer.apple.com/documentation/safari-release-notes/safari-17\_4-release-notes](https://developer.apple.com/documentation/safari-release-notes/safari-17_4-release-notes "Safari 17.4 Beta Release Notes | Apple Developer Documentation") |
| 117 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">safari</span> <span class="jser-tag">ReleaseNote</span></p> |
| 118 | + |
| 119 | +Safari 17.4 Beta 출시. |
| 120 | +CSS, `@scope` 지원, Block Containers에서의 `align-content` 지원. |
| 121 | +HTML, `<select>`안에서 `<hr>` 지원.`<input type=checkbox switch>` 지원. |
| 122 | +JS, `Promise.withResolvers`, `ArrayBuffer.prototype.transfer`, `Object.groupBy` 지원. |
| 123 | +iOS에서 VP8/VP9/WebM 지원, Full Screen API 지원. |
| 124 | + |
| 125 | + |
| 126 | +---- |
| 127 | + |
| 128 | +## Release v0.20.0 · evanw/esbuild |
| 129 | +[github.com/evanw/esbuild/releases/tag/v0.20.0](https://github.com/evanw/esbuild/releases/tag/v0.20.0 "Release v0.20.0 · evanw/esbuild") |
| 130 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">esbuild</span> <span class="jser-tag">ReleaseNote</span></p> |
| 131 | + |
| 132 | +esbuild v0.20.0 출시. |
| 133 | +Deno 1.40 대응, `node_modules` 가 없으므로, 파일 확장자 우선순위 변경 |
| 134 | + |
| 135 | + |
| 136 | +---- |
| 137 | + |
| 138 | +## QuickJS Javascript Engine |
| 139 | +[bellard.org/quickjs/](https://bellard.org/quickjs/ "QuickJS Javascript Engine") |
| 140 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">ReleaseNote</span></p> |
| 141 | + |
| 142 | +QuickJS ES2023 지원. |
| 143 | + |
| 144 | +- ES2022 Top-Level await |
| 145 | +- ES2023 Change Array by copy, `Array.prototype.{findLast, findLastIndex}` |
| 146 | +- ES2024 `Object.groupBy`, `Promise.withResolvers` |
| 147 | + |
| 148 | + |
| 149 | +---- |
| 150 | + |
| 151 | +## Announcing AdonisJS v6 |
| 152 | +[adonisjs.com/blog/adonisjs-v6-announcement](https://adonisjs.com/blog/adonisjs-v6-announcement "Announcing AdonisJS v6") |
| 153 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">server</span></p> |
| 154 | + |
| 155 | +AdonisJS v6 출시. |
| 156 | +ESM으로 이행, Vite integration 지원. |
| 157 | +VineJS 검증 라이브러리 작성, 테스트 프레임워크나 템플릿 엔진 등 코어를 패키지로 빼내서 이용 가능 하게끔 |
| 158 | + |
| 159 | + |
| 160 | +---- |
| 161 | +<h1 class="site-genre">슬라이드, 영상</h1> |
| 162 | + |
| 163 | +---- |
| 164 | + |
| 165 | +## Next.js App Router Caching: Explained! - YouTube |
| 166 | +[www.youtube.com/watch?v=VBlSe8tvg4U](https://www.youtube.com/watch?v=VBlSe8tvg4U "Next.js App Router Caching: Explained! - YouTube") |
| 167 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">video</span> <span class="jser-tag">JavaScript</span></p> |
| 168 | + |
| 169 | +Next.js App Router 캐시가 어떤 원리로 동작하는지에 대한 영상. |
| 170 | +Pages Router와 App Router 기본적인 캐시 동작 차이, `noCache()`/`cache()`에서 캐시 여부 제어, `revalidateTag()`로 재검증. |
| 171 | +`useOptimistic()`이나 JavaScript없을 때 동작에 대해서 |
| 172 | + |
| 173 | + |
| 174 | +---- |
| 175 | +<h1 class="site-genre">서비스, 웹사이트, 문서</h1> |
| 176 | + |
| 177 | +---- |
| 178 | + |
| 179 | +## The AHA Stack | AHA |
| 180 | +[ahastack.dev/](https://ahastack.dev/ "The AHA Stack | AHA") |
| 181 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">HTML</span> <span class="jser-tag">document</span></p> |
| 182 | + |
| 183 | +Astro x Htmx x Alpine.js AHA Stack 관련 웹사이트 |
| 184 | + |
| 185 | + |
| 186 | +---- |
| 187 | + |
| 188 | +## Platform Tilt - Mozilla |
| 189 | +[mozilla.github.io/platform-tilt/](https://mozilla.github.io/platform-tilt/ "Platform Tilt - Mozilla") |
| 190 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">browser</span> <span class="jser-tag">Mozilla</span> <span class="jser-tag">apple</span> <span class="jser-tag">google</span> <span class="jser-tag">Microsoft</span> <span class="jser-tag">document</span></p> |
| 191 | + |
| 192 | +iOS/Android/Windows 플랫폼 상에서 브라우저 제한되고 있는 기능에 대한 정리 웹사이트 |
| 193 | + |
| 194 | + |
| 195 | +---- |
| 196 | + |
| 197 | +## Introduction |
| 198 | +[bentocache.dev/docs/introduction](https://bentocache.dev/docs/introduction "Introduction") |
| 199 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p> |
| 200 | + |
| 201 | +AdonisJS 에서 나온 캐시 라이브러리. |
| 202 | +Driver로 Redis 같은 곳에서 백엔드 프로바이더 지정, Multi Tier에 의한 캐시 사이즈 다층화, Cache stampede 대책으로 구현하고 있음 |
| 203 | + |
| 204 | + |
| 205 | +---- |
| 206 | +<h1 class="site-genre">소프트웨어, 도구, 라이브러리</h1> |
| 207 | + |
| 208 | +---- |
| 209 | + |
| 210 | +## chrisguttandin/worker-timers: A replacement for setInterval() and setTimeout() which works in unfocused windows. |
| 211 | +[github.com/chrisguttandin/worker-timers](https://github.com/chrisguttandin/worker-timers "chrisguttandin/worker-timers: A replacement for setInterval() and setTimeout() which works in unfocused windows.") |
| 212 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">browser</span> <span class="jser-tag">webworker</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p> |
| 213 | + |
| 214 | +브라우저는 탭이 활성화 상태가 아닌 경우, interval와 timeout 최소값을 강제적으로 변경. |
| 215 | +Web Worker에는 제한이 없다는 것을 이용해, 제한 없이 `setTimeout`와 `setInterval` 제공하는 라이브러리 |
| 216 | + |
| 217 | + |
| 218 | +---- |
0 commit comments