피드로 돌아가기
Gnoke flatJSON — My JSON detection logic is now a library you can use.
Dev.toDev.to
Frontend

68라인의 Normalization Layer로 8가지 JSON 포맷 통합 해결

Gnoke flatJSON — My JSON detection logic is now a library you can use.

Ekong Ikpe2026년 4월 21일2beginner

Context

다양한 JSON Shape로 인해 발생하는 테이블 렌더러의 Crash 및 데이터 누락 문제 발생. API 응답, DB Export 등 데이터 소스별로 상이한 스키마 구조가 렌더링 단계의 병목으로 작용함.

Technical Solution

  • 렌더러 진입 전 데이터 구조를 단일화하는 Normalization Layer 설계
  • { headers, rows } 형태의 표준 인터페이스를 정의하여 렌더링 로직의 복잡도 제거
  • Array of Objects, Entity-wrapped 등 8가지 서로 다른 입력 포맷에 대한 매핑 로직 구현
  • Missing Key 발생 시 빈 문자열로 치환하여 Column Drop 현상을 원천 차단
  • Nested Object를 JSON String으로 직렬화하여 [object Object] 출력 오류 해결
  • 외부 의존성 없는 Zero Dependency 설계를 통한 라이브러리 경량화 및 범용성 확보

1. 데이터 소스가 다양한 경우 렌더러와 데이터 소스 사이에 Normalizer 계층을 두어 관심사를 분리했는가

2. 예외적인 데이터 구조(Nested Object, Missing Key)에 대한 Fallback 전략이 정의되었는가

3. 표준화된 인터페이스(예: headers/rows)를 통해 하위 시스템의 결합도를 낮추었는가

원문 읽기