피드로 돌아가기
Dev.toFrontend
원문 읽기
Frontend 타입 정의 제거, Backend-Driven Metadata로 구현한 제로 설정 UI
Stop Writing Frontend Types: Building a Backend-Driven Metadata Protocol
AI 요약
Context
DB 스키마 변경 시 ORM, 검증 로직, API 타입, Frontend 인터페이스를 모두 수동 업데이트하는 반복 작업 발생. Backend와 Frontend 간 타입 동기화 지연으로 인한 런타임 에러 위험 상존. 개발자가 두 영역 사이에서 단순 번역가 역할만 수행하는 구조적 비효율성 존재.
Technical Solution
- Drizzle ORM 스키마 객체에서 SQL 타입 정보를 추출하여 JSON 형태로 제공하는 Schema Reflection 구조 설계
/meta전용 엔드포인트를 구축하여 데이터의 실제 값과 함께 데이터의 형태(Shape)를 함께 반환하는 Metadata Protocol 도입- Backend의 JSON 메타데이터를 읽어 TypeScript 인터페이스 파일을 자동으로 생성하는 Codegen CLI 도구 개발
- 생성된 메타데이터를 기반으로 TanStack Table 컬럼 정의 없이 UI를 동적으로 구성하는 Zero-Config UI 어댑터 구현
- DB 컬럼 추가 시 서버 재시작과 CLI 실행만으로 Frontend 타입 및 UI 컴포넌트가 즉시 반영되는 자동화 파이프라인 구축
Key Takeaway
Backend를 단일 진실 공급원(Single Source of Truth)으로 설정하고 Reflection을 통해 Frontend로 전파하는 설계는 중복 정의를 제거하고 개발 생산성을 극대화함.
실천 포인트
풀스택 도구 개발 시 수동 타입 정의 대신 메타데이터 기반의 Codegen 도구 도입을 검토할 것