1. 다운로드 진행률

fetch 함수가 반환한 Response 객체는 응답 형식에 따라 전용 메소드가 있다.

정해진 포맷으로 데이터를 변환하는 역할이다. 데이터는 어디에 저장되어 있을까?

Response 객체의 body 필드가 응답 본문을 알 수 있는 곳이다. 읽기 전용 스트림인 RedableStream 객체를 가리킨다.

스트림(stream)은 데이터가 연이어 흐르는 것을 말한다. (개울에 물이 졸졸 흐르는 것과 같다.) 용도에 따라 읽기 전용, 쓰기 전용, 양방향이 있다. body는 http 응답 데이터가 흐르는 곳이다. 브라우저가 받은 데이터를 조회할 수 있기 때문에 읽기 전용 스트림이다.

이걸 이용하면 다운로드 진행률을 계산할 수 있다.

데이터를 조금씩 응답하는 서버를 준비하자.

server

// 5번 쪼게서 응답할 것이다.
const iterateCount = 5

// 헤더 응답.
res.writeHead(200, {
  "content-type": "text/plain",
  // 응답 본문의 전체 길이다.
  "content-length": iterateCount * 8,
})

// 1초씩 지연하면서 8바이트 청크를 5번 응답한다.
for await (const i of Array(iterateCount).keys()) {
  res.write(`chunk ${i}\\n`);
  await new Promise(res => setTimeout(res, 1000));
}

// 응답 종료.
res.end();
// 요청을 받으면 총 5초간 데이터를 조금씩 응답할 것이다.
// 이제 브라우저에서 다운로드 진행율을 계산해 보자.