핵심 요약
데브시스터즈가 Dash 도입으로 데이터 앱 아키텍처를 재구성하고 FetchProvider/TransformProvider/RenderProvider를 도입해 차트 개발과 운영의 생산성과 유지보수성을 개선했습니다.
구현 방법
- Plotly.js 기반 차트와 직접 만든 React 컴포넌트 연동으로 웹 개발자 친화성 확보
- FetchProvider/TransformProvider/RenderProvider로 데이터 흐름을 MVC 유사 구조로 분리
- _dash-layout, _dash-dependencies 등 초기 렌더링 흐름과 콜백 그래프 구성
- Line/Bar/Area 차트 모듈화를 위한 Mixin 도입 및 HistoryMixin 활용
- gzip, br 데이터 압축으로 브라우저-서버 간 트래픽 최소화 및 재사용 가능한 브라우저 데이터 활용
주요 결과
- 데이터 전송량을 약 1/5로 감소시켜 대용량 데이터 처리 효율 향상
- 모듈화로 유지보수성과 차트 재사용성 대폭 강화
- 복합 인터랙션에서도 확장성과 반응성 개선
