ArrayBuffer, Blob

ArrayBuffer 객체

• 원시 바이너리 버퍼를 표현하는데 사용된다.
• 직접 내용을 수정하는것은 불가능하나, TypedArray/DataView를 생성해 내용을 읽거나 쓸수 있다.

Blob 객체

new Blob(["Hello, World!"], {type : "text/plain"})

1번째 인자 : 데이터들의 배열
2번째 인자 : MIME type

• 위와 같이 생성할수 있다.
• 첫번째 인자의 배열엔 아래 타입이 들어갈수 있다.
  • ArrayBuffer
  • TypedArray
  • DataView
  • Blob
  • String
  • 기타 등등..

프로퍼티/메서드

• size : Blob 객체가 참조하는 데이터의 크기
• type : Blob 객체가 참조하는 MIME 타입
• slice(start, end, contentType) : Blob의 start ~ end 까지를 잘라내어 특정 contenttype의 다른 blob으로 리턴

URL.createObjectURL()

• Blob이나 File객체에 대한 임시 URL을 생성할수 있다.
• 생성된 URL은 객체에 대한 참조로 사용될수 있고, 다운로드하거나 미리보기 하기 위해 사용될수 있다.
• 이는 메모리 객체에 대한 참조를 나차내며, 페이지를 새로고침 하거나 닫으면 사라진다.

생성되는 임시 url의 예시

blob:http://localhost:5173/0e92314d-78b8-4d65-8a2f-d1adb1649b5c

이를 이렇게 사용 가능하다.

<img src={blobUrl} alt="Any Image You Want from BLOB" className="h-auto w-full" />