Phoenix LiveView를 활용한 실시간 대시보드 구축
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Elixir 및 Phoenix 프레임워크에 익숙한 중급 이상 개발자
핵심 요약
- Phoenix LiveView를 사용하면 JavaScript 없이 실시간 데이터 업데이트를 구현할 수 있음
- Elixir 기반 서버 로직 유지로 앱 관리 용이
- LiveView 내장 성능 최적화 기능으로 실시간 업데이트 효율성 향상
섹션별 세부 요약
- 프로젝트 설정
mix phx.new
명령어로 LiveView 옵션 포함한 프로젝트 생성mix.exs
에{:phoenix_live_view, "~> 0.17.5"}
의존성 추가mix deps.get
으로 의존성 설치 및 컴파일
- LiveView 모듈 구현
dashboard_live.ex
파일에서mount/3
,handle_info/2
,render/1
함수 정의:rand.uniform/1
로 가상의 서버 로드 및 활성 사용자 수 생성Process.send_after/3
을 사용해 1초 간격으로 데이터 갱신
- 라우팅 구성
router.ex
에live "/dashboard", LiveDashboardWeb.DashboardLive
라우트 정의
- 프로와 반대점
- 장점:
- 클라이언트 코드 최소화로 실시간 업데이트 가능
- Elixir 서버 로직 유지로 관리 용이
- 내장 성능 최적화 기능 제공
- 단점:
- 대규모 사용자/업데이트 시 확장성 제한
- React/Vue.js 등 JS 프레임워크 대비 클라이언트 상호작용 제한
- 복잡한 UI 구성 시 추가 통합 필요
결론
Phoenix LiveView는 JavaScript 의존 없이 실시간 앱 개발에 유리하지만, 대규모 시스템에서는 성능 최적화와 복잡한 UI 구성 시 추가 개발이 필요함. 간단한 대시보드 구현에 적합하며, Process.send_after/3
과 :rand.uniform/1
을 활용한 실시간 데이터 시뮬레이션 예제를 참고하면 실무 적용 가능.