Phoenix LiveView에서 장기 작업 처리: UI 반응성 유지 전략

카테고리

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

서브카테고리

웹 개발

대상자

Phoenix LiveView를 사용하는 웹 개발자, 특히 장기 작업(예: PDF 생성, 대규모 파일 처리)으로 인한 UI 락 문제를 해결하고자 하는 중급 이상 개발자

핵심 요약

• 장기 작업을 GenServer 또는 Task로 백그라운드 프로세스에 전달하여 LiveView 프로세스를 차단하지 않도록 설계
• Phoenix PubSub을 활용해 작업 상태 업데이트를 실시간으로 통신하고, 사용자에게 진행 상황을 전달
• Job 상태를 중앙 집중식으로 관리(GenServer 또는 데이터베이스)하여 사용자 재연결 시 상태 유지 가능
• Error handling 및 Supervision을 통해 백그라운드 작업 실패 시 시스템 전체 충돌 방지

섹션별 세부 요약

1. 문제 정의: LiveView의 동기 처리 한계

• LiveView는 각 프로세스가 이벤트 처리 및 UI 렌더링을 담당하지만, PDF 생성 또는 대규모 파일 처리 같은 장기 작업으로 인해 UI 락 발생
• 사용자 입력 반응 지연, UI 동결로 사용자 경험 저하

2. 백그라운드 처리 패턴: `GenServer`/`Task` 활용

• 사용자가 "Generate Report"를 클릭 시, 즉시 UI 응답 (로딩 스피너 표시) 후 백그라운드에서 작업 수행
• 작업 완료 시 LiveView에 메시지 전달하여 상태 업데이트 및 UI 재렌더링

3. Phoenix PubSub을 통한 상태 통신

• 백그라운드 작업자는 PubSub을 사용해 작업 진행 상태 또는 완료 이벤트를 주제(topic)에 발행
• LiveView는 해당 주제에 구독하여 비동기 상태 업데이트 가능

4. 중앙 집중형 작업 상태 관리

• GenServer 또는 데이터베이스를 통해 작업 상태 저장, 사용자 재연결 시 최신 상태 조회 가능
• LiveView는 mount 시 상태 확인 및 PubSub 이벤트 구독으로 고가용성 UI 구현

5. 오류 처리 및 타임아웃 관리

• 백그라운드 작업은 Supervisor로 감독하여 실패 시 시스템 전체 중단 방지
• 사용자 탐색 중단 시 작업 취소 로직 추가

6. 대규모 파일 업로드 처리

• LiveView의 Chunked Upload 기능 활용, 업로드 완료 후 백그라운드 작업자 호출
• 파일 분석/처리 작업을 비동기로 처리

7. CPU 집약적 작업 최적화

• Oban 또는 Exq 같은 Job Queue 사용, 백그라운드 노드에 작업 전달
• LiveView는 PubSub을 통해 작업 진행 상태 실시간 추적

8. 전체 시스템 성능 고려

• 백그라운드 작업 오프로딩은 모든 사용자의 UI 반응성 향상에 기여
• LiveView 프로세스 차단 방지로 시스템 전체 지연 방지

결론

• GenServer/Task + Phoenix PubSub을 활용해 장기 작업을 백그라운드로 분리하고, 상태를 실시간으로 통신
• Supervisor와 Job Queue(Oban/Exq) 사용으로 작업 실패 대응 및 확장성 확보
• 사용자 경험 향상을 위해 작업 상태를 중앙에서 관리하고, UI 재렌더링 최소화
• 추가적으로 "Phoenix LiveView: The Pro’s Guide to Scalable Interfaces and UI Patterns" PDF 가이드를 참고해 확장 가능한 아키텍처 구현 권장