Next.js App Router 최적화를 위한 RSC 경계 설계 및 a11y 자동화 구현

kovax-react 0.7: Next.js App Router, kovax-react/server, and jest-axe in every test

Aleksey Alekseev2026년 5월 20일4분intermediate

AI 요약

Context

0.6 버전 출시 이후 Server Components와 Client Components 간의 명확한 구분 기준 부재로 인한 개발자 경험 저하 발생. 번들 사이즈의 투명성 부족과 접근성(a11y) 회귀 테스트의 부재로 인한 유지보수 비용 증가가 병목 지점으로 식별됨.

RSC-safe 전용 엔트리 포인트인 kovax-react/server를 구축하여 서버 컴포넌트 내에서 안전한 정적 마크업 렌더링 보장
tsup 빌드 프로세스에 "use client" 지시어를 자동 삽입하는 파이프라인을 구축하여 클라이언트 전용 번들의 런타임 오류 방지
jest-axe 기반의 expectNoAxeViolations 유틸리티를 setupTests.ts에 전역 설정하여 CI 단계에서 접근성 위반 사항 자동 탐지
.size-limit.json 설정을 통한 엔트리 포인트별 Gzip 예산으로 번들 비대화를 방지하는 가드레일 구축
FOUC(Flash of Unstyled Content) 해결을 위해 첫 렌더링 전 data-kovax-theme를 주입하는 인라인 스크립트 패턴 도입
aria-label 및 datetime 타입 필드 적용을 통해 DatePicker 컴포넌트의 시맨틱 구조 강화

실천 포인트

1. RSC 환경에서 hooks/context/effects 포함 여부에 따라 Server/Client 엔트리 포인트를 물리적으로 분리했는가?

2. CI 파이프라인에 `size-limit`과 같은 번들 사이즈 강제 제약 조건을 설정하여 성능 회귀를 방지하고 있는가?

3. 컴포넌트 테스트 스위트 내에 `axe-core` 기반의 자동화된 접근성 검증 로직이 포함되어 있는가?

태그