#Frontend

RxJS로 우아하게 사이드 이펙트 통제하기

Summary

소켓 무한 실패 버그가 상태 관리와 사이드 이펙트 구조를 통째로 바꾸기까지

채널톡이 Redux를 걷어내고 RxJS와 Zustand로 대규모 SDK 비동기 흐름을 정복한 여정

예측 불가능한 SDK 실행 타이밍에서 발생하는 프론트엔드 비동기 버그를 극복하기 위해, 채널톡이 아키텍처를 전면 개편한 생생한 트랜지션 스토리입니다. 복잡한 소켓 이벤트 체인을 RxJS 스트림으로 직렬화하고 Zustand로 실시간 동기 처리를 결합해, 비결정적이었던 시스템 타이밍을 구조적으로 완벽히 정복한 인사이트를 소개합니다.

01예측 불가능한 SDK 환경에서 발생하는 비동기 사이드 이펙트의 실행 순서 충돌 및 공유 상태 오염 추적
02RxJS의 풍부한 연산자(concatMap, switchMap 등)를 사용해 복잡한 비동기 제약 사항들을 선언적인 흐름으로 단순화
03Redux의 액션-미들웨어-리듀서 흐름을 과감히 포기하고 Zustand의 즉각적 동기 상태 변경을 적용해 파이프라인을 효율화
04컴포넌트에서 비UI 비즈니스 로직을 완벽히 격리하여 작성해야 할 코드량을 절반 가까이 극적으로 축소
05명확한 Complete 신호와 구독 해제를 강제함으로써 가비지 컬렉션을 보장하고 장기 실행 환경의 성능 누수 해결

RECOMMENDATION

예측 불가능한 유저 행동이나 다수의 연쇄적 비동기 인터페이스 처리가 필요해 타이밍 디버깅에 큰 어려움을 겪고 있는 대규모 웹 애플리케이션 및 라이브러리 빌더 조직에 추천합니다.

The Problem

채널톡 SDK에서 인터페이스(boot, shutdown)가 실행될 때, 네트워크 응답만을 기준으로 완료를 판단하면서 이후 발생하는 소켓 연결 등의 비동기 사이드 이펙트들이 통제되지 않고 다음 작업과 병렬로 얽히는 버그가 발생했습니다. 또한 비즈니스 로직이 컴포넌트, 미들웨어, 에픽 등 코드 곳곳에 파편화되어 비동기 흐름의 끝맺음을 제어하기 어려운 구조였습니다.

The Solution

비동기 흐름을 통제하기 위해 RxJS를 도입하여 비즈니스 로직을 선언적인 스트림 파이프라인으로 재조합하고 명확한 완료(complete)와 취소 시점을 정의했습니다. 이와 동시에, 흐름 중간에 즉시 상태 업데이트를 동기적으로 반영할 수 있도록 Zustand 상태 관리 라이브러리를 결합하였으며, 컴포넌트는 UI 렌더링과 이벤트 전송만 전담하는 단순한 구조로 디자인 패턴을 단순화했습니다.

The Result

새로운 비즈니스 로직을 작성할 때 작성해야 하는 보일러플레이트 코드가 Redux 사용 대비 절반 수준으로 줄었으며, 소켓 연결 및 이벤트가 타이밍 이슈로 누락되던 문제가 구조적으로 완전히 해결되었습니다. 또한 스트림이 완전하게 종료되거나 구독이 확실히 해제되는 설계가 정착되면서, 장시간 페이지를 구동해두어도 잔여 구독 참조에 따른 메모리 누수가 발생하지 않고 안정적인 성능을 유지할 수 있게 되었습니다.

Trade-off

RxJS 도입으로 비동기 스트림 처리 수준은 고도화되었으나, 팀 내부적으로 복잡한 RxJS 스트림 연산자들을 능숙하게 디버깅하고 다루기 위한 높은 수준의 러닝 커브를 감수해야 하며, 모든 스트림 라이프사이클과 가비지 컬렉션을 설계 단계부터 엄격히 인지해야 하는 예방적 유지 관리 비용이 상존합니다.

Key Concepts

Concept · 01

RxJS

시간의 흐름에 따라 비동기적으로 발생하는 데이터 흐름을 스트림으로 모델링하고 조작하는 반응형 프로그래밍 라이브러리입니다.

boot 호출부터 소켓 연결 및 인증까지 이어지는 여러 비동기 단계를 순차적인 pipe 연산자로 재조립
구독 해제(Unsubscribe) 시 진행 중인 전체 파이프라인의 비동기 연산을 즉각 취소 및 회수

Concept · 02

Zustand

단순하고 유연한 API를 지원하며, 상태 변경 요청 시 비동기 큐 없이 즉시 동기적인 상태 변경을 적용해주는 React 상태 관리 라이브러리입니다.

RxJS 파이프 도중 tap 연산자 내에서 store.set()을 호출해 로직의 중간 상태 변화를 지연 없이 동기적으로 실행
selector 구조를 통해 컴포넌트가 오직 자기 자신에게 필요한 상태 변화만 똑똑하게 캐치해 렌더링하도록 뷰 결합도를 완화

Concept · 03

Stream Serialization

비동기 이벤트 스트림들이 중간에 유실되거나 순서가 꼬이지 않도록 직렬화 큐를 두거나, 이전 비동기 동작이 완료될 때까지 이후 이벤트를 완벽하게 대기 상태로 정렬하는 제어 패턴입니다.

concatMap을 활용해 첫 번째 boot 비동기 연쇄 반응이 완료 상태를 수신할 때까지 후속 boot 요청을 대기 상태로 유지
shutdown 실행 시 이전 스트림 파이프라인을 능동적으로 폐기하여 유실되거나 고갈된 상태 값을 침범하지 못하도록 차단

Continue reading · same source

More from 채널 톡

View all posts from 채널 톡

RxJS로 우아하게 사이드 이펙트 통제하기

Summary