주간 다이제스트 // JS_FRAMEWORKS — 2026년 33주차
code주간 보고서

SvelteKit 3 RC, 프레임워크 계약을 재정비하다 — 33주 JavaScript

SvelteKit 3의 설정·오류 처리 개편과 TanStack Router, Angular 22, React가 비동기 수명을 분리하는 방법을 살펴봅니다.

calendar_todaysummarize2026년 33주차bolt중요 업데이트 1건
SvelteKit 3 Release Candidate가 공개됐습니다
태그: 프레임워크 업데이트읽기_시간: 5분

SvelteKit 3 Release Candidate가 공개됐습니다

SvelteKit 3가 breaking cleanup과 자동 sv migrate 경로를 포함한 Release Candidate에 들어섰으며, 변환하지 못한 부분은 명시적 TODO로 남깁니다. 설정은 vite.config.ts로 이동하고 $lib는 Node-native #lib subpath import가 되며 TypeScript는 $app/tsconfig를 확장합니다. Svelte 5와 Vite 8 요구 사항은 render error boundary, sourcemap stack trace, 단순한 service-worker import와 Rolldown build를 가능하게 합니다. 명시적 environment variable은 안정화됐지만 remote function은 여전히 실험적입니다. Stable release 전에 branch에서 RC를 시험하고 생성된 경고를 모두 검토해야 합니다.

태그: 아키텍처읽기_시간: 9분

TanStack Router navigation의 내부

TanStack Router의 loading 개편은 하나의 navigation promise가 뒤섞던 네 가지 수명을 분리합니다. Loader flight와 lease count는 공유 작업의 지속 여부를, 현재 transaction은 publish 권한을 결정합니다. Private lane은 병렬 loader 결과를 축약하고 framework receipt는 React, Solid, Vue가 publication을 실제 commit했는지 기록합니다. Redirect는 control flow이므로 이전 오류를 route branch publish 없이 억제할 수 있으며, publish 권한을 잃어도 preload나 cache에 필요한 loader를 자동 abort하지 않습니다. 이 모델은 cancellation, redirect, pending UI, SSR, cache, render acknowledgement에서 반복되던 bug를 겨냥합니다.

태그: 프레임워크 업데이트읽기_시간: 10분

Angular 22에서 service를 lazy loading하는 방법

Angular 22injectAsync를 안정화해 무거운 자동 제공 service를 별도 dynamic-import chunk에 두고 첫 사용 때 일반 DI로 resolve할 수 있게 합니다. Angular는 promise를 cache하므로 이후 호출은 추가 요청 없이 같은 instance를 재사용합니다. Service는 @Injectable({ providedIn: 'root' }) 또는 @Service()를 써야 하며 수동 scope provider는 대상이 아닙니다. onIdle이나 pointer·keyboard focus 기반 custom promise trigger로 실제 click 전에 prefetch할 수 있습니다. 예시는 시작 시 약 33 kB development chunk를 제거하지만 작거나 자주 쓰는 service에서는 latency와 async 복잡도가 절감보다 클 수 있습니다.

태그: 아키텍처읽기_시간: 17분

Next.js에서 optimistic update를 조율하기

Next.js가 Server Action을 순차 dispatch해도 다음 state가 이전 save 완료 전에 계산되면 겹치는 optimistic write가 앞선 변경을 잃을 수 있습니다. Aurora Scharff는 useActionState를 마지막 확인 state를 받는 queue로 사용하고 useOptimistic으로 같은 순수 reducer를 화면에 즉시 적용합니다. Save가 실패하면 이전 확인 state를 반환해 inverse action 없이 UI를 rollback합니다. Server Component 경계 사이의 calendar state는 server-owned event를 복제하지 않고 provider에 pending change를 저장합니다. Polling이나 realtime으로 독립적으로 바뀌는 데이터에는 client data library가 여전히 적합합니다.

summarize다이제스트_요약

SvelteKit 3가 자동 migration 명령과 프레임워크 계약 정리를 포함한 Release Candidate에 도달했습니다. 설정은 vite.config.ts로 이동하고 $lib는 Node subpath import인 #lib가 되며, TypeScript는 $app/tsconfig를 확장합니다. Svelte 5 error boundary 덕분에 render 오류도 load 오류와 같은 처리 경로에 들어가며, Vite 8과 Rolldown이 필수인 반면 remote function은 아직 실험적입니다.

TanStack Router는 navigation을 단일 promise로 모델링하면 안 되는 이유를 보여 줍니다. Loader flight와 lease는 작업의 유효성을, 현재 transaction은 publish 권한을, private lane은 loader 결과 축약을, framework receipt는 실제 commit 여부를 맡습니다. 두 프로젝트 모두 cancellation, publication, rendering, configuration이 서로를 대신하지 않도록 각 관심사에 명시적인 소유자를 둬 우발적 결합을 줄입니다.

Angular 22는 안정화된 injectAsync로 드물게 쓰이는 무거운 service에 같은 원칙을 적용합니다. Dynamic import가 별도 chunk를 만들고 Angular DI가 service를 resolve하며 idle 또는 사용자 의도 기반 prefetch가 첫 사용 지연을 가릴 수 있습니다. Next.js에서는 useActionState가 겹치는 write를 queue에 넣고 useOptimistic이 reducer 변경을 즉시 표시한 뒤 실패 시 마지막으로 확인된 server state로 되돌립니다.

핵심 요점
  • branch에서 npx sv@next migrate sveltekit-3 --tasks all --confirm을 실행한 뒤 TODO, TypeScript include, service worker 설정과 남은 실험 기능을 검토하십시오.
  • 공유 비동기 작업, publish 권한, 의미적 결과, framework commit을 별도 수명으로 모델링하십시오. 하나의 cancellation flag로 네 질문에 답할 수 없습니다.
  • injectAsync는 드물게 쓰이는 무거운 자동 제공 service에만 적용하고, queue된 optimistic 변경은 성공과 rollback이 같은 transition을 공유하도록 순수 reducer에 두십시오.