|
| 1 | +--- |
| 2 | +title: "2023-10-25: Node, js 21(Current) 와 Node, js 20, 9, 0(LTS), Yarn 4, tsc --isolatedDeclarations" |
| 3 | +author: "azu" |
| 4 | +translator: rewrite0w0 |
| 5 | +layout: post |
| 6 | +date : 2023-10-25T13:46:33, 689Z |
| 7 | +category: JSer |
| 8 | +tags: |
| 9 | +- Tools |
| 10 | +- nodejs |
| 11 | +- rspack |
| 12 | +- Vue |
| 13 | +- React |
| 14 | + |
| 15 | +--- |
| 16 | + |
| 17 | +JSer, info #666 - Node, js 21 출시되었습니다. |
| 18 | + |
| 19 | +- [Node.js 21 is now available! | Node.js](https://nodejs.org/en/blog/announcements/v21-release-announce) |
| 20 | + |
| 21 | +홀수 버전은 개발 버전이므로 LTS가 없습니다. |
| 22 | +Node.js 21에서는 Fetch/WebStreams API의 Stable, V8 11.8으로 업데이트, `node --test`으로 glob 지원 추가가 있습니다.. |
| 23 | +모듈 기본값을 ESM으로 하는 `--experimental-default-type`, Magic Bytes로 Wasm 판단하는 `--experimental-wasm-modules` 추가도 있습니다. |
| 24 | +이 플러그에 관해서는 다음 글에서 해설했습니다. |
| 25 | + |
| 26 | +- [Deep Dive: Node.js에서 기본값 ESM으로 가는 길 - JSer.info](https://jser.info/ko/2023/10/18/node.js-roadmap-esm-by-default/) |
| 27 | + |
| 28 | +`fs.writeFile`에 `flush` 옵션 추가, Streams과 HTTP 성능 개선, `navigator` 글로벌 객체 지원 추가되었습니다.. |
| 29 | + |
| 30 | +--- |
| 31 | + |
| 32 | +Node.js v20.9.0 출시되었습니다. |
| 33 | + |
| 34 | +- [Node v20.9.0 (LTS) | Node.js](https://nodejs.org/en/blog/release/v20.9.0) |
| 35 | + |
| 36 | +Node.js v20.9.0는, Node.js 20.x LTS가 시작하는 버전입니다. |
| 37 | +Node.js 20.x LTS는, 2026-04-30까지 예정되어있습니다. |
| 38 | + |
| 39 | +- [nodejs/Release: Node.js Release Working Group](https://github.com/nodejs/release) |
| 40 | + |
| 41 | +--- |
| 42 | + |
| 43 | +패키지 매니저 Yarn 4.0 출시되었습니다. |
| 44 | + |
| 45 | +- [Release: Yarn 4.0 🪄⚗️ | Yarn](https://yarnpkg.com/blog/release/4.0) |
| 46 | + |
| 47 | +Node.js 12/14/16 지원 종료, `yarn set version`은 `packageManager` 필드를 갱신하도록 변경됩니다. |
| 48 | +lockfile과 레지스트리 메타 데이터가 일치하는가 판단하는 Hardened Mode 추가, constraints engine를 JS 기반으로 바꿨습니다. |
| 49 | +또한 Yarn 2/3에서는 플러그인이었던 `yarn upgrade-interactive`와 `yarn stage`를 코어에 포함했으며, 성능 개선도 있습니다. |
| 50 | + |
| 51 | + |
| 52 | +---- |
| 53 | + |
| 54 | +{% include inline-support.html %} |
| 55 | + |
| 56 | +---- |
| 57 | + |
| 58 | +<h1 class="site-genre">헤드라인</h1> |
| 59 | + |
| 60 | +---- |
| 61 | + |
| 62 | +## Release v0.3.7 · web-infra-dev/rspack |
| 63 | +[github.com/web-infra-dev/rspack/releases/tag/v0.3.7](https://github.com/web-infra-dev/rspack/releases/tag/v0.3.7 "Release v0.3.7 · web-infra-dev/rspack") |
| 64 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">rspack</span> <span class="jser-tag">ReleaseNote</span></p> |
| 65 | + |
| 66 | +rspack v0.3.7 출시. |
| 67 | +`experiments.rspackFuture.newResolver`으로 새 Resolver를 Opt-in 가능하도록. |
| 68 | +styled-components 지원, Vue 2에서 CSS 추출 지원 |
| 69 | + |
| 70 | + |
| 71 | +---- |
| 72 | + |
| 73 | +## Rspress, the Rspack-based static site generator · web-infra-dev · Discussion #5 |
| 74 | +[github.com/orgs/web-infra-dev/discussions/5](https://github.com/orgs/web-infra-dev/discussions/5 "Rspress, the Rspack-based static site generator · web-infra-dev · Discussion #5") |
| 75 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Rust</span> <span class="jser-tag">document</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p> |
| 76 | + |
| 77 | +Rspack 기반 Docusarusu/VitePress 같은 정적 사이트 생성기 Rspress 1.0.0 출시. |
| 78 | + |
| 79 | + |
| 80 | +---- |
| 81 | + |
| 82 | +## Release v3.8.0 · nuxt/nuxt |
| 83 | +[github.com/nuxt/nuxt/releases/tag/v3.8.0](https://github.com/nuxt/nuxt/releases/tag/v3.8.0 "Release v3.8.0 · nuxt/nuxt") |
| 84 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> |
| 85 | + |
| 86 | +Nuxt.js v3.8.0 출시. |
| 87 | +Nuxt DevTools 1.0, `@nuxt/image` 자동 설치, 애플리케이션 구성을 정의한 메타파일 대응, NuxtLink 기본 동작 설정 가능하도록. |
| 88 | +`useAsyncData`와 `useFetch`에 `deep` 옵션 추가, `getCachedData`으로 커스텀 캐시 지원 |
| 89 | + |
| 90 | +- [Release v1.0.0 · nuxt/devtools](https://github.com/nuxt/devtools/releases/tag/v1.0.0 "Release v1.0.0 · nuxt/devtools") |
| 91 | + |
| 92 | +---- |
| 93 | + |
| 94 | +## Storybook 7.5 |
| 95 | +[storybook.js.org/blog/storybook-7-5/](https://storybook.js.org/blog/storybook-7-5/ "Storybook 7.5") |
| 96 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Design</span> <span class="jser-tag">Development</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p> |
| 97 | + |
| 98 | +Storybook 7.5 출시. |
| 99 | +Vite 5 지원, `storiesOf` 비권장화. |
| 100 | +Next.js와 Angular 지원 개선, Lit 3.0 지원 |
| 101 | + |
| 102 | + |
| 103 | +---- |
| 104 | + |
| 105 | +## Announcing TanStack Query v5 | TanStack Blog |
| 106 | +[tanstack.com/blog/announcing-tanstack-query-v5](https://tanstack.com/blog/announcing-tanstack-query-v5 "Announcing TanStack Query v5 | TanStack Blog") |
| 107 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">Vue</span> <span class="jser-tag">Solid</span> <span class="jser-tag">Svelte</span> <span class="jser-tag">HTTP</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> |
| 108 | + |
| 109 | +TanStack Query v5 출시. |
| 110 | +API 인수 형식 변경, Suspense 지원, 개발자 도구 개량. |
| 111 | + |
| 112 | +- [Announcing TanStack Query v5 | TanStack Blog](https://tanstack.com/blog/announcing-tanstack-query-v5 "Announcing TanStack Query v5 | TanStack Blog") |
| 113 | +- [Migrating to TanStack Query v5 | TanStack Query Docs](https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5 "Migrating to TanStack Query v5 | TanStack Query Docs") |
| 114 | + |
| 115 | +---- |
| 116 | + |
| 117 | +## Release: Yarn 4.0 🪄⚗️ | Yarn |
| 118 | +[yarnpkg.com/blog/release/4.0](https://yarnpkg.com/blog/release/4.0 "Release: Yarn 4.0 🪄⚗️ | Yarn") |
| 119 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">yarn</span> <span class="jser-tag">ReleaseNote</span></p> |
| 120 | + |
| 121 | +Yarn 4.0 출시. |
| 122 | +Node.js 12/14/16 지원 종료, `yarn set version`는 `packageManager` 필드 갱신 가능하도록. |
| 123 | +lockfile과 레지스트리 메타 데이터 일치 확인하는 Hardened Mode 추가, constraints engine를 JS 기반으로 변경. |
| 124 | +`yarn upgrade-interactive`와 `yarn stage`를 코어에 포함, 성능 개선 |
| 125 | + |
| 126 | + |
| 127 | +---- |
| 128 | + |
| 129 | +## Release v0.3.8 · web-infra-dev/rspack |
| 130 | +[github.com/web-infra-dev/rspack/releases/tag/v0.3.8](https://github.com/web-infra-dev/rspack/releases/tag/v0.3.8 "Release v0.3.8 · web-infra-dev/rspack") |
| 131 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">rspack</span> <span class="jser-tag">ReleaseNote</span></p> |
| 132 | + |
| 133 | +rspack v0.3.8 출시. |
| 134 | +Top-Level `await` 지원 |
| 135 | + |
| 136 | + |
| 137 | +---- |
| 138 | + |
| 139 | +## Node v20.9.0 (LTS) | Node.js |
| 140 | +[nodejs.org/en/blog/release/v20.9.0](https://nodejs.org/en/blog/release/v20.9.0 "Node v20.9.0 (LTS) | Node.js") |
| 141 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p> |
| 142 | + |
| 143 | +Node.js v20.9.0 출시. |
| 144 | +Node.js 20.x LTS이 되는 버전. |
| 145 | +2026년 4월까지 유지보수 예정. |
| 146 | + |
| 147 | + |
| 148 | +---- |
| 149 | + |
| 150 | +## Node.js 21 is now available! | Node.js |
| 151 | +[nodejs.org/en/blog/announcements/v21-release-announce](https://nodejs.org/en/blog/announcements/v21-release-announce "Node.js 21 is now available! | Node.js") |
| 152 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p> |
| 153 | + |
| 154 | +Node.js v21 출시. |
| 155 | +current(개발판) 메이저 버전. |
| 156 | +Fetch/WebStreams API의 Stable화, V8 11.8으로 업데이트, `node --test`에서 glob 지원. |
| 157 | +모듈 기본값을 ESM으로 해주는 `--experimental-default-type`, Magic Bytes에서 Wasm 판단하는 `--experimental-wasm-modules` 추가. |
| 158 | +`fs.writeFile`에 `flush` 옵션 추가, Streams와 HTTP 성능 개선, `navigator` 글로벌 객체 지원 |
| 159 | + |
| 160 | +- [Node v21.0.0 (Current) | Node.js](https://nodejs.org/en/blog/release/v21.0.0 "Node v21.0.0 (Current) | Node.js") |
| 161 | + |
| 162 | +---- |
| 163 | +<h1 class="site-genre">읽을거리</h1> |
| 164 | + |
| 165 | +---- |
| 166 | + |
| 167 | +## The State of WebAssembly 2023 |
| 168 | +[blog.scottlogic.com/2023/10/18/the-state-of-webassembly-2023.html](https://blog.scottlogic.com/2023/10/18/the-state-of-webassembly-2023.html "The State of WebAssembly 2023") |
| 169 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebAssembly</span> <span class="jser-tag">Survey</span></p> |
| 170 | + |
| 171 | +WebAssembly 개발자 앙케이트 결과 |
| 172 | + |
| 173 | + |
| 174 | +---- |
| 175 | + |
| 176 | +## Goodbye, Node.js Buffer — Sindre Sorhus |
| 177 | +[sindresorhus.com/blog/goodbye-nodejs-buffer](https://sindresorhus.com/blog/goodbye-nodejs-buffer "Goodbye, Node.js Buffer — Sindre Sorhus") |
| 178 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">opinion</span> <span class="jser-tag">article</span></p> |
| 179 | + |
| 180 | +Node.js `Buffer`는 브라우저 호환성이 없기에, `Uint8Array` 대신 사용하자는 이야기. |
| 181 | +현재 `Buffer`는 `Uint8Array` 서브클래스로 구현되어 있지만, `slice()` 동작 차이나 이식성이 나쁜 문제가 있음. |
| 182 | +`Uint8Array` 직접 다루는 방법이나 마이그레이션 관련하여 |
| 183 | + |
| 184 | +- [Start moving to Uint8Array in new APIs? · Issue #41588 · nodejs/node](https://github.com/nodejs/node/issues/41588 "Start moving to Uint8Array in new APIs? · Issue #41588 · nodejs/node") |
| 185 | + |
| 186 | +---- |
| 187 | + |
| 188 | +## JS Decorators Explained: 10 Years Journey to the Real Implementation | Binary Studio |
| 189 | +[binary-studio.com/blog/ecmascript-decorators/](https://binary-studio.com/blog/ecmascript-decorators/ "JS Decorators Explained: 10 Years Journey to the Real Implementation | Binary Studio") |
| 190 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">ECMAScript</span> <span class="jser-tag">article</span> <span class="jser-tag">history</span></p> |
| 191 | + |
| 192 | +현재 Stage 3의 Decorator이 어떻게 지금의 형태에 이르렀는가에 대해 |
| 193 | + |
| 194 | + |
| 195 | +---- |
| 196 | +<h1 class="site-genre">슬라이드, 영상</h1> |
| 197 | + |
| 198 | +---- |
| 199 | + |
| 200 | +## Faster TypeScript builds with --isolatedDeclarations by Titian-Cornel Cernicova-Dragomir - GitNation |
| 201 | +[portal.gitnation.org/contents/faster-typescript-builds-with-isolateddeclarations](https://portal.gitnation.org/contents/faster-typescript-builds-with-isolateddeclarations "Faster TypeScript builds with --isolatedDeclarations by Titian-Cornel Cernicova-Dragomir - GitNation") |
| 202 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">video</span> <span class="jser-tag">performance</span></p> |
| 203 | + |
| 204 | +TypeScript 자료형 정의 파일 출력을 파일째로 하는 `--isolatedDeclarations` 옵션을 구현하고 있다는 이야기. |
| 205 | +현재 TypeScript 자료형 생성은 의존 그래프나 추론된 타입에 의존하고 있음. |
| 206 | +어느 정도 제한은 있다만 파일 째로 독립된 자료형 정의 생성함으로, 다른 도구도 자료형 정의 생성이 가능해지며, 또 파일 째로 병렬 처리 가능해지므로 성능이 향상된다는 의견. |
| 207 | + |
| 208 | +- [Isolated declarations by dragomirtitian · Pull Request #53463 · microsoft/TypeScript](https://github.com/microsoft/TypeScript/pull/53463 "Isolated declarations by dragomirtitian · Pull Request #53463 · microsoft/TypeScript") |
| 209 | +- [\`--isolatedDeclarations\` for standalone DTS emit · Issue #47947 · microsoft/TypeScript](https://github.com/microsoft/TypeScript/issues/47947 "\`--isolatedDeclarations\` for standalone DTS emit · Issue #47947 · microsoft/TypeScript") |
| 210 | + |
| 211 | +---- |
| 212 | + |
| 213 | +## BlinkOn 18 - Sunnyvale + Virtual - YouTube |
| 214 | +[www.youtube.com/playlist?list=PL9ioqAuyl6UKYm7EYVa7FcKCR2kDCudII](https://www.youtube.com/playlist?list=PL9ioqAuyl6UKYm7EYVa7FcKCR2kDCudII "BlinkOn 18 - Sunnyvale + Virtual - YouTube") |
| 215 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">blink</span> <span class="jser-tag">Chrome</span> <span class="jser-tag">video</span> <span class="jser-tag">Conference</span></p> |
| 216 | + |
| 217 | +BlinkOn 18 영상 정리 |
| 218 | + |
| 219 | + |
| 220 | +---- |
| 221 | +<h1 class="site-genre">소프트웨어, 도구, 라이브러리</h1> |
| 222 | + |
| 223 | +---- |
| 224 | + |
| 225 | +## AlexSergey/rockpack: Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting, testing within 5 minutes |
| 226 | +[github.com/AlexSergey/rockpack](https://github.com/AlexSergey/rockpack "AlexSergey/rockpack: Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting, testing within 5 minutes") |
| 227 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">Tools</span> <span class="jser-tag">library</span> <span class="jser-tag">TypeScript</span></p> |
| 228 | + |
| 229 | +Create React App 같은 React 애플리케이션 개발 툴킷 |
| 230 | + |
| 231 | + |
| 232 | +---- |
0 commit comments