끄적끄적 코딩
article thumbnail
Published 2024. 3. 18. 01:50
Compression Streams API 카테고리 없음

Compression Streams API

gzip 또는 deflate 형식을 사용하여 데이터 스트림을 압축 및 압축 해제 할 수 있는 JavaScript API를 제공

파일 압축, HTTP 응답 압축에 많이 사용

표준 HTTP 응답

압축된 HTTP 응답

deflate

허프만 코딩 알고리즘의 조합을 사용하여 데이터를 압축

gizp

deflate 알고리즘을 사용하여 데이터를 압축
gzip은 추가적인 헤더와 풋터를 포함하여, 파일 이름, 타임스탬프 등의 메타데이터를 저장
호환성, 안정성이 높음

  1. 문자열을 UTF-8 바이트 배열로 인코딩합니다.
  2. 인코딩된 데이터를 ReadableStream에 전달하여 스트림을 생성합니다.
  3. 생성된 스트림을 CompressionStream을 통해 파이프하여 gzip으로 압축합니다.
  4. 압축된 데이터 스트림을 읽어서, Blob 객체로 변환합니다.
  5. 최종적으로 Blob을 ArrayBuffer로 변환하고, 이를 Uint8Array로 변환하여 Base64 문자열로 인코딩하여 반환합니다.

TextEncoder

문자열을 UTF-8 형식의 바이트 배열로 인코딩하는데 사용합니다.

ReadableStream

바이트 데이터를 압축 스트림으로 전달하는 데 사용합니다.

inputStream.pipeThrough(new CompressionStream('gzip'))

생성된 inputStream을 CompressionStream을 통해 파이프합니다

CompressionStream('gzip')

gzip 알고리즘을 사용하여 데이터를 압축합니다.

Blob

압축된 데이터 스트립을 읽어서, Blob 객체로 변환합니다.

ArrayBuffer

Blob 내의 바이너리 데이터에 접근할 수 있게 해줍니다.

Unit8Array

바이너리 데이터를 개별 바이트 단위로 접근하고 조작할 수 있게 해줍니다.

btoa

바이너리 데이터를 base64 (문자열 타입)로 인코딩하는 작업을 합니다.

  • Stream
    • 스트림은 데이터의 연속적인 흐름을 나타내며, 특히 큰 데이터를 다룰 때 유용합니다.
    • 스트림을 사용하면 데이터를 한 번에 전부 읽지 않고, 작은 부분(청크)으로 나누어 순차적으로 처리할 수 있습니다.
    • 메모리 사용량을 줄이고, 데이터의 첫 부분을 빠르게 처리할 수 있게 해줍니다.
      !<https://cloud.githubusercontent.com/assets/2888775/13210627/65b881e4-d974-11e5-8f75-204f63fb88a0.gif>
    
  • Chunk
    • 청크는 스트림을 통해 전송되는 데이터의 작은 조각을 말합니다.
    • 스트림에서 데이터를 처리할 때, 전체 데이터를 한 번에 처리하는 것이 아니라 청크 단위로 나누어 순차적으로 처리합니다.
    • 효율적인 데이터 처리를 가능하게 하며, 특히 대용량 데이터를 다룰 때 메모리 부담을 줄여줍니다.
  • Blob
    • 대량의 바이너리 데이터를 나타내는 데 사용되는 객체입니다.
    • 파일 시스템의 파일이나, 대용량의 이미지 데이터 등 바이너리 형식의 데이터를 웹 애플리케이션에서 다룰 때 사용됩니다.
    • 블롭은 불변(immutable)하며, 바이너리 데이터를 효과적으로 저장하고 전송하는 방법을 제공합니다.
  • pipeThrough()
    • 스트림 API의 일부로, 한 스트림을 다른 스트림을 통과시켜 새로운 스트림을 생성하는 메서드


참조

https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API

https://www.linkedin.com/pulse/gzip-deflate-compression-samuel-akopyan/

https://stackoverflow.com/questions/7243705/what-is-the-advantage-of-gzip-vs-deflate-compression

https://rapidapi.com/guides/compression-streams-api

https://velog.io/@dusunax/File-Blob-ArrayBuffer-TypedArrayUint8Array

https://developer.mozilla.org/ko/docs/Web/API/Blob

검색 태그