JavaScript 읽기 가능 스트림

1. JavaScript에서 ReadableStream 설치
2. .getReader()를 사용하는 ReadableStream의 예
3. Fetch API를 사용하는 ReadableStream의 예

ReadableStream은 스트림과 같은 방식으로 소스에서 데이터를 읽을 수 있도록 하는 JavaScript 개체입니다. 파일이나 네트워크 스트림과 같은 대용량 데이터를 읽는 데 자주 사용되며 Fetch API 또는 브라우저의 Response 개체와 같은 다른 API와 함께 사용할 수 있습니다.

ReadableStream을 만들려면 소스와 일부 옵션을 인수로 받는 new ReadableStream() 생성자를 사용할 수 있습니다. 그런 다음 스트림의 .getReader() 메서드를 사용하여 reader 개체를 가져올 수 있습니다. 이 개체는 .read() 및 .cancel()과 같은 메서드를 사용하여 스트림에서 데이터를 읽는 데 사용할 수 있습니다.

ReadableStream 사용의 주요 이점 중 하나는 전체 스트림이 완전히 로드될 때까지 기다리지 않고 데이터를 읽는 동안 데이터를 처리할 수 있다는 것입니다. 이는 대용량 데이터 세트로 작업하거나 느린 소스에서 데이터를 읽을 때 특히 유용할 수 있습니다.

전반적으로 ReadableStream은 JavaScript에서 스트리밍 데이터 작업을 위한 강력한 도구이며 웹 애플리케이션을 개발할 때 도구 키트에 유용한 추가 기능이 될 수 있습니다.

JavaScript에서 ReadableStream 설치

ReadableStream 생성자는 JavaScript 핵심 API의 일부가 아니지만 이 기능을 제공하는 라이브러리를 사용할 수 있습니다. 널리 사용되는 라이브러리 중 하나는 readable-stream 패키지입니다.

Node.js 프로젝트에서 readible-stream 패키지를 사용하려면 다음 명령을 실행하여 npm을 사용하여 설치할 수 있습니다.

npm install readable-stream

그런 다음 코드에서 Readable 클래스를 가져와 새 ReadableStream 개체를 만드는 데 사용할 수 있습니다.

const {Readable} = require('readable-stream');

.getReader()를 사용하는 ReadableStream의 예

다음은 ReadableStream을 생성하고 .getReader() 메서드를 사용하여 데이터를 읽는 예입니다.

이 예에서 start 메서드는 setTimeout 함수를 사용하여 100밀리초마다 새 값을 스트림에 비동기식으로 푸시합니다.

이 코드는 0에서 시작하여 99로 끝나는 일련의 숫자를 생성하는 ReadableStream을 생성합니다. 스트림은 스트림이 데이터 읽기를 시작할 준비가 될 때마다 호출되는 start 메서드를 사용하여 생성됩니다.

.getReader() 메서드는 reader 개체를 가져오는 데 사용되며, 그런 다음 async 함수에서 사용되어 스트림에서 데이터를 읽습니다. .read() 메서드는 루프에서 반복적으로 호출되며 반환된 객체의 done 속성이 true일 때 루프가 종료되어 스트림이 닫혔음을 나타냅니다.

// const { Readable } = require("readable-stream");

const stream = new ReadableStream({
  start(controller) {
    let i = 0;
    function push() {
      controller.enqueue(i++);
      if (i < 100) {
        setTimeout(push, 100);
      } else {
        controller.close();
      }
    }
    push();
  },
});

const reader = stream.getReader();

(async function read() {
  while (true) {
    const {value, done} = await reader.read();
    if (done) {
      break;
    }
    console.log(value);
  }
})();

출력:

Fetch API를 사용하는 ReadableStream의 예

다음은 ReadableStream을 사용하는 또 다른 예입니다. 이번에는 Fetch API를 사용하여 원격 리소스에서 데이터를 읽습니다.

이 예제에서는 fetch 기능을 사용하여 원격 리소스를 요청하고 Response 개체를 가져옵니다. Response 개체에는 ReadableStream인 body 속성이 있으며 응답에서 데이터를 읽는 데 사용할 수 있습니다.

그런 다음 .getReader() 메서드를 사용하여 reader 개체를 가져오고 이전 예제와 동일한 async 함수를 사용하여 스트림에서 데이터를 읽습니다. 이때 읽히는 데이터는 서버에 있는 file.txt 파일의 내용입니다.

const {Readable} = require('readable-stream');

(async function read() {
  const response = await fetch("http://example.com/file.txt");
  const stream = response.body;
  const reader = stream.getReader();

  while (true) {
    const { value, done } = await reader.read();
    if (done) {
      break;
    }
    console.log(value);
  }
})();

출력: