JavaScript Academy · 강의

Fetch 응답 스트리밍하기

대용량 응답을 도착하는 즉시 처리합니다.

Fetch 응답 스트리밍하기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

응답은 스트림입니다

fetch의 Response는 response.body를 통해 본문을 ReadableStream으로 제공합니다. 전체 payload를 기다리는 대신 도착하는 바이트를 바로 처리할 수 있습니다.

const res = await fetch("/big-file");
const stream = res.body; // ReadableStream of Uint8Array

본문 스트림 읽기

response.body는 Uint8Array chunk를 제공합니다. 다른 읽기 가능한 스트림과 마찬가지로 리더를 가져와 반복해서 읽습니다.

const reader = res.body.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("received", value.length, "bytes");
}

다운로드 진행률 추적하기

Content-Length 헤더를 수신한 바이트 수와 결합하면 진행률 표시줄을 보여 줄 수 있습니다.

const total = +res.headers.get("Content-Length");
let loaded = 0;
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  loaded += value.length;
  console.log(Math.round((loaded / total) * 100) + "%");
}

바이트를 텍스트로 디코딩하기

TextDecoder를 사용해 바이트 chunk를 문자열로 변환합니다. chunk 사이에서 여러 바이트 문자가 분할되어도 올바르게 디코딩되도록 { stream: true }를 전달합니다.

const decoder = new TextDecoder();
let text = "";
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  text += decoder.decode(value, { stream: true });
}

TextDecoderStream 사용하기

더 간단한 방법은 바이트 스트림을 TextDecoderStream을 통해 전달하여 문자열 스트림을 직접 얻는 것입니다.

const textStream = res.body.pipeThrough(new TextDecoderStream());
for await (const chunk of textStream) {
  console.log(chunk);
}

NDJSON 파싱하기

줄바꿈으로 구분된 JSON은 한 줄에 하나의 객체를 스트리밍합니다. 텍스트를 버퍼링하고 완성된 줄이 만들어질 때마다 내보냅니다.

let buffer = "";
for await (const chunk of textStream) {
  buffer += chunk;
  let nl;
  while ((nl = buffer.indexOf("\n")) >= 0) {
    const line = buffer.slice(0, nl);
    buffer = buffer.slice(nl + 1);
    if (line) console.log(JSON.parse(line));
  }
}

LLM 토큰 스트리밍

이 패턴은 스트리밍 AI 채팅의 기반입니다. 각 chunk는 토큰이나 이벤트이며, 도착하는 즉시 렌더링하여 실시간 입력 효과를 만듭니다.

fetch 스트림 중단하기

AbortSignal을 fetch에 전달하고 controller.abort()를 호출하면 긴 스트림을 깔끔하게 중지할 수 있습니다.

const controller = new AbortController();
fetch("/stream", { signal: controller.signal });
// later:
controller.abort();

스트림 오류 처리하기

스트리밍 중 네트워크 오류가 발생하면 read() 프라미스가 거부됩니다. 중단을 처리하려면 반복문을 try/catch로 감싸십시오.

try {
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
  }
} catch (err) {
  console.log("stream interrupted", err);
}

스트리밍하지 않을 때

응답이 작다면 res.json() 또는 res.text()가 더 간단합니다. payload가 크거나 점진적으로 도착하거나 끝이 정해지지 않은 경우에 스트리밍을 사용하십시오.

응답 본문은 한 번만 사용할 수 있습니다

response.body는 한 번만 읽을 수 있습니다. 두 번 읽어야 한다면 읽기 전에 res.clone()을 호출하십시오. 예를 들어 캐시에 저장할 때 필요합니다.

const copy = res.clone();
await res.body.getReader().read();
// copy still readable

빠른 확인

fetch 스트리밍을 테스트해 보십시오.

복습: fetch 스트리밍

response.body를 chunk 단위로 읽고, 진행률을 추적하고, TextDecoder/TextDecoderStream으로 바이트를 디코딩하고, NDJSON을 파싱하고, AbortController로 중단하고, 오류를 처리했습니다. 다음 주제는 변환 스트림입니다.

자주 묻는 질문

“Fetch 응답 스트리밍하기” 강의는 무료인가요?

네 — “Fetch 응답 스트리밍하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Fetch 응답 스트리밍하기”에서 뭘 배우나요?

대용량 응답을 도착하는 즉시 처리합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“Fetch 응답 스트리밍하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기