피드로 돌아가기
Dev.toFrontend
원문 읽기
Vanilla JS에서 TypeScript 기반 React 19/Node.js 스택으로의 전면 전환
Migrating Ekehi from Vanilla JS to a TypeScript Stack
AI 요약
Context
페이지별 폴더 구조의 정적 HTML/CSS/JS 기반 클라이언트와 Plain JavaScript Express API로 구성된 레거시 환경. 데이터 패칭 로직의 파편화와 디자인 시스템 부재로 인한 중복 마크업 및 유지보수 효율 저하가 병목 지점으로 작용함.
Technical Solution
- TanStack Router 도입을 통한 Type-safe Routing 및 파일 기반 Route Generation으로 런타임 타입 안정성 확보
- Feature-sliced Layout 설계를 통해 도메인별로 Query, Service, Types를 응집시켜 모듈 간 의존성 제거
- Radix UI Primitive와 CVA(class-variance-authority)를 결합한 Design System 구축으로 접근성 보장 및 컴포넌트 변이의 타입화 구현
- Tailwind CSS 4의 @theme 지시어를 활용한 Role-based Token 체계 구축으로 시맨틱 디자인 시스템으로 전환
- pnpm workspace 기반의 모노레포 구조 전환 및 Husky, commitlint를 통한 엄격한 Quality Gate 설정
- Vite 8의 Auto Code Splitting을 적용하여 Route 단위의 최적화된 청크 분할 및 번들 크기 감소
실천 포인트
- 컴포넌트 설계 시 Radix UI와 같은 Headless UI를 활용해 접근성 구현 비용을 최소화하고 스타일링에만 집중할 것 - CSS 변수 정의 시 단순 색상명(purple-700)이 아닌 역할 중심의 토큰명(primary, surface)을 사용하여 테마 변경 유연성을 확보할 것 - 프로젝트 규모 확장 시 기술적 타입(components, pages)이 아닌 도메인 기반(auth, admin)의 폴더 구조를 채택하여 응집도를 높일 것 - API 클라이언트를 Typed Library 형태로 추상화하여 UI 레이어와 데이터 페칭 로직을 분리할 것