Streams API
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2019년 1월.
* Some parts of this feature may have varying levels of support.
Experimental: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.
Streams API는 Javascript를 이용해 네트워크를 통해 전송된 데이터 스트림에 접근하여 원하는 대로 처리가 가능한 API를 제공합니다.
개념과 사용법
Streaming은 네트워크를 통해 받은 리소스를 작은 조각으로 나누어, Bit 단위로 처리합니다. 이는 브라우저가 수신한 자원을 웹페이지에 표현할 때 주로 사용하는 방법입니다. — Video buffer는 재생되기 전 천천히 채워지며 가끔 이미지도 천천히 로딩되는 것을 보실 수 있을 겁니다..
하지만 Javascript에서는 지금까지 불가능했습니다. 이전에는 (비디오나 텍스트 파일 등의) 리소스를 처리하기 위해서 우선, 전체 파일을 다운로드 받은 후 알맞은 포맷으로 파싱된 후에야, 전송된 전체 데이터를 처리할 수 있었습니다.
With Javascript에 Stream이 도입된 후에는 모든 것이 바뀌었는데, 이제 Buffer, String 또는 blob 없이도 Javascript를 통해 Raw Data를 비트 단위로 처리할 수 있습니다.
장점은 또 있습니다 — Stream의 시작 또는 종료를 감지할 수 있으며, 여러 stream을 엮어서 에러를 처리하거나 필요한 경우 stream을 취소할 수도 있습니다. 또한 stream이 읽어들이는 속도에 따라 반응할 수도 있지요.
Stream의 주요한 기본 사용법은 응답 데이터를 stream으로 만드는 것입니다. fetch()를 통해 정상적으로 전송된 응답 Body는 ReadableStream로 표현 가능합니다. 또한 ReadableStream.getReader()를 통해 Reader 객체를 얻어 데이터를 읽을 수도 있으며, ReadableStream.cancel()로 Stream을 취소하는 것 등이 가능합니다.
조금 더 복잡한 사용법은 ReadableStream() 생성자를 통해 사용자가 직접 Stream을 생성하는 것입니다. 예를 들자면 service worker에 전달할 데이터를 Stream으로 만들 수도 있습니다.
WritableStream을 사용하면 Stream에 데이터를 쓰는 것도 가능합니다..
참고 : Streams API concepts,