JSer.info #656 - Next.js v13.4.16가 출시되었습니다.
v13.4.16에는, 실험적 기능으로 Playwright와 MSW를 사용한 테스트 기능 test mode가 추가되었습니다.
Next.js의 App Directory에는, MSW가 Next.js 처리하는 포인트가 없었기에, MSW가 동작하지 않던 문제가 있었습니다. test mode에서는 이것이 일부 해결됩니다.
아직 검증목적 실험적 기능이기에 앞으로는 모르지만, 다음 Discussion에서 Next.js를 사용한 애플리케이션 테스트에 대해 논의되고 있습니다.
다음 글에서는, Safari의 Web Storage(localStorage/Cache API/IndexedDB/Service Worker/File System) Policy 갱신에 대해 확인할 수 있습니다.
Origin 째로 / 전체의 Quota가 있으며, Quota를 벗어나면 QuotaExceededError가 발상합니다.
또한, 이용하고 있지 않은 웹사이트 데이터는 Origin 째로 삭제되는 구조이지만, Storage가 영속모드라면 제외됩니다.
Storage 영속성 보증하기 위한 Storage API의 사용방법도 설명합니다.
그리고, 이 업데이트와 관계없지만, 예전 Safari는 Private Mode라면 localStorage 등 Web Storage를 읽고 쓰기만으로도 예외가 발생했습니다만, 현재 Safari는 Private Mode에서도 예외 발생하지 않고 읽고 쓰기가 가능합니다.
Blogged Answers: My Experience Modernizing Packages to ESM · Mark's Dev Blog에서는, Redux를 ESM으로 이행할 때 발생한 문제에 대해 상세히 설명되어 있습니다.
넓리 사용되고 있는 여러 환경이나 bundler에서의 이용 대응하는 패키지의 난해함에 대해 언급됩니다.
To support JSer.info
- 😘 Recommend JSer.info to your friends!
- ❤️ Support @azu on GitHub Sponsors/JSer.info Sponsors
- 🐦 Follow @jser_info on X(Twitter)
헤드라인
Google Online Security Blog: An update on Chrome Security updates – shipping security fixes to you faster
security.googleblog.com/2023/08/an-update-on-chrome-security-updates.html
Chrome 116부터, 2주 마다 진행한 보안 출시가 1주로 변경됩니다.
Release v1.37.0 · microsoft/playwright
github.com/microsoft/playwright/releases/tag/v1.37.0
playwright v1.37.0 출시.
--shard 플러그로 분할실행 결과 레포트를 결합하는 merge-reports 명령어 추가
Release v1.3.0 · vega/ts-json-schema-generator
github.com/vega/ts-json-schema-generator/releases/tag/v1.3.0
ts-json-schema-generator v1.3.0 출시.
satisfies 연산자 지원, TypeScript 5으로 업데이트, Bun 지원
Electron 26.0.0 | Electron
www.electronjs.org/blog/electron-26-0
Electron 26 출시.
Chromium 116, V8 11.2, Node.js 18.16.1으로 업데이트.
Release v13.4.16 · vercel/next.js
github.com/vercel/next.js/releases/tag/v13.4.16
Next.js v13.4.16 출시.
실험적기능으로 playwright와 msw 사용하는 test mode 추가
읽을거리
Updates to Storage Policy | WebKit
webkit.org/blog/14403/updates-to-storage-policy/
Safari의 Web Storage Policy 관해.
Origin 째로 / 전체 Quota가 있으며, Quota를 벗어나면 QuotaExceededError 발생.
이용하지 않는 웹사이트 데이터는 Origin 째로 삭제. Storage 영속성 보증하기 위한 Storage API 사용방법
Blogged Answers: My Experience Modernizing Packages to ESM · Mark's Dev Blog
blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/
여러 환경에서 동작하는 JavaScript 패키지 공개의 난해함에 대한 글.
CJS와 ESM의 dual package, TypeScript의 moduleResolution 호환성, UMD, webpack 4과 호환성
Next.js와 React Server Component 문제에 관하여.
Module documentation (in progress)
gist.github.com/andrewbranch/79f872a8b9f0507c9c5f2641cfb3efa6
TypeScript가 모듈 어떻게 접근하고 다루고 있는가에 대한 가이드.
moduleResolution 옵션, TypeScript의 모듈 문제 해결 구조, ESM와 CJS 호환운용성에 관하여
Creating a recorder with Document Picture-in-Picture API | Contrast
Document Picture-in-Picture API 사용해, 카메라 표시와 화면을 합성하고 녹화하는 방법에 관하여
A Blog Post With Every HTML Element
www.patrickweaver.net/blog/a-blog-post-with-every-html-element/
모든 HTML 요소가 들어가 있는 블로그 글.
각 태그에 대한 해설도 포함
Deprecating the unload event - Chrome Developers
developer.chrome.com/en/blog/deprecating-unload/
Chrome 117에서 unload 이벤트가 Deprecated.
unload 이벤트는 제대로 동작하지 않은 경우가 많았으며 BFCache를 무효화함.
대체품으로 visibilitychange/pagehide 이벤트 추천. unload 이벤트를 이용하고 있는가를 확인하는 방법에 관하여
What's New in DevTools (Chrome 117) - Chrome Developers
developer.chrome.com/en/blog/new-in-devtools-117/
Chrome 117 개발자 도구 변경점에 관하여.
Network에서 컨텐츠 오버라이드 개선, 확장기능의 URL 필터하는 기능 추가, Fetch가 실제 Priority를 확인하도록.
서드파티 쿠기 관련한 경고나 문제 설명 추가, prerender 디버그 기능 추가
슬라이드, 영상
React - Speaker Deck
speakerdeck.com/recruitengineers/react
React의 사고방법에 대한 슬라이드.
MPA/SPA 차이와 과제, 선언적UI에서 React, 컴포넌트, 상태관리, 렌더링, 부작용에 관하여
웹사이트, 서비스, 문서
Using TypeScript – React
TypeScrip 관련한 React 공식 문서
