전체 데이터를 브라우저에 두는 광고 대시보드 만들기

광고 대시보드에서 필터·정렬·검색을 할 때마다 서버 응답을 기다리는 문제와, 성과가 0인 항목 누락·ID의 페이지 위치 확인 불가·서버 미지원 정렬·URL 선택 상태 검증 불가 문제를 함께 해결하기 위해 전체 데이터를 브라우저로 가져왔습니다. 데이터 상한을 먼저 확인한 뒤 Metadata와 성과 데이터를 API로 분리하고, Metadata로 표를 먼저 그리며 나머지 값은 ID 기준으로 병합해 점진적으로 표시했습니다. 전체 데이터와 연산은 Web Worker에 두고 ArrayBuffer를 Transferable로 전달해 복사와 메인 스레드 부담을 줄였으며, Worker 장애 시 재요청하는 복구 경로도 마련했습니다. 그 결과 목록 탐색과 여러 기능을 클라이언트 계산으로 처리할 수 있었지만, 초기 진입 시간과 메모리 사용량은 감수해야 할 비용으로 남았습니다.

• 브라우저에서 전체 데이터를 다루려면 먼저 데이터 증가에 상한이 있는지 확인하고, 최악의 메모리·연산·초기 로딩 비용을 계산하세요.
• 목록의 기준 데이터와 성과 데이터를 분리하면 성과가 없는 항목도 유지하고, 각 데이터의 갱신 주기에 맞춰 캐시 수명을 설정할 수 있습니다.
• 점진적 렌더링에서는 아직 도착하지 않은 컬럼의 정렬을 제한하고, 데이터 버전을 캐시 키에 반영해 갱신 누락을 막을 수 있습니다.
• Web Worker는 계산 자체를 빠르게 하기보다 메인 스레드의 응답성을 지킵니다. 큰 데이터는 Transferable로 한 번만 넘기고, 요청·응답 연결과 Worker 복구를 별도 계층에서 관리하세요.
• 데이터가 많다는 이유만으로 Virtual Scrolling이나 IndexedDB를 도입하지 말고, 실제 DOM 부하와 캐시 무효화 필요성을 확인하세요.