JSer.info #641 - Vite 4.3가 출시되었습니다.
Vite 4.3에서 주는 퍼포먼스 개선입니다.
속도를 40%에서 80% 정도 개선, HMR 처리 속도를 20%에서 40% 정도 개선되었습니다.
이를 어떻게 개선했는가에 대해서는 다음 글에서 해설합니다.
Deno 1.33가 출시되었습니다.
Deno 2 위한 변경이 포함되어있습니다.
unstable API으로 Deno KV 추가, deno.json 형식변경이 포함됩니다.
새로운 설정 형식은 네스트가 적어집니다.
예전 설정 형식은 Deno 2에서 지원 삭제 예정입니다.
또한, Node.js 호환성으로 crypto나 vm 대응 개선, npm pacakge 캐시 개선 등도 있습니다.
Deno.run 비권장화, Deno.serve API 변경, fs.exists가 비권장에서 제외 변경도 있습니다.
2023-04-30, Node.js 14는 EOL(End Of Life)가 되어 지원 종료했습니다.
그리고, Node.js 16는 OpenSSL LTS와 겹쳐 2023-09-11에 EOL 될 예정입니다.
이에, Node.js 18만 실질적 LTS가 됩니다.(Node.js 20는 2023년 9월 LTS 될 예정입니다）
그러므로 Node.js 14에서 Node.js 18으로 업데이트가 필요해졌습니다만, npm 메이저 업데이트 등도 포함해서 여러 변경이 있습니다.
다음 슬라이드와 글은 이 업데이트 대응을 Corepack을 사용해 Node.js와 npm 업데이트를 나눠서 하는 방법을 소개합니다.
To support JSer.info
- 😘 Recommend JSer.info to your friends!
- ❤️ Support @azu on GitHub Sponsors/JSer.info Sponsors
- 🐦 Follow @jser_info on X(Twitter)
헤드라인
Vite 4.3 is out! | Vite
vitejs.dev/blog/announcing-vite4-3.html
Vite 4.3 출시.
속도를 40%에서 80% 정도 개선, HMR 처리 시간을 20%에서 40% 정도 개선 등
Release v5.80.0 · webpack/webpack
github.com/webpack/webpack/releases/tag/v5.80.0
webpack v5.80.0 출시.
import.meta에 destructuring 지원, await에 destructuring에서의 Tree Shaking 지원.
ESM로 적힌 로더 지원, exports 필드 wild card 패턴 지원 등
Release v1.33.0 · microsoft/playwright
github.com/microsoft/playwright/releases/tag/v1.33.0
playwright v1.33.0 출시.
locator.or() 추가, locator.filter에 hasNot, hasNotText 옵션 추가, toBeAttached Assertio 추가 등
Deno 1.33: Deno 2 is coming
Deno v1.33 출시.
unstable API로 Deno KV 추가, deno.json 형식 변경, Dynamic Import와 권한 체크 변경.
Node.js 호환으로 crypto, vm 대응 개선, npm pacakge 캐시 개선 등.
Deno.run 비권장화, Deno.serve API 변경, fs.exists 비권장화에서 제거 등
읽을거리
Badging for Home Screen Web Apps | WebKit
webkit.org/blog/14112/badging-for-home-screen-web-apps/
navigator.setAppBadge API에서 뱃지 추가
alxolr | How to process a CSV file five times faster in NodeJs with Rust and Napi rs
www.alxolr.com/articles/how-to-process-a-csv-file-five-times-faster-in-node-js-with-rust-and-napi-rs
CSV 구문 처리를 Rust로 작성해서 Napi rs로 Node.js에서 이용하는 이야기
Introducing npm package provenance | The GitHub Blog
github.blog/2023-04-19-introducing-npm-package-provenance/
npm 패키지가 어떤 소스코드 커밋, 빌드 설정인지 provenance로 엮을 수 있는 --provenance 플래그 지원.
지금은 GitHub Actions 에서 publish에 의해 엮음 지원.
서플라이체인 문제가 일어났을 때 패키지에 포함된 provenance 체크해서 무결성 확인 가능
CSS update Media Query - Chrome Developers
developer.chrome.com/en/blog/css-update-media-query/
update Media Query 대해.
디바이스 화면 재생률이 fast/slow/none 판정 스타일 작성.
What's new in ECMAScript 2023 | pawelgrzybek.com
pawelgrzybek.com/whats-new-in-ecmascript-2023/
ES2023에 추가된 기능에 대해.
Array.prototpype.findLast, Hashbang 지원, WeakMap 키로 Symbol 이용 가능.
immutable 배열 조작 가능한 toReversed/toSorted/toSpliced/with추가 등
CSS Custom Properties Beyond the :root · Matthias Ott – User Experience Designer
matthiasott.com/notes/custom-properties-beyond-the-root
왜 :root에서 CSS Custom Property 정의하는가
WebContainers now run on Safari, iOS, and iPadOS
blog.stackblitz.com/posts/webcontainers-are-now-supported-on-safari/
WebContainers가 Safari 지원
Node.js v20 주요 변경점 - 딱히 지루하지 않은 블로그
shisama.hatenablog.com/entry/2023/04/24/083000
Node.js 20 변경점에 대해
A Gentle Introduction to Islands
deno.com/blog/intro-to-islands
Islands Architecture와 Deno Fresh로 구현
슬라이드, 영상
미래에도 활용할 수 있는 서드파티 스크립트 - Speaker Deck
speakerdeck.com/nichimu/korekaraxian-mozhan-erusadopateisukuriputo
서드파티 스크립트 파일 크게를 잘게 유지하기 위해서, 기능을 플러그인으로 프로젝트마다 취사선택해 빌드하는 이야기.
또한, 플러그인 사이 데이터 오고감은 Pub/Sub 이용 등
현실세계에서 타협하는 스키마 설계 - Speaker Deck
speakerdeck.com/sadnessojisan/xian-shi-shi-jie-niokerusukimashe-ji-notuo-xie
JSON Schema/Swagger/zod/GraphQL/gRPC 등에서 스키마와 검증에 대한 슬라이드.
널리 사용되는 JSON Schema 를 기반으로 한 검증을 기존 애플리케이션에 도입하는 이야기
Corepack 사용해 Node.js를 업데이트 ⬆️⬆️
azu.github.io/slide/2023/nodejs-corepack/corepack.html
Node.js 14에서 18로 업데이트할 때 npm도 많은 변경이 있으므로, Node.js 업데이트와 npm 업데이트를 Corepack을 사용해 각각하는 방법에 대한 슬라이드.
그리고 Node.js 업데이트할 때 생기는 문제를 OS, native addon, peerDependencies, Node.js 로 나눠 소개한다.
소프트웨어, 도구, 라이브러리
Playground - React JSON Form
bhch.github.io/react-json-form/playground/
django-jsonform/JSON Schema 에서 Form을 만드는 React Component
도서
프론트엔드 개발을 위한 테스트 입문 이제라도 알아두면 좋을 자동 테스트 전략 필수 지식 전자책 ｜ 쇼에이샤
www.shoeisha.co.jp/book/detail/9784798178639
프론트엔드 테스트 도서.
Jest／Testing Library／Storybook／reg-suit／Playwright 등
