Phoenix LiveView 외부 API 연동 패턴 요약

카테고리

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

서브카테고리

웹 개발

대상자

Phoenix LiveView 개발자, 실시간 UI 구현 담당자

난이도: 중급 이상 (비동기 처리, Phoenix 아키텍처 이해 필요)

핵심 요약

• Task.start로 비동기 API 호출 처리하여 UI 블로킹 방지
• handle_info/2로 비동기 응답 처리 및 상태 업데이트
• Phoenix.PubSub를 활용한 실시간 웹훅 통합
• 캐싱(ETS/Redis)으로 주기적으로 변경되는 데이터의 지연 감소
• 로딩 UI, 재시도 버튼 등 사용자 피드백 강화

섹션별 세부 요약

1. 문제 정의

• LiveView의 상태 유지성과 외부 API 비동기 처리 간 갈등
• API 지연, 타임아웃, 실패 시 UI 무반응 또는 블랭크 상태 발생
• 사용자에게 투명한 상태 전달 필요성 강조

2. 비동기 API 호출 패턴

• Task.start(fn -> ... end)으로 API 호출 분리
• assign(socket, loading: true)로 로딩 상태 초기화
• handle_info({:api_result, result}, socket)로 결과 처리 및 상태 업데이트

3. 웹훅 통합 전략

• 외부 시스템(예: 결제 처리)에서 웹훅 수신
• Phoenix.PubSub.broadcast/3로 사용자 특정 주제에 이벤트 브로드캐스트
• LiveView mount/3에서 Phoenix.PubSub.subscribe/2로 구독 설정
• handle_info/2로 웹훅 이벤트 처리 및 UI 상태 업데이트

4. 캐싱 전략

• mount/3에서 ETS/Redis 등 캐시 데이터 제공
• 비동기 Task.start로 캐시 갱신 트리거
• assign(socket, result: new_data)로 즉시 UI 업데이트

5. 실패 대응 패턴

| 전략 | 효과 |

|------|------|

| 재시도 + 백오프 | 불안정한 API 대응 |

| Telemetry hook | 지연된 API 호출 추적 |

| 타임아웃 메시지 | 사용자에게 문제 알림 |

| Fallback UI | 로딩 스피너, 스켈레톤 UI 제공 |

결론

• Task.start, handle_info, Phoenix.PubSub 활용으로 외부 API 연동 시 실시간성 유지
• 캐싱 + 웹훅으로 지연 최소화 및 사용자 피드백 강화
• Fallback UI로 로딩 상태 명시, 사용자 신뢰도 향상

> 외부 API 연동 시 비동기 처리, 실시간 통신, 캐싱 전략, 사용자 피드백이 실시간 UI 구현의 핵심 요소다.