Phoenix LiveView: 실시간 UI의 재연결 및 복구 전략

카테고리

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

서브카테고리

웹 개발

대상자

• Phoenix LiveView를 사용한 실시간 웹 애플리케이션 개발자
• 네트워크 불안정 상태에서 UI 상태를 유지해야 하는 프론트엔드/백엔드 개발자
• 난이도: 중급 이상 (WebSocket, Elixir의 BEAM, 상태 관리 개념 이해 필요)

핵심 요약

• WebSocket 기반의 지속적인 연결이 실시간 상호작용을 가능하게 하며, 재연결 시 DOM 보존 및 최소한의 diff 전송으로 UI 일관성 유지
• 서버에서 유지되는 canonical state는 재연결 시 상태 복구를 지원하지만, GenServer 처리 실패 시 새 LiveView 세션 생성
• connected?/1을 통해 신규 방문 vs 재연결 구분하여 중복 작업 방지 및 캐시 데이터 활용

섹션별 세부 요약

1. WebSocket 기반의 지속 연결

• HTTP와 달리 연결이 유지되며, 요청별로 상태를 잃지 않음
• 네트워크 중단 시 하트비트 체크 및 자동 재연결
• 재연결 시 DOM 보존 및 최소한의 diff 전송으로 UI 손실 방지

2. 서버 상태 관리 및 재연결 처리

• LiveView 서버 프로세스가 세션별 canonical state 유지
• GenServer 종료 시 (타임아웃, 크래시, 노드 재시작) 새 LiveView 세션 생성
• mount/3에서 connected?/1을 사용해 신규 방문 vs 재연결 구분
• if connected?(socket)으로 캐시 데이터 활용
• 중복 애니메이션, 트래킹 방지

3. 재연결 실패 시 대응 전략

• 하드 리로드로 복구 시 localStorage에 폼 데이터 저장, 쿼리 파라미터로 컨텍스트 유지
• LiveComponent 사용으로 상태 격리 및 복구
• JavaScript 훅 확장:
• lv:disconnected 이벤트로 "재연결 중" 메시지 표시
• lv:reconnected 이벤트로 UI 복구

4. 사용자 행동에 따른 복구 전략

• 장치 종료/휴면/네트워크 전환 같은 사용자 행동은 장애가 아닌 사용 시나리오
• GenServer 정리 및 Presence 사용으로 사용자 상태 추적
• 이벤트 debounce 및 좀비 세션 처리를 통해 복구 흐름 최적화

5. 실시간 UX의 핵심 원칙

• 컨텍스트 인지형 앱 설계:
• 중단된 탭은 진행 중인 작업 손실 방지
• 재연결 시 중복 작업 방지
• 앱은 중단 후에도 지속 가능

결론

• WebSocket 지속 연결, 서버 기반 canonical state, 재연결 시 DOM 보존을 통해 실시간 UI의 복구력을 강화
• connected?/1과 LiveComponent 활용으로 중복 작업 방지 및 상태 격리
• GenServer 정리, Presence, 이벤트 debounce를 통해 좀비 세션 처리 및 사용자 행동에 따른 복구 전략 수립

> "Phoenix LiveView는 단순한 UI가 아닌, 장기간 유지되는 세션과 지능형 복구 흐름을 구축하는 백엔드 기술"