Axios 요청을 Node에서 hunked Response Stream으로 간소화하기

제목: 노드에서 Chunked Response Stream을 사용한 Axios 요청 문제 해결

React와 Node를 사용하면 데이터를 청크로 반환하는 엔드포인트에서 데이터를 가져와야 하는 상황에 마주칠 수 있습니다. 이 블로그 포스트에서는 노드 백엔드에서 Axios를 사용하여 청크된 응답 스트림을 처리할 때 개발자들이 직면하는 흔한 문제를 해결해보겠습니다.

문제

‘Transfer-Encoding: chunked’ 헤더를 사용하여 청크로 데이터를 반환하는 노드 서버의 엔드포인트가 있는 시나리오를 고려해 보겠습니다. 이 데이터를 전체 응답이 전달될 때까지 기다리지 않고 전송받은 대로 프론트엔드에서 표시하려고 합니다.

React 클라이언트 앱에서 다음 코드를 사용하여 노드 서버 엔드포인트에 Axios 요청을 만듭니다:

async function getDataFromStream(_data) {
    const { data, headers } = await Axios({
        url: 'http://the.api.url/endpoint',
        method: 'GET',
        responseType: 'stream',
        timeout: 0,
    });

    // 받은 데이터 처리
    data.on('data', chunk => console.log('chunk', chunk));

    return Promise.resolve();
}

그러나 ‘res.end()’ 메소드를 사용하여 서버에서 응답을 전송하는 작업이 완료된 후에야 데이터 객체가 사용 가능해진다는 것을 알 수 있습니다. 즉, 모든 청크가 서버에서 보내지는 대로 한꺼번에 받아지게 됩니다.

해결책

서버에서 보내는 대로 데이터를 청크로 수신하기 위해 Axios에서 제공하는 onDownloadProgress 핸들러를 활용하여 이 문제를 해결할 수 있습니다. 코드를 다음과 같이 수정하세요:

function getDataFromStream(_data) {
    return Axios({
        url: 'http://the.api.url/endpoint',
        method: 'GET',
        onDownloadProgress: progressEvent => {
            const dataChunk = progressEvent.currentTarget.response;
            // 받은 데이터 청크 처리
        }
    }).then(({ data }) => Promise.resolve(data));    
}

onDownloadProgress 함수를 사용하여 다운로드에 대한 진행 이벤트를 처리할 수 있습니다. 이 경우, progressEvent.currentTarget.response를 사용하여 부분적인 데이터 청크에 접근할 수 있습니다. 요구 사항에 따라 받은 데이터 청크를 처리하여, 예를 들어 Redux 스토어에 저장하여 프론트엔드에 표시할 테이블을 렌더링할 수 있습니다.

결론

이 블로그 포스트에서는 Axios를 사용하여 노드에서 청크된 응답 스트림을 처리할 때 발생하는 문제를 해결하는 방법을 알아보았습니다. onDownloadProgress 핸들러를 활용하여 수신한 데이터 청크를 즉시 처리하여 데이터를 점진적으로 표시함으로써 사용자 경험을 향상시킬 수 있었습니다.

이 가이드가 노드 서버와 React 클라이언트 앱에서 Axios를 사용하여 청크된 응답 스트림을 처리할 때 마주칠 수 있는 어려움을 극복하는 데 도움이 되었으면 좋겠습니다. 즐거운 코딩하세요!

참고 자료 :

https://stackoverflow.com/questions/58961981/axios-request-with-chunked-response-stream-from-node

같은 카테고리의 다른 글 보기 :

reactjs