MDN 아키텍처 교체, React 접근성, RSC 캐싱, Cursor SDK까지! FE 소식 한눈에!
by DD
2개월 전
조회수 36
MDN이 React 기반 아키텍처를 Web Components와 Lit 기반으로 교체하며 페이지 로딩 속도 개선을 달성함
React 접근성(Accessibility) 관련 문제점과 해결책을 제시하며, 11가지 감사 체크리스트를 제공함
React Server Components(RSC)를 활용한 부분 페이지 캐싱 전략을 소개하며, 캐싱 효율성(Caching Efficiency)을 높임
Cursor TypeScript SDK가 공개 베타 출시되어, 코딩 에이전트(Coding Agent)를 프로그래밍 방식으로 활용 가능
MDN 아키텍처 교체: React에서 Web Components로
MDN은 기존 React 기반 Yari 아키텍처를 Web Components와 Lit 기반의 새로운 아키텍처(fred)로 전면 교체했다. Declarative Shadow DOM(Declarative Shadow DOM)을 활용하여 레이아웃 시프트(Layout Shift) 없이 SSR(Server-Side Rendering) 결과를 그대로 받도록 개선했다. 또한, 페이지 내 태그를 동적으로 감지하여 해당 컴포넌트의 JS와 CSS만 lazy-load하는 방식을 적용하여 초기 로딩 속도(Initial Loading Speed)를 향상시켰다. 빌드 도구 또한 Rspack으로 변경하여 시작 시간을 2초로 단축했다.
