핵심 요약
토스가 광고 대시보드의 데이터 처리 방식을 서버 의존에서 클라이언트 주도 처리로 전환하고, API를 Metadata/Performance/부가 컬럼으로 분리해 응답 시간을 수백 ms 수준으로 낮췄습니다.
구현 방법
- Metadata/Performance/부가 컬럼으로 API를 분리한 뒤 브라우저에서 필터링/정렬/검색/페이징 수행
- 표 로딩 시 스켈레톤 UI와 점진적 렌더링으로 즉시 화면 구성
- Web Worker로 연산을 백그라운드에서 처리하고 초기 데이터는 Transferable ArrayBuffer로 전달
- 데이터 버전 관리로 캐시를 활용해 업데이트 반영
주요 결과
- 응답 시간을 수백 ms 수준으로 단축
- 성과가 0인 항목도 목록에 남아 흐름 파악 가능
- 특정 ID로 바로 위치 이동 가능
- 기존 뼈대에 영향을 주지 않고 컬럼 확장 가능
