|
| 1 | +--- |
| 2 | +title: "2024-07-01: ES2024, Playwright v1.45.0, e18e(Ecosystem Performance)" |
| 3 | +author: "azu" |
| 4 | +translator: rewrite0w0 |
| 5 | +layout: post |
| 6 | +date: 2024-07-01T13:22:00.731Z |
| 7 | +category: JSer |
| 8 | +tags: |
| 9 | +- ECMAScript |
| 10 | +- React |
| 11 | +- npm |
| 12 | +- nodejs |
| 13 | +- TypeScript |
| 14 | + |
| 15 | +--- |
| 16 | + |
| 17 | +JSer.info #698 - ECMAScript 2024가 정식으로 출시되었어요. |
| 18 | + |
| 19 | +- [Release ES2024 Candidate February 28th 2024 · tc39/ecma262](https://github.com/tc39/ecma262/releases/tag/es2024-candidate-2024-02-28) |
| 20 | + |
| 21 | +ES2024는, `Object.groupBy`/`Map.groupBy`, `Promise.withResolvers`, `ArrayBuffers.prototype.resize`, `Atomics.waitAsync`가 추가되었어요. |
| 22 | +상세한 내용은 다음 글에서 확인가능해요. |
| 23 | + |
| 24 | +- [Ecma International approves ECMAScript 2024: What’s new?](https://2ality.com/2024/06/ecmascript-2024.html) |
| 25 | + |
| 26 | +--- |
| 27 | + |
| 28 | +Playwright v1.45.0가 출시되었어요. |
| 29 | + |
| 30 | +- [Release v1.45.0 · microsoft/playwright](https://github.com/microsoft/playwright/releases/tag/v1.45.0) |
| 31 | + |
| 32 | +시간을 조작할 수 있는 Clock API 추가, `--fail-on-flaky-tests` 플래그 추가, `testConfig. respectGitIgnore` 추가가 있어요. |
| 33 | + |
| 34 | +--- |
| 35 | + |
| 36 | +프로제긑 e18e (Ecosystem Performance)가 시작되었어요. |
| 37 | + |
| 38 | +- [e18e/e18e](https://github.com/e18e/e18e) |
| 39 | + |
| 40 | +e18e는, JavaScript 에코시스템의 성능 향상을 위한 프로젝트에요. |
| 41 | + |
| 42 | +현재는, JavaScript 패키지에 관련한 가이드라인이 정리되어 있어요. |
| 43 | +의존을 최신화하는 cleanup, 불필요한 의존을 줄이는 speedup, 채에 방법을 제공하는 levelup 같은 항목의 가이드가 작성되어 있어요. |
| 44 | + |
| 45 | +---- |
| 46 | + |
| 47 | +{% include inline-support.html %} |
| 48 | + |
| 49 | +---- |
| 50 | + |
| 51 | +<h1 class="site-genre">헤드라인</h1> |
| 52 | + |
| 53 | +---- |
| 54 | + |
| 55 | +## Node.js — Node v20.15.0 (LTS) |
| 56 | +[nodejs.org/en/blog/release/v20.15.0](https://nodejs.org/en/blog/release/v20.15.0 "Node.js — Node v20.15.0 (LTS)") |
| 57 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p> |
| 58 | + |
| 59 | +Node.js v20.15.0 출시. |
| 60 | +`node:test`가 `plan`메서드 지원, `--inspect-wait` 플래그 추가, `zlib.crc32()` 추가, `--disable-wasm-trap-handler` 플래그 추가 |
| 61 | + |
| 62 | + |
| 63 | +---- |
| 64 | + |
| 65 | +## Release ES2024 Candidate February 28th 2024 · tc39/ecma262 |
| 66 | +[github.com/tc39/ecma262/releases/tag/es2024-candidate-2024-02-28](https://github.com/tc39/ecma262/releases/tag/es2024-candidate-2024-02-28 "Release ES2024 Candidate February 28th 2024 · tc39/ecma262") |
| 67 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">news</span></p> |
| 68 | + |
| 69 | +ECMAScript 2024가 Ecma GA 승인을 받고 정식으로 출시. |
| 70 | + |
| 71 | +- [Ecma International approves ECMAScript 2024: What’s new?](https://2ality.com/2024/06/ecmascript-2024.html "Ecma International approves ECMAScript 2024: What’s new?") |
| 72 | + |
| 73 | +---- |
| 74 | + |
| 75 | +## Announcing Rspack v1.0 Alpha - Rspack |
| 76 | +[www.rspack.dev/blog/announcing-1-0-alpha](https://www.rspack.dev/blog/announcing-1-0-alpha "Announcing Rspack v1.0 Alpha - Rspack") |
| 77 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">rspack</span> <span class="jser-tag">ReleaseNote</span></p> |
| 78 | + |
| 79 | +Rspack 1.0 Aplha 출시 |
| 80 | +`optimization.concatenateModule` 유효화, Lightning CSS 빌트인 지원. |
| 81 | +옵션 일부 변경 |
| 82 | + |
| 83 | + |
| 84 | +---- |
| 85 | + |
| 86 | +## Release Version 17.0.0 Release Notes · facebook/relay |
| 87 | +[github.com/facebook/relay/releases/tag/v17.0.0](https://github.com/facebook/relay/releases/tag/v17.0.0 "Release Version 17.0.0 Release Notes · facebook/relay") |
| 88 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">GraphQL</span> <span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> |
| 89 | + |
| 90 | +Relay v17.0.0 출시. |
| 91 | +Schema Validation 추가, explicit error handling와 semantic nullability 실험적인 추가 |
| 92 | + |
| 93 | + |
| 94 | +---- |
| 95 | + |
| 96 | +## Release v1.45.0 · microsoft/playwright |
| 97 | +[github.com/microsoft/playwright/releases/tag/v1.45.0](https://github.com/microsoft/playwright/releases/tag/v1.45.0 "Release v1.45.0 · microsoft/playwright") |
| 98 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">playwright</span> <span class="jser-tag">ReleaseNote</span></p> |
| 99 | + |
| 100 | +playwright v1.45.0 출시. |
| 101 | +시간을 조작할 수 있는 Clock API 추가, `--fail-on-flaky-tests` 플래그 추가, `testConfig. respectGitIgnore` 추가 |
| 102 | + |
| 103 | + |
| 104 | +---- |
| 105 | + |
| 106 | +## Introducing React-Admin V5 |
| 107 | +[marmelab.com/blog/2024/06/20/react-admin-v5.html](https://marmelab.com/blog/2024/06/20/react-admin-v5.html "Introducing React-Admin V5") |
| 108 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> |
| 109 | + |
| 110 | +React-admin v5 출시 |
| 111 | + |
| 112 | +- [Release 5.0.0 · marmelab/react-admin](https://github.com/marmelab/react-admin/releases/tag/v5.0.0 "Release 5.0.0 · marmelab/react-admin") |
| 113 | + |
| 114 | +---- |
| 115 | + |
| 116 | +## Polyfill supply chain attack hits 100K+ sites |
| 117 | +[sansec.io/research/polyfill-supply-chain-attack](https://sansec.io/research/polyfill-supply-chain-attack "Polyfill supply chain attack hits 100K+ sites") |
| 118 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">polyfill</span> <span class="jser-tag">security</span> <span class="jser-tag">news</span></p> |
| 119 | + |
| 120 | +`polyfill.io`에서 얻은 코드에 멀웨어같은 백도어가 포함되어 있다는 이야기. |
| 121 | + |
| 122 | + |
| 123 | +---- |
| 124 | +<h1 class="site-genre">읽을거리</h1> |
| 125 | + |
| 126 | +---- |
| 127 | + |
| 128 | +## New JavaScript Set methods | MDN Blog |
| 129 | +[developer.mozilla.org/en-US/blog/javascript-set-methods/](https://developer.mozilla.org/en-US/blog/javascript-set-methods/ "New JavaScript Set methods | MDN Blog") |
| 130 | +<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></p> |
| 131 | + |
| 132 | +ES2025에 입성할 Set Methods에 대하여. |
| 133 | +Firefox 127에 구현되어 있음 |
| 134 | + |
| 135 | + |
| 136 | +---- |
| 137 | + |
| 138 | +## TypeScript v4.9에서 v5.5까지 추가된 기능 복습하기 - STORES Product Blog |
| 139 | +[product.st.inc/entry/2024/06/24/152109](https://product.st.inc/entry/2024/06/24/152109 "TypeScript v4.9에서 v5.5까지 추가된 기능 복습하기 - STORES Product Blog") |
| 140 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">article</span></p> |
| 141 | + |
| 142 | +최신 TypeScript에 추가된 구문이나 자료형 추론 기능에 대하여 |
| 143 | + |
| 144 | + |
| 145 | +---- |
| 146 | + |
| 147 | +## Ecma International approves ECMAScript 2024: What’s new? |
| 148 | +[2ality.com/2024/06/ecmascript-2024.html](https://2ality.com/2024/06/ecmascript-2024.html "Ecma International approves ECMAScript 2024: What’s new?") |
| 149 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">article</span></p> |
| 150 | + |
| 151 | +ES2024에 추가된 기능이나 구문에 대한 정리 |
| 152 | +`Object.groupBy`/`Map.groupBy`, `Promise.withResolvers`, `ArrayBuffers.prototype.resize`, `Atomics.waitAsync` |
| 153 | + |
| 154 | + |
| 155 | +---- |
| 156 | + |
| 157 | +## Bun 비호환하는 확장 API - moriken's project |
| 158 | +[scrapbox.io/petamoriken/Bun\_%E3%81%AE%E9%9D%9E%E4%BA%92%E6%8F%9B%E3%81%AA%E6%8B%A1%E5%BC%B5\_API](https://scrapbox.io/petamoriken/Bun_%E3%81%AE%E9%9D%9E%E4%BA%92%E6%8F%9B%E3%81%AA%E6%8B%A1%E5%BC%B5_API "Bun 비호환하는 확장 API - moriken's project") |
| 159 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Bun</span> <span class="jser-tag">article</span></p> |
| 160 | + |
| 161 | +Bun 비표준 확장 API에 대하여 |
| 162 | + |
| 163 | + |
| 164 | +---- |
| 165 | + |
| 166 | +## Migrating to Next.js App Router with zero downtime — WorkOS |
| 167 | +[workos.com/blog/migrating-to-next-js-app-router-with-zero-downtime](https://workos.com/blog/migrating-to-next-js-app-router-with-zero-downtime "Migrating to Next.js App Router with zero downtime — WorkOS") |
| 168 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">article</span></p> |
| 169 | + |
| 170 | +Next.js, Pages Router에서 App Router으로 단계적 이행 방법에 대하여. |
| 171 | + |
| 172 | +1. Next.js 업데이트 |
| 173 | +2. `useRouter` 이행 |
| 174 | +3. 일시적인 `/app/new` 작성 |
| 175 | +4. `rewrites` 사용해 쿼리 리다이렉트 |
| 176 | +5. `/pages` 삭제 |
| 177 | + |
| 178 | +순서로 이행하는 방법에 대하여 |
| 179 | + |
| 180 | + |
| 181 | +---- |
| 182 | + |
| 183 | +## React 19 and Suspense - A Drama in 3 Acts | TkDodo's blog |
| 184 | +[tkdodo.eu/blog/react-19-and-suspense-a-drama-in-3-acts](https://tkdodo.eu/blog/react-19-and-suspense-a-drama-in-3-acts "React 19 and Suspense - A Drama in 3 Acts | TkDodo's blog") |
| 185 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">article</span></p> |
| 186 | + |
| 187 | +React 19 RC의 Suspense 내부 동작 변경에 대하여. |
| 188 | +fetch-on-render와 render-as-your-fetch 패턴, Fetch 이 외 비동기처리, React 19에서 수정 예정에 관련하여 |
| 189 | + |
| 190 | + |
| 191 | +---- |
| 192 | + |
| 193 | +## Inline conditionals in CSS, now? • Lea Verou |
| 194 | +[lea.verou.me/blog/2024/css-conditionals-now/](https://lea.verou.me/blog/2024/css-conditionals-now/ "Inline conditionals in CSS, now? • Lea Verou") |
| 195 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p> |
| 196 | + |
| 197 | +CSS에서 if문 표현하는 기술에 대하여. |
| 198 | +Binary Linear Interpolation, Toggles, Paused animations, Type Grinding, Variable animation name |
| 199 | + |
| 200 | + |
| 201 | +---- |
| 202 | +<h1 class="site-genre">웹사이트, 서비스, 문서</h1> |
| 203 | + |
| 204 | +---- |
| 205 | + |
| 206 | +## e18e/e18e |
| 207 | +[github.com/e18e/e18e](https://github.com/e18e/e18e "e18e/e18e") |
| 208 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">npm</span> <span class="jser-tag">performance</span> <span class="jser-tag">document</span></p> |
| 209 | + |
| 210 | +JavaScript 패키지 관련 가이드라인. |
| 211 | +의존 최신화 위한 cleanup, 불필요한 의존을 줄이는 speedup, 대체 방법을 제공하는 levelup 각 항목의 가이드 |
| 212 | + |
| 213 | + |
| 214 | +---- |
| 215 | +<h1 class="site-genre">소프트웨어, 도구, 라이브러리</h1> |
| 216 | + |
| 217 | +---- |
| 218 | + |
| 219 | +## es-tooling/eslint-plugin-depend: An ESLint plugin for suggesting optimisations in choice of dependency, native equivalents, etc. |
| 220 | +[github.com/es-tooling/eslint-plugin-depend](https://github.com/es-tooling/eslint-plugin-depend "es-tooling/eslint-plugin-depend: An ESLint plugin for suggesting optimisations in choice of dependency, native equivalents, etc.") |
| 221 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">plugin</span> <span class="jser-tag">npm</span></p> |
| 222 | + |
| 223 | +네이티브에서 이용가능한 불필요한 의존이나 관리되지 않는 패키지를 검출하는 ESLint 룰 |
| 224 | + |
| 225 | + |
| 226 | +---- |
0 commit comments