대시보드 성능 향상: Python Pandas와 JavaScript의 통합 활용
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
데이터 분석
대상자
- 데이터 분석가, 웹 개발자, BI 엔지니어
- 중급~고급 수준의 기술 지식 보유자 (FastAPI, JavaScript, pandas 활용 경험이 필요)
핵심 요약
- Pandas + JavaScript 통합 아키텍처로 실시간 데이터 분석 가능 (
FastAPI
를 통한 RESTful API 활용) - Pyodide를 사용해 브라우저 내부에서 Pandas 연산 수행 (서버 요청 없이 복잡한 분석 수행)
- WebSocket을 통한 실시간 데이터 업데이트 및 캐싱 전략으로 성능 최적화 (
lru_cache
,hashlib
활용)
섹션별 세부 요약
1. FastAPI 백엔드 구축
FastAPI
기반의 RESTful API 설계 (/api/sales/summary
엔드포인트 제공)- Pandas 데이터프레임을 사용해 필터 조건에 따른 집계 연산 수행
groupby
,agg
,round
등의 Pandas API 활용 (예:revenue
의sum
,mean
,std
계산)
2. JavaScript 프론트엔드 구현
DashboardController
클래스로 필터 이벤트 리스너 등록 (날짜, 카테고리 선택 시 즉시 데이터 갱신)fetch
API를 사용해 백엔드에서 처리된 데이터 불러오기 (/api/sales/summary
요청)renderCharts
,updateKPIs
메서드로 시각화 및 KPI 업데이트
3. 브라우저 내부 Pandas 연산 (Pyodide)
Pyodide
를 사용해 Pandas를 브라우저 내부에서 실행 (서버 요청 없이 데이터 처리)filter_and_analyze
함수로 필터 조건에 맞는 데이터 분석 수행 (예:revenue
합계, 평균, 성장률 계산)toJs()
메서드로 JavaScript에 결과 전달
4. 실시간 데이터 처리 (WebSocket)
WebSocket
을 통해 실시간 데이터 업데이트 처리 (/ws/live-updates
엔드포인트 제공)asyncio
와groupby
연산으로 5초 간격으로 실시간 집계 데이터 전송pandas.DataFrame
을 사용해amount
,count
등의 집계 수행
5. 성능 최적화 전략
lru_cache
을 활용한 캐싱 전략 (filters_hash
,data_version
기반 캐싱)hashlib.md5
으로 필터 조건 해시 생성 (중복 요청 방지)cached_analysis
함수로 복잡한 Pandas 연산 캐싱
6. 컴포넌트 간 동기화
CrossFilterManager
클래스로 글로벌 필터 관리 및 컴포넌트 간 동기화applyFilters
,refreshAnalysis
메서드로 필터 변경 시 즉시 재계산callPandasAPI
를 통해 필터 조건에 맞는 데이터 요청 및 컴포넌트 업데이트
결론
- FastAPI + JavaScript + Pyodide 아키텍처를 통해 실시간 데이터 분석 및 대시보드 성능 향상
- 500ms 이내의 응답 시간 달성 (필터 조작 시 즉시 데이터 갱신)
- Pyodide 사용으로 민감한 데이터 노출 방지 및 브라우저 내부 연산 가능
- WebSocket과 캐싱 전략을 통해 실시간성과 성능 균형 유지