글 링크: https://devowen.com/543
소개
이 글은 Fetch API의 스트림 기능이 데이터를 청크 단위로 받아 즉시 처리하는 데는 유용하지만, 업로드·다운로드 진행률을 측정하는 용도로는 정확하지 않다는 점을 설명합니다.
다운로드에서는 Content-Length가 gzip·Brotli 등으로 압축된 데이터의 크기를 나타내는 반면, 스트림에서 읽는 청크는 압축 해제된 데이터일 수 있어 진행률이 100%를 넘는 등 오차가 발생할 수 있습니다.
업로드에서도 스트림의 청크가 Fetch에 전달된 시점만 알 수 있을 뿐, 그 데이터가 실제로 네트워크를 통해 서버에 전송된 시점은 알 수 없기 때문에 신뢰할 만한 진행률을 계산하기 어렵습니다.
따라서 현재 정확한 업로드·다운로드 진행 상황이 필요하다면 XMLHttpRequest의 progress 이벤트를 사용하는 것이 적절하며, 앞으로는 Fetch 자체에 진행률 이벤트를 추가하는 API가 대안으로 제안되고 있습니다.
팀원들의 의견
큰 데이터를 주고 받는데는 시간이 오래 걸리고 이걸 기다리는 경험을 좋아하는 사용자는 없습니다. 큰 데이터 주고 받을 때 프론트엔드 개발자의 관점에서 사용자 경험을 좋게 하거나, 기술적으로 나은 방향을 고민해 본 적이 있으신가요?
💬. 의견 1
큰 데이터를 주고 받는 경우에 타임아웃 에러가 발생하는 경우가 종종 있었는데요. 이 경우에 일반적인 에러와 다른 에러 문구를 보여주고 최대한 에러 범위를 격리하는 작업을 했던 적이 있었어요.
또 서버에서 처리가 오래 걸리는 경우는 비동기 API나 SSE를 통해서 작업이 완료된 것을 확인하는 방식으로 작업하기도 했었어요!
목차
응답 스트림
요청 스트림
업로드 진행 상황 측정 방법