피드로 돌아가기
Dev.toFrontend
원문 읽기
UI 메타데이터 분산 해결을 통한 Runtime Source of Truth 단일화
TypeScript enums aren’t the real problem — duplicated UI enum plumbing is
AI 요약
Context
TypeScript native enum이나 as const 객체만으로는 런타임 시점에 필요한 레이블, 색상, 필터 옵션 등의 UI 메타데이터를 통합 관리하기 어려움. 이로 인해 하나의 비즈니스 개념이 여러 개의 런타임 구조로 파편화되어 데이터 불일치 및 유지보수 비용이 증가하는 한계점 발생.
Technical Solution
- Enum-plus 도입을 통한 값(Value)과 메타데이터(Metadata)의 단일 정의 구조 설계
- 런타임 객체 내에 value, label, color, icon 등을 캡슐화하여 중복된 매핑 로직 제거
- 단일 정의 기반의 label(), key() 메서드 및 items 반복 가능 객체 제공으로 UI 바인딩 단순화
- findBy 메서드를 활용한 메타데이터 기반 역방향 조회(Reverse Lookup) 메커니즘 구현
- TypeScript 타입 시스템과 런타임으로의 정밀한 매핑을 통한 타입 안정성 및 런타임 유연성 동시 확보
실천 포인트
1. 단순 상수 정의만 필요한 경우 as const 사용 검토
2. 값에 따른 레이블, 색상, i18n 등 UI 메타데이터 매핑 코드가 3곳 이상 중복되는지 확인
3. Backend API 값과 UI 표현 간의 동기화 비용이 높은지 분석
4. 런타임 의존성 추가 비용 대비 Glue Code 제거로 얻는 생산성 이득 비교