프론트엔드
전체 데이터를 브라우저에 두는 광고 대시보드 만들기
두줄요약
전체 데이터를 브라우저와 Web Worker로 옮겨 광고 대시보드의 필터링과 정렬을 즉시 처리하도록 개선했습니다. 그 결과 속도뿐 아니라 누락 데이터, URL 검증, 정렬 제약 같은 구조적 문제도 함께 해결했습니다.
문제 상황
- 서버 호출에 의존하던 광고 대시보드에서 필터·정렬·검색·페이지네이션마다 대기 시간이 누적되는 탐색 비용
- 클라이언트가 전체 데이터를 갖지 않아 0값 항목 누락, 특정 ID의 위치 계산 불가, 서버 미지원 정렬 불가, URL 선택 상태 검증 불가 문제 발생
원인 분석
- 목록과 성과를 분리하지 않은 단일 API 구조와 커서 기반 페이지네이션으로 인한 클라이언트 측 전체 맥락 부재
- 데이터가 전체 2만 건 수준으로 상한이 확인된 상황에서만 클라이언트 처리 전환이 가능한 전제
해결 방법
- 진입 시 전체 데이터를 받고 이후 필터링·정렬·검색·페이지네이션을 브라우저와 Web Worker에서 즉시 처리하는 구조로 전환
- Metadata와 성과를 API로 분리하고, 메모리 내 병합·스켈레톤 렌더링·버전 기반 캐시 무효화로 점진적 표시 구현
- Worker 통신 계층, Transferable 버퍼, 죽음 감지와 재생성, 선택 상태 계층 검증으로 안정성 보완
성능/운영 포인트
- 메인 스레드 연산을 Worker로 분리해 UI 정지 없이 조작 가능하게 구성
- API 분리로 캐시 수명 분리와 실패 격리 확보
- 결정 문서와 코드 주석으로 선택 이유와 기각안을 함께 관리
