Blob

JavaScript에서 대용량의 이진 데이터를 다루기 위해 사용된다. 파일, 이미지, 텍스트 등의 데이터를 이진 형식으로 표현할 수 있으며, 특히 파일 업로드나 다운로드, 그리고 데이터 송수신 작업 등에 사용된다.

주요 특징:

• 데이터의 크기와 형식: Blob 객체는 임의의 바이트 배열로 데이터를 저장한다. 텍스트, 이미지, 비디오, 오디오 등 다양한 데이터를 포함할 수 있다.
• MIME 타입: Blob 객체를 생성할 때 MIME 타입을 지정할 수 있다. 이 MIME 타입은 해당 데이터가 어떤 형식인지를 나타내며, 예를 들어 application/json, image/png, text/plain 등이 있다.

Blob 생성

Blob 생성자는 새로운 Blob 객체를 반환한다.

생성 시 인수로 array와 options을 받습니다.

const newBlob = new Blob(array, options?)

array : ArrayBuffer, ArrayBufferView, Blob, USVString 또는 이 값들을 혼합해 구성한 Array 이다. Blob의 데이터를 구성하게 된다

option

• type : Blob에 저장할 데이터의 MIME 유형. 기본 값은 빈 문자열('').

const array = ['<a id="a"><b id="b">hey!</b></a>']; // 하나의 DOMString을 포함한 배열
const blob = new Blob(array, { type: "text/html" }); // 생성한 블롭

프로젝트에 적용한 사례

위와 같은 형식으로 POST 요청을 보낼 때 이미지를 담는 photos 와 사용자 입력값을 받는 JSON 형태의 postRequest 를 body 로 보내야했다.

formData에 postRequest 키 값을 가진 데이터를 담아서 보냈다.

const postRequestData = new Blob(
  [
    JSON.stringify({
      kakaoId: "12345",
      title: "제목",
      content: "설명",
      category: "카테고리",
      hashtags: ["태그"],
    }),
  ],
  { type: "application/json" }
);

const response = await fetch(API_PATH.createPost(), {
  method: "POST",
  headers: {
    Authorization: `Bearer ${accessToken}`,
  },
  body: formData,
});

요약

Blob은 JavaScript에서 대용량의 이진 데이터를 효율적으로 처리하고 다루기 위한 객체다. 이 객체는 데이터를 전송하거나 저장할 때 사용되며, 특히 파일 처리와 네트워크 통신에서 유용하다.