프론트엔드
RxJS로 우아하게 사이드 이펙트 통제하기
두줄요약
RxJS와 zustand로 비동기 사이드 이펙트를 하나의 흐름으로 통제한 개편 사례를 소개했습니다. 액션 완료 기준과 구독 해제를 명확히 해 타이밍 버그와 성능 저하를 해결했습니다.
문제 상황
- SDK 환경에서 고객사 호출 타이밍을 통제할 수 없는 상태
- boot, shutdown, track 등 비동기 인터페이스의 사이드 이펙트가 서로 겹치며 비결정적 버그 발생
- 액션 완료 시점이 네트워크 응답 기준으로 잘못 정의되어 후속 작업이 초기화 상태를 밟는 구조
원인 분석
- 하나의 액션이 인증, 소켓 연결, 재시도까지 여러 사이드 이펙트를 연쇄적으로 유발하는 구조
- 비즈니스 로직과 상태 관리, 구독 관리가 epic, middleware, 컴포넌트, 서비스에 분산
- 전역 상태 공유로 인해 실행 순서가 조금만 흔들려도 결과가 달라지는 구조
해결 방법
- RxJS pipe로 비즈니스 로직을 하나의 흐름으로 모으고 각 인터페이스의 complete 기준을 명확히 정의
- zustand로 pipe 중간에서 상태를 동기적으로 갱신해 흐름을 끊지 않도록 구성
- 컴포넌트는 UI와 이벤트 트리거만 담당하고 비즈니스 로직은 effect로 집중
성능/운영 포인트
- 구독 해제와 스트림 종료 책임을 명확히 하여 장기 실행 시 메모리 누수와 성능 저하 완화
- 소켓 연결 전후의 이벤트 유실, 재연결 실패 같은 타이밍 이슈를 구조적으로 제거
- 코드량 감소와 재사용성 향상으로 유지보수 부담 완화