MDN 아키텍처 교체, React 접근성, RSC 캐싱, Cursor SDK까지! FE 소식 한눈에!

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초로 단축했다.

React 애플리케이션에서 흔히 발생하는 접근성(Accessibility) 문제와 해결책을 제시한다. 특히, `<button>` 대신 `<div>`를 사용했을 때 키보드 포커스(Keyboard Focus) 및 Enter/Space 키 처리 부재 문제를 지적하며, `<button>` 사용을 권장한다. 폼 입력 요소와 아이콘 버튼에는 `aria-label` 속성을 사용하여 명시적인 레이블을 제공해야 한다. SPA(Single Page Application)에서 라우트 전환 시 포커스 이동, 토스트(Toast) 알림에 `role` 속성 부여 등 11가지 항목의 감사 체크리스트(Audit Checklist)를 제공하여 실질적인 접근성 개선을 돕는다.

Jack Herrington은 React Server Components(RSC)를 활용하여 부분 페이지 캐싱(Partial Page Caching) 전략을 소개한다. 페이지 전체를 캐싱하는 대신, 컴포넌트 단위로 캐싱 경계를 나누어 자주 변경되는 영역의 캐시 무효화(Cache Invalidation) 문제를 해결한다. Next.js App Router의 캐싱 동작 방식을 예시로, 정적(Static) 및 동적(Dynamic) 영역을 한 페이지 내에서 어떻게 조합하는지를 실습 중심으로 설명한다. 이를 통해 캐싱 효율(Caching Efficiency)을 극대화하고 사용자 경험을 향상시킬 수 있다.

Cursor가 TypeScript 기반 SDK를 공개 베타로 출시했다. 이 SDK는 Cursor와 동일한 런타임, 하네스, 모델을 사용하여 코딩 에이전트(Coding Agent)를 프로그래밍 방식으로 호출할 수 있도록 지원한다. 이를 통해 CI 파이프라인, 백엔드 서비스, 자체 제품에 코딩 에이전트를 임베드할 수 있다. 보안 샌드박싱(Security Sandboxing)과 상태 관리(State Management)를 포함한 클라우드 인프라 위에서 실행되며, MCP 서버, 커스텀 Agent Skills, Composer 2 등 다양한 모델을 선택할 수 있다. 이는 코딩 에이전트가 완성된 제품의 한 컴포넌트로 자리 잡는 중요한 단계임을 시사한다.