전체 데이터를 브라우저에 두는 광고 대시보드 만들기
김동희 토스 · 토스 기술 블로그
AI 핵심 요약
광고 대시보드에서 필터·정렬·검색을 할 때마다 서버 응답을 기다리는 문제와, 성과가 0인 항목 누락·ID의 페이지 위치 확인 불가·서버 미지원 정렬·URL 선택 상태 검증 불가 문제를 함께 해결하기 위해 전체 데이터를 브라우저로 가져왔습니다. 데이터 상한을 먼저 확인한 뒤 Metadata와 성과 데이터를 API로 분리하고, Metadata로 표를 먼저 그리며 나머지 값은 ID 기준으로 병합해 점진적으로 표시했습니다. 전체 데이터와 연산은 Web Worker에 두고 ArrayBuffer를 Transferable로 전달해 복사와 메인 스레드 부담을 줄였으며, Worker 장애 시 재요청하는 복구 경로도 마련했습니다. 그 결과 목록 탐색과 여러 기능을 클라이언트 계산으로 처리할 수 있었지만, 초기 진입 시간과 메모리 사용량은 감수해야 할 비용으로 남았습니다.
- 브라우저에서 전체 데이터를 다루려면 먼저 데이터 증가에 상한이 있는지 확인하고, 최악의 메모리·연산·초기 로딩 비용을 계산하세요.
- 목록의 기준 데이터와 성과 데이터를 분리하면 성과가 없는 항목도 유지하고, 각 데이터의 갱신 주기에 맞춰 캐시 수명을 설정할 수 있습니다.
- 점진적 렌더링에서는 아직 도착하지 않은 컬럼의 정렬을 제한하고, 데이터 버전을 캐시 키에 반영해 갱신 누락을 막을 수 있습니다.
- Web Worker는 계산 자체를 빠르게 하기보다 메인 스레드의 응답성을 지킵니다. 큰 데이터는 Transferable로 한 번만 넘기고, 요청·응답 연결과 Worker 복구를 별도 계층에서 관리하세요.
- 데이터가 많다는 이유만으로 Virtual Scrolling이나 IndexedDB를 도입하지 말고, 실제 DOM 부하와 캐시 무효화 필요성을 확인하세요.
소개
서버가 하던 필터링·정렬·검색·페이지네이션을 브라우저로 옮겼더니, 속도뿐 아니라 손대지 못하던 문제 네 개가 같이 풀렸습니다.
비슷한 학습 자료
컨퍼런스 DAN 2025
[팀네이버 컨퍼런스 DAN25] 실시간 vs 배치, 함께 굴리는 데이터 파이프라인 - 확장성과 정합성을 잡은 대규모 데이터 플랫폼 운영기 본 발표는 AdVoost Shopping 광고 상품에서 쇼핑 상품을 연동하는 데이터 파이프라인을 구축한 경험을 다룹니다. 다양한 플랫폼 제약과 서비스 요구사항 속에서 실시간 처리와 배치 처리의 균형, 상품 메타데이터와 광고 메타데이터의 동시 연동이라는 과제를 해결한 과정을 공유합니다. MongoDB CDC, Kafka Streams, Iceberg, 자체 영속성 레이어 등을 활용하여 구현한 방법을 소개하고, 선형성·확장성·성능 관점에서의 트레이드오프, 그리고 실시간·배치 처리 방식을 선택한 기준에 대해 공유합니다. 목차 1. AdVoost Shopping 에서의 도전과제 - AdVoost Shopping 에서의 저희의 역할, 주어진 요구 사항, 그리고 도출한 도전과제를 설명합니다. 2. 아키텍처 - 도전과제를 통...
데이터베이스 데브옵스 · 인프라
컨퍼런스 DAN 2025
[팀네이버 컨퍼런스 DAN25] F-Solid: RAG에 최적화된 검색아키텍쳐
컨퍼런스 DAN 2025
[팀네이버 컨퍼런스 DAN25] F-Solid: RAG에 최적화된 검색아키텍쳐 AI브리핑을 위해 만들어진 RAG용 검색기 - F-SOLID의 전반적인 아키텍쳐에 대해 설명합니다. 목차 AI를 위한 Unified 검색기 - AI를 위한 범용 Unified 검색기 의 필요성 - 현재 검색 시스템의 한계점 - F-Solid : AI 를 위한 새로운 검색 플랫폼 개발 프로젝트 대규모 자질을 효율적으로 색인하기 위한 파이프라인 - 대량의 문서 자질을 유통하기 위한 파이프라인 구성 - 자질 별 중요도를 고려한 우선순위 큐 - 문서 중요도를 고려한 색인 최적화 다층 Layer 기반 검색 구조 - 다층 Layer 기반 검색 구조 소개 - Base Ranker - Core Ranker - Blender 적합성 개선을 위한 LLM & 뉴럴 활용 - Learned Sparse Retrieval 기법인 SPLADE 적용 - 도메인...
데이터베이스 AI에이전트 개발 로드맵 5개에 담김
문서 신지호
브라우저용 번들링 플러그인, 직접 만들었어요
문서 임재후/최수민
웹에서 복잡한 퍼널 쉽게 관리하기
문서 한승희
뷰티 필터를 개발하며 얻은 새로운 경험
책 조 아타디 예스24
실무로 통하는 웹 API
책 조 아타디 예스24
실무에 바로 통하는 웹 API, 예제로 배우는 가장 실용적인 활용법 『실무로 통하는 웹 API』는 미디어, 클립보드, 알림 등 현대 웹 개발에 꼭 필요한 브라우저 기반 API를 풍부한 코드 예제와 함께 다룬 실전 가이드이다. 각 장은 ‘문제’ - ‘해결’ -’설명’ 구조로 구성되어 있어 필요한 기능을 빠르게 찾아 적용할 수 있으며, 기능이 잘 작동하는지 확인해야 하는 실무적 주의 사항도 함께 제시해 활용도를 높였다. 방대한 웹 API를 조합해 실제 서비스를 구현하는 과정을 통해 이론과 실무를 자연스럽게 연결합니다. 신입 개발자에게는 웹 브라우저와 표준 API의 핵심 원리를 익힐 기회를 제공하고, 프레임워크나 라이브러리에 의존하지 않는 프런트엔드 개발의 새로운 가능성도 보여준다. ‘브라우저가 곧 플랫폼’이 된 시대, 이 책은 웹 개발자가 반드시 알아야 할 내용을 가장 실용적인 방식으로 전달한다.
웹 개발 프론트엔드