[Javascript] Blob, ArrayBuffer, TypedArray(Uint8Array)

Blob, Binary Large Object

Blob은 이진 데이터(binary data)를 다룹니다. Blob은 대형 이진 객체(Binary Large Object)를 의미하며 일련의 데이터를 처리하거나 간접 참조하는 객체입니다
Blob은 대개 바이트의 크기를 알아내거나 해당 MIME 타입이 무엇인지 요청하며, 데이터를 작은 Blob으로 잘게 나누는 등의 작업에 사용됩니다

 

"즉, 데이터 자체라기보다는 데이터를 간접적으로 접근하기 위한 객체인 것입니다"

 

Blob은 웹에서 사용되는 데이터 형식으로, 이진 데이터를 나타내며, 텍스트, 이미지, 오디오, 비디오 등 다양한 형식을 지원합니다예를 들면, 이미지나 동영상 같은 큰 파일들을 메모리에 효율적으로 저장하고 전송할 수 있게 해주는 역할을 합니다.

주로 파일 업로드, 이미지 프로세싱, 미디어 처리 등에서 사용됩니다.

 

• Blob 객체는 읽기 전용입니다.
• 속성과 메서드를 제공하여, 파일에 대한 작업을 수행할 수 있습니다.

메서드	설명
Blob.slice()	Blob의 일부를 잘라내어 새로운 Blob을 생성
Blob.arrayBuffer()	Blob을 ArrayBuffer 형식으로 비동기적으로 변환
Blob.text()	Blob을 텍스트로 비동기적으로 변환
Blob.stream()	Blob을  ReadableStream 형태로 변환
Blob.stream().getReader()	ReadableStream으로부터 데이터를 읽을 Reader 객체를 반환

 

---

arrayBuffer

arrayBuffer는 ArrayBuffer객체를 반환하는 Promise를 반환하는 비동기적인 메서드입니다.

 

 

고정된 길이의 이진 데이터 버퍼

• ArrayBuffer는 고정된 길이의 이진 데이터 버퍼를 나타내는 JavaScript의 내장 객체입니다.
• ArrayBuffer의 크기(고정된 길이)는 생성할 때 지정됩니다.
  크기는 바이트 단위로 지정되며, 0 이상의 정수로 설정할 수 있습니다.
  예를 들어, new ArrayBuffer(16)은 16바이트 크기의 ArrayBuffer를 생성합니다.

 

이진 데이터 버퍼

• 이진 데이터 버퍼는 컴퓨터에서 이진 데이터를 저장하는 메모리의 일부분입니다.
  이진 데이터는 0과 1로 구성된 비트(bit)의 나열로 표현되는 데이터를 말합니다.
• 컴퓨터에서는 모든 데이터가 이진 형태로 저장되며, 숫자, 문자, 이미지, 오디오, 비디오 등 모든 유형의 데이터가 이진 데이터로 표현됩니다.

사용하는 이유

1. ArrayBuffer는 일반적으로 이진 데이터를 효율적으로 다루기 위해 사용됩니다.
   • 예를 들어, 이미지, 오디오, 비디오, 파일 등과 같은 바이너리 데이터는 ArrayBuffer를 사용하여 메모리에 할당된 버퍼에 저장됩니다.
     이를 통해 JavaScript는 바이너리 데이터를 처리하고 조작할 수 있습니다.
2. 파일이나 네트워크 요청 등에서 데이터를 비동기적으로 읽을 때 사용됩니다.
   • 일반적으로 FileReader와 함께 사용되며, 파일을 비동기적으로 읽은 후 ArrayBuffer로 변환하여 다양한 작업을 수행할 수 있습니다. 
     • 이진 데이터:
       • 저장과 처리 목적을 위해 이진 형식으로 인코딩 된 데이터 파일입니다.
       • 숫자, 문자, 이미지, 오디오, 비디오 등 모든 종류의 데이터를 포함할 수 있습니다.
       raw 파일:
       • 특정 파일 형식의 헤더나 압축 등의 처리를 거치지 않고 그대로 저장한 순수한 이진 데이터 파일입니다.
       • 주로 이미지, 오디오, 비디오 등의 바이너리 데이터를 저장하기 위해 사용됩니다.

 

Blob.arrayBuffer()

arrayBuffer는 ArrayBuffer 객체를 반환하는 Promise를 반환합니다.

const buffer = await file.arrayBuffer();

다만 비동기로 받은 ArrayBuffer는 콘솔에서는 확인할 수 없습니다.

 

console에서 arrayBuffer를 확인할 수 없는 이유

콘솔에서 arrayBuffer를 직접 출력하면 예상한 결과가 표시되지 않는 이유는 arrayBuffer가 바이너리 데이터를 포함하는 특수한 형식이기 때문입니다. arrayBuffer는 일련의 바이트로 이루어진 버퍼로서 텍스트로 직접 해석하기 어렵거나 의미가 없는 이진 데이터를 포함할 수 있습니다.

• reader가 onload된 후, JSON.stringify를 통해 확인할 수 있습니다.

console.log("Buffer Stringify: ", JSON.stringify(unit8Buffer, null, 2));

 

---

 

Unit8Array

이유 A. 효율적인 메모리 사용

Uint8Array는 8비트 부호 없는 정수 값을 저장하기 위해 1바이트를 사용합니다.
본문 상단에서 정리했던 것과 같이, 다른 TypedArray는 더 큰 크기의 데이터를 저장하기 위해 더 많은 바이트를 사용하는 경우가 있습니다.
따라서, Uint8Array로 메모리 사용을 더 효율적으로 관리할 수 있습니다.

이유 B. 이미지 파일의 픽셀 데이터 표현

대부분의 이미지 파일은 8비트 픽셀 데이터로 구성되어 있습니다.

• Uint8Array는 8비트 부호 없는 정수를 다루는 TypedArray로서, 이미지 파일의 픽셀 데이터를 표현하기에 적합합니다.
• 이미지 파일은 픽셀 값들의 배열로 구성되어 있으며, 각 픽셀은 RGB 값(각 색상이 0~255) 또는 RGBA 값으로 표현됩니다.
  Uint8Array는 0부터 255까지의 값을 표현할 수 있기 때문에 픽셀 데이터를 정확하게 표현할 수 있습니다.

 

 

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-Base64-Blob-ArrayBuffer-File-%EB%8B%A4%EB%A3%A8%EA%B8%B0-%EC%A0%95%EB%A7%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%84%A4%EB%AA%85#

📁 Base64 / Blob / ArrayBuffer / File 다루기 총정리