피드로 돌아가기
Dev.toFrontend
원문 읽기
Fetch Duplex Stream 기반 메모리 최적화 및 XHR Fallback 구조의 Universal Uploader 설계
Show OS: Universal Uploader – Zero-dependency, stream-based file uploading with transparent XHR fallback
AI 요약
Context
대용량 파일 업로드 시 브라우저 메모리 점유율 상승 및 메인 스레드 블로킹 문제 발생. 기존 라이브러리의 Multi-part form encoding 방식에 따른 전체 파일 버퍼링과 무거운 Polyfill 의존성으로 인한 번들 사이즈 증가 해결 필요.
Technical Solution
- Fetch Duplex streams 및 Web Streams API 결합을 통한 상수 시간 복잡도의 메모리 사용량 유지
- 브라우저 런타임의 스트림 지원 여부를 즉시 감지하여 Safari 등 미지원 환경에서 Chunked XHR pipeline으로 자동 전환하는 Fallback 전략 채택
- Transport Layer 로직을 Composition 기반으로 분리하여 Stream Controller와 Network Client 간의 결합도 최소화
- Exponential Backoff 알고리즘을 적용한 Chunk 단위 자동 재시도 및 Pause/Resume/Abort 훅 구현
- Vanilla TypeScript 기반의 Zero-dependency 설계 및 Tree-shaking 최적화를 통한 런타임 오버헤드 제거
- React State Primitive와 매핑되는 선언적 훅을 제공하여 불필요한 Re-render 방지 구조 설계
실천 포인트
- 브라우저별 API 지원 차이를 해결하기 위해 Runtime Capability Detection 기반의 Fallback 전략 검토 - 대용량 데이터 처리 시 메모리 효율을 위해 Buffering 방식 대신 Stream 기반 전송 도입 고려 - 외부 라이브러리 의존성을 줄이기 위해 Core 로직을 Vanilla JS/TS로 구현하고 프레임워크 전용 래퍼를 분리하는 구조 적용 - 네트워크 불안정성에 대비하여 Exponential Backoff 기반의 재시도 메커니즘 설계