실시간 Angular 대시보드 구축하기
대부분의 대시보드는 정적인 느낌을 줍니다. 사용자는 오래된 데이터를 보게 되고, 새로고침을 직접 클릭해야 합니다. 폴링(polling) 방식을 사용할 수도 있지만, 이는 서버에 너무 많은 부하를 줍니다.
WebSockets가 이 문제를 해결합니다. 서버는 업데이트가 발생하는 즉시 데이터를 푸시합니다. 새로고침이 필요 없습니다.
Angular, RxJS, 그리고 Signals를 사용하여 실시간 대시보드를 구축하는 방법을 소개합니다.
아키텍처
- 연결에는 RxJS
webSocket을 사용합니다. - 상태 관리에는 Angular Signals를 사용합니다.
- 데이터를 저장하기 위해 단일 스토어(store)를 사용합니다.
- WebSocket 서비스
모든 컴포넌트마다 새로운 연결을 열지 마세요. 서비스에서 shareReplay를 사용하세요. 이를 통해 여러 위젯이 하나의 연결을 공유할 수 있습니다.
스트림에서 에러를 캐치하여 처리하세요. 이렇게 하면 연결이 끊겼을 때 앱 전체가 중단되는 것을 방지할 수 있습니다.
- Signal 스토어
컴포넌트가 직접 데이터를 관리하는 대신, Signal 기반의 스토어를 사용하세요. 이를 통해 단일 진실 공급원(single source of truth)을 구축할 수 있습니다.
- CPU 사용률이나 활성 사용자 수와 같은 지표를 저장합니다.
- 최근 알림에 대한 짧은 이력을 유지합니다.
computedsignals를 사용하여 임계 상태를 표시합니다.
- 순수 컴포넌트 (Pure Components)
컴포넌트는 단순하게 유지해야 합니다. 로직을 처리해서는 안 됩니다. 컴포넌트는 스토어에서 데이터를 읽어 UI를 렌더링하는 역할만 수행해야 합니다. 이렇게 하면 코드를 테스트하고 유지 관리하기가 쉬워집니다.
프로덕션 환경을 위한 주요 팁
- 연결 상태: 사용자가 현재 실시간 상태인지 또는 재연결 중인지 항상 표시하세요.
- 지수 백오프(Exponential Backoff): 매초 연결을 재시도하지 마세요. 서버를 보호하기 위해 시간이 지남에 따라 지연 시간이 늘어나는 방식을 사용하세요.
- 보안: 인증 토큰을 쿼리 파라미터나 첫 번째 메시지를 통해 전달하세요.
WebSockets는 양방향 통신이 필요할 때 가장 효과적입니다. 데이터 수신만 필요한 경우에는 Server-Sent Events (SSE)를 고려해 보세요.
사용자가 새로고침을 누르게 만들지 마세요. 실시간으로 유지되는 서비스를 구축하세요.
Angular로 실시간 기능을 구현해 본 적이 있나요? WebSockets를 사용하셨나요, 아니면 폴링을 사용하셨나요?
출처: https://dev.to/rigole/building-real-time-dashboards-in-angular-with-websockets-a-complete-guide-10he