주요소식
Going under the hood of MDN's new front-end
MDN이 React 기반 Yari 아키텍처를 Web Components와 Lit 기반의 새 아키텍처(fred)로 전면 교체한 과정을 기술적으로 풀어낸 글이다. 페이지에 등장하는 <mdn-*> 태그를 동적으로 감지해 해당 컴포넌트의 JS·CSS만 lazy-load하며, Declarative Shadow DOM으로 레이아웃 시프트 없이 SSR 결과를 그대로 받는다. 빌드 도구는 Rspack으로 옮겨 시작 시간이 2초로 줄었다. 문서 중심 사이트에서 웹 표준만으로 어디까지 갈 수 있는지를 보여주는 사례다.
Accessibility in React: Common Mistakes and How to Fix Them
React 애플리케이션에서 자주 발생하는 접근성 문제와 해결법을 정리한 글이다. <div onClick>은 키보드 포커스나 Enter/Space 처리가 빠져 있어 의미상 버튼이 필요하면 반드시 <button>을 사용해야 한다는 점, 폼 입력과 아이콘 버튼은 <label> 또는 aria-label로 명시적인 레이블을 가져야 한다는 점을 짚는다. SPA에서 라우트 전환 시 포커스 이동, 토스트 같은 동적 알림에 role 속성을 부여하는 등 11개 항목의 감사 체크리스트를 함께 제공한다.
Partial Page Caching Using React Server Components
Jack Herrington이 React Server Components(RSC)를 활용한 부분 페이지 캐싱 전략을 다루는 영상이다. 페이지 전체를 한 번에 캐싱하면 자주 변하는 영역까지 함께 캐시 무효화되는 문제를, 컴포넌트 단위로 캐싱 경계를 나누어 해결하는 접근을 보여준다. Next.js App Router의 캐싱 동작과 함께 정적·동적 영역을 한 페이지 안에서 어떻게 조합하는지를 실습 중심으로 풀어낸다.
Cursor TypeScript SDK
Cursor가 TypeScript 기반 SDK를 공개 베타로 출시했다. "Cursor와 동일한 런타임·하네스·모델"을 사용해 코딩 에이전트를 프로그래밍 방식으로 호출할 수 있어, CI 파이프라인이나 백엔드 서비스, 자체 제품에 코딩 에이전트를 임베드할 수 있다. 보안 샌드박싱과 상태 관리가 포함된 클라우드 인프라 위에서 실행되며, MCP 서버와 커스텀 Agent Skills, Composer 2를 비롯한 다양한 모델을 선택할 수 있다. 코딩 에이전트가 완성된 제품의 한 컴포넌트로 자리 잡아 가는 흐름을 보여주는 릴리스다.
>> FE News 26년 5월 소식 보러가기
◎ FE News란?
네이버 FE 엔지니어들이 엄선한 양질의 FE 및 주요한 기술 소식들을 큐레이션해 공유하는 것을 목표로 하며, 이를 통해 국내 개발자들에게 지식 공유에 대한 가치 인식과 성장에 도움을 주고자 하는 기술소식 공유 프로젝트 입니다.
매월 첫째 주 수요일, 월 1회 발행 되고 있으니 많은 관심 부탁드립니다.
▷ 구독하기
||