Phoenix LiveView의 고성능 UI 최적화 전략

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 대상자: Phoenix LiveView를 사용한 대규모 웹 애플리케이션 개발자
• 난이도: 중급 이상 (Elixir 및 LiveView 내부 동작 이해 필요)

핵심 요약

• phx-update 전략 활용: phx-update="append" 또는 phx-update="ignore"로 전체 리렌더링 방지
• temporary_assigns 사용: 일시적 상태 관리로 메모리 효율화
• 정적 콘텐츠 분리: LiveComponent로 분리하여 diff 계산 최소화
• 커스텀 diff 엔진 구현: Phoenix.LiveView.Engine 오버라이드로 성능 최적화

섹션별 세부 요약

1. 기본 `diff` 알고리즘의 한계

• LiveView는 HEEx 템플릿을 기반으로 DOM 트리 생성 후 diff 계산
• 대규모 UI(예: 수천 개 목록 아이템, 실시간 업데이트) 시 CPU 사용량 증가 및 대역폭 소모
• diff 계산 복잡도는 뷰 계층의 깊이와 직접적 연관

2. 선택적 리렌더링 전략

• phx-update 속성으로 DOM 업데이트 방식 제어 (예: append로 항목 추가 시 전체 목록 리렌더링 방지)
• temporary_assigns 사용 시 메모리 절약 가능하지만, 상태 관리 미흡 시 전체 리렌더링 유발 가능성
• @id를 통해 컴포넌트 재렌더링 조건 명시

3. 정적 콘텐츠 분리 및 캐싱

• UI 크롬, 네비게이션 메뉴 등 흔히 변경되지 않는 요소를 별도 LiveComponent로 분리
• 비용이 높은 계산은 memoization 또는 LiveView 내 캐싱으로 재계산 방지
• phx-update="ignore"으로 컨테이너 구조 변경 방지

4. 커스텀 `diff` 엔진 구현

• Phoenix.LiveView.Engine 오버라이드로 diff 파이프라인 커스터마이징 가능
• 예: 반복 패턴 압축, 비중요 속성 변경 필터링
• 주의사항: 내부 동작 이해 필요, 테스트 필수

5. 사례: 실시간 재무 대시보드

• 수천 개 행이 초당 여러 번 업데이트되는 테이블 처리
• 각 행을 별도 LiveComponent로 분리, phx-update="ignore" 적용
• 변경된 행만 assign 업데이트, temporary_assigns로 일시 상태 정리
• 결과: CPU 사용량 80% 감소, 대역폭 50% 절감

결론

• 핵심 팁:
• phx-update 전략을 정확히 이해한 후 적용
• 정적 콘텐츠 분리 및 temporary_assigns 활용
• 비용이 높은 계산은 memoization 또는 캐싱으로 최적화
• 대규모 애플리케이션은 커스텀 diff 엔진 고려
• 추가 자료: Phoenix LiveView: The Pro’s Guide to Scalable Interfaces and UI Patterns (PDF) 제공