피드로 돌아가기
Stop Writing Frontend Types: Building a Backend-Driven Metadata Protocol
Dev.toDev.to
Frontend

Frontend 타입 정의 제거, Backend-Driven Metadata로 구현한 제로 설정 UI

Stop Writing Frontend Types: Building a Backend-Driven Metadata Protocol

Jackson Kasi2026년 4월 3일6intermediate

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 도구 도입을 검토할 것

원문 읽기