Axios를 사용하여 React 앱에서 스트림으로 응답 데이터 다운로드하기
React 앱에서 엔드포인트에서 쿼리 결과를 스트림으로 CSV 파일로 다운로드하는 방법을 찾고 있다면, 한 번에 브라우저를 통해 전송되는 거대한 ResultSets를 지원하는 도전에 부딪힐 수 있습니다. 이 블로그 포스트에서는 JavaScript의 인기 HTTP 클라이언트인 Axios를 사용하여 이를 수행하는 방법을 살펴보겠습니다.
Axios에서 스트리밍 응답 처리하기
안타깝게도, 브라우저에서는 Axios에서 응답을 스트림으로 처리하는 기능이 현재 지원되지 않습니다. 이는 브라우저의 XMLHttpRequests (XHR)의 제한 때문입니다. Axios는 whatwg가 지정한 사양 (XMLHttpRequestResponseType)을 따르며, 다음과 같은 응답 유형만 지원합니다: arraybuffer, blob, document, json, text.
Axios에서 responseType을 stream으로 설정하는 것이 허용되는 것처럼 보일 수 있지만, 브라우저에서 요청을 생성할 때 Axios가 사용하는 기본 어댑터는 xhr.js입니다. 이 어댑터는 XHR을 기반으로 하며 스트림을 처리할 수 없습니다. 반면, Node.js에서 Axios를 서버 측에서 사용할 때 사용되는 어댑터는 http.js이며, 여기서는 스트림을 지원합니다. 그러나 브라우저에서 요청을 생성할 때는 이 방법이 작동하지 않습니다.
현재로써 유일한 해결 방법은 ReadableStream을 응답 본문 유형으로 지원하는 fetch API를 사용하는 것입니다.
Axios에서 Blob을 사용하여 파일 다운로드하기
파일을 다운로드하는 것이 주요 목표라면, Axios에서 responseType 옵션으로 blob을 사용하는 것이 가능한 옵션입니다. 다음은 그 방법입니다:
axios.post(url, param, {
headers: { ... },
responseType: 'blob'
})
.then(res => {
const link = document.createElement('a');
link.href = URL.createObjectURL(res);
link.click();
})위 코드 예시는 url로 POST 요청을 생성하고, axios 라이브러리를 사용합니다. responseType을 blob으로 설정하여 응답을 blob 객체로 받아옵니다. 그런 다음 링크 요소를 생성하고, 응답의 객체 URL을 해당 요소의 href로 설정하고, 프로그래밍 방식으로 링크의 클릭 이벤트를 트리거하여 파일 다운로드를 시작합니다.
결론
Axios를 사용하여 브라우저에서 직접 응답을 스트림으로 처리하는 것은 현재 브라우저의 제한으로 인해 지원되지 않습니다. 그러나 fetch API를 사용하면 비슷한 기능을 구현할 수 있습니다. 또는 파일을 다운로드하는 것이 목표라면, Axios에서 blob responseType을 사용하여 파일 다운로드를 간편하게 생성할 수 있습니다.
스트림 응답과 파일 다운로드를 처리할 때는 항상 제한 사항과 잠재적인 성능 영향을 고려해야 합니다. 특히 대용량 ResultSets를 처리해야 하는 상황에서는 더욱 그렇습니다. 적절한 접근 방식을 적용하여 React 앱에서 광범위한 데이터 다운로드를 처리할 때 원활하고 효율적인 사용자 환경을 제공할 수 있습니다.
위 내용으로 이번 블로그 포스트를 마치겠습니다! React 앱 개발에 유용한 정보를 얻으셨기를 바랍니다. 즐거운 코딩하세요!
참고 자료 :
https://stackoverflow.com/questions/60044205/download-response-data-as-stream-w-axios-in-react-app
같은 카테고리의 다른 글 보기 :
