웹 개발자를 위한 데이터 애플리케이션 워크플로우 효율화하기

데브시스터즈는 데이터 엔지니어와 웹 개발자 모두에게 친화적인 Dash를 도입해 자체 데이터 시각화 서비스를 구축했다. Dash는 Plotly.js와의 높은 궁합과 React 컴포넌트 연동이 가능하다는 장점이 있다.

기존의 단일 콜백 구조는 로직이 비대해지고, 단순한 뷰 변경 시에도 매번 데이터를 다시 쿼리해야 하는 성능 저하 문제를 야기했다. 이를 해결하기 위해 콜백을 FetchProvider(데이터 로드), TransformProvider(데이터 가공), RenderProvider(차트 생성)의 세 영역으로 분리하여 설계했다.

이 구조를 통해 브라우저에 저장된 데이터를 재사용함으로써 DB 부하를 줄였으며, gzip 및 br 압축을 적용해 데이터 전송 크기를 약 1/5로 줄였다. 또한, Mixin 패턴을 활용해 차트 생성 로직을 모듈화함으로써 코드 재사용성과 디자인 시스템 유지보수성을 높였다.