피드로 돌아가기
How I Added Live Charts to the Django Admin Without Installing a Single Package
Dev.toDev.to
Backend

의존성 제로, Django Admin 확장으로 구현한 실시간 데이터 시각화

How I Added Live Charts to the Django Admin Without Installing a Single Package

Vicente G. Reyes2026년 5월 28일7intermediate

Context

Django Admin의 기본 기능이 단순 테이블 형태의 데이터 제공에 그쳐 트렌드 분석과 시각적 통찰 도출에 한계가 있는 상황. 별도의 외부 패키지 설치나 무거운 관리자 테마 교체 없이 기존 프레임워크 내에서 경량 시각화 도구를 통합하고자 함.

Technical Solution

  • ModelAdmin.changelist_view 메서드 오버라이드를 통한 집계 데이터 추출 및 JSON 직렬화 처리
  • request.GET에서 커스텀 파라미터(days)를 선제적으로 추출 후 제거하여 Django Admin의 유효성 검증으로 인한 리다이렉션 병목 해결
  • TruncDateCount 어그리게이션을 활용하여 DB 레벨에서 일자별 방문수 및 유형별 통계 산출
  • Django 템플릿 상속 구조를 활용해 change_list.html을 확장하고 Chart.js CDN 기반의 프론트엔드 렌더링 계층 추가
  • maintainAspectRatio: false 설정과 CSS height 제약을 통한 캔버스 렌더링 왜곡 방지 및 레이아웃 최적화

1. Admin 확장 시 커스텀 쿼리 파라미터가 `ChangeList` 내부 로직과 충돌하는지 확인하고 `pop()` 처리를 통한 파라미터 격리 검토

2. DB 집계 데이터를 JSON으로 직렬화하여 템플릿에 전달함으로써 백엔드-프론트엔드 간 데이터 전달 경로 최소화

3. 외부 라이브러리 도입 전 프레임워크의 뷰 오버라이딩과 템플릿 상속만으로 해결 가능한지 우선 분석

원문 읽기