Binary Large Object - Blob이란?

 

 

안녕하세요?

 

오늘은 Blog을 이해하지 못하시는 분들을 위해 간단하게 알아보는 시간을 가졌습니다.

---

** 목 차 **

• 시작하기 전에
• Blob이란 무엇인가요?
• Blob의 사용 방법
  • 데이터 다운로드
  • 데이터 업로드
• responseType 프로퍼티

---

시작하기 전에

어제 파일을 다루는 구현 중에, GitHub Copilot이 다음과 같은 제안을 했는데요.

const config = {
  headers: { "content-type": "multipart/form-data" },
  responseType: "blob",
};
try {
  const res = await this.axios.post(
    "/api/export_file",
    formData,
    config
  );
  const url = window.URL.createObjectURL(new Blob([res.data]));

 

이 제안은 JavaScript에서 바이너리 데이터를 다룰 때 사용되는 기능입니다.

 

Copilot이 제안해 준 것이기 때문에, 이 기능들이 정확히 어떤 역할을 하는지 이해하지는 못했는데요.

 

그래서 아래와 같이 복습하는 겸 공부한 걸 글로 남겨 봅니다.

---

Blob이란 무엇인가요?

Blob은 Binary Large Object의 약자로, JavaScript의 네이티브 형식이 아닌 데이터를 나타내는 데 사용됩니다.

 

간단히 말하면, Blob은 이미지, zip 파일, 오디오 파일 등 다양한 유형의 데이터를 처리하는 데 사용됩니다.

 

Blob의 특성 중 하나는 불변성입니다.

 

Blob이 불변(immutable)하다는 것은 Blob이 생성된 후에는 해당 내용(바이너리 데이터)을 변경할 수 없다는 의미입니다.

 

Blob 객체가 한 번 생성되고 특정 데이터(예: 이미지 또는 파일)를 보유하게 되면 해당 데이터는 읽기 전용이 됩니다.

 

이로써 잘못된 데이터 변경이나 손상의 위험이 줄어듭니다.

 

Blob이 불변하기 때문에 저장된 데이터를 변경하려면 새로운 Blob에 변경 사항을 추가해야 합니다.

 

예를 들어 기존 텍스트 데이터에 추가할 때 원래 Blob에 추가하는 대신 새로운 Blob을 만듭니다.

const original = new Blob(["Hello"], {type: "text/plain"});
// 원본 Blob에 추가하는 대신 새로운 Blob을 만듦
const updated = new Blob([originalBlob, ", world"], {type: "text/plain"});

 

WEB API에서 데이터를 보유하는 역할을 하는 Blob 클래스가 구현되어 있습니다.

 

Blob은 WEB API의 File을 상속하며, 다음과 같은 속성을 가지고 있습니다.

• 데이터 크기
• MIME 타입

const blob = new Blob(["Hello, world!"], {type : 'text/plain'});
console.log(blob.size);
console.log(blob.type);

 

이 예시에서 blob.size는 바이트 단위로 Blob의 크기를 반환하고, blob.type은 Blob의 MIME 타입을 반환합니다. 이 경우 'text/plain'입니다.

 

이 Blob의 바이너리 데이터는 File API를 통해서만 접근될 수 있도록 설계되었습니다.

 

참고 문헌 링크
https://developer.mozilla.org/ko/docs/Web/API/Blob
https://developer.mozilla.org/ko/docs/Web/API/File

---

Blob의 사용 방법

Blob은 주로 두 가지 목적으로 사용됩니다.

1. 데이터 다운로드
2. 데이터 업로드

데이터 다운로드

Blob에 대해 다운로드 가능한 링크를 생성하고 싶다면, URL.createObjectURL() 메서드를 사용할 수 있습니다.

 

이 메서드는 Blob 객체에서 생성된 임시 URL을 만듭니다.

 

이 URL은 브라우저가 이해할 수 있는 형식으로 Blob의 내용을 가리키며, 다운로드 링크 등에 사용할 수 있습니다.

const blob = new Blob(["Hello, world"], {type: 'text/plain'});
const url = URL.createObjectURL(blob);

 

생성된 URL은 예를 들어 <a> 태그의 href 속성에 설정하여 사용자가 클릭하여 다운로드할 수 있는 링크를 만드는 데 사용될 수 있습니다.

데이터 업로드

서버에 Blob을 업로드하려면 FormData API를 사용할 수 있습니다.

 

FormData 객체는 폼 데이터를 키-값 쌍으로 보유하고 서버로 전송하기 위한 것입니다.

const blob = new Blob(["Hello, world!"], {type: 'text/plain'});
const formData = new FormData();

formData.append('file', blob, 'uploaded.txt');

fetch('/upload', {method: 'POST', body: formData});

 

이 예시에서는 새로운 FormData 객체를 만들고 'file'로 blob을 추가하고 있습니다.

 

'uploaded.txt'는 서버에서 볼 파일 이름입니다.

 

그런 다음 fetch API를 사용하여 '/upload' 엔드포인트로 POST 요청을 보내고 있습니다.

---

responseType 프로퍼티

responseType은 서버로부터의 응답 데이터 형식을 지정하는 데 사용됩니다.

 

특히 비동기 통신을 하는 웹 애플리케이션에서 중요한 설정입니다.

 

responseType을 명시적으로 지정하면 응답 데이터를 받을 때의 동작을 제어할 수 있습니다.

const config = {
  headers: { "content-type": "multipart/form-data" },
  responseType: "blob",  // Blob 데이터를 응답으로 기대
};

try {
  const res = await axios.post("/api/export_file", formData, config);
  const url = window.URL.createObjectURL(new Blob([res.data]));
  // Blob 데이터로부터 생성된 URL을 사용하여 다운로드 링크 생성
} catch (error) {

 

이 예시에서는 파일을 다운로드하기 위한 POST 요청을 서버로 보내고 있습니다.

 

responseType: "blob"으로 설정함으로써 Axios는 응답을 바이너리 데이터로 처리하는 Blob 객체로 취급합니다.

 

이를 통해 csv나 excel 파일과 같은 바이너리 데이터를 포함한 응답을 적절하게 처리할 수 있습니다.

 

만약 이 설정을 하지 않았다면, 바이너리 데이터가 예상하지 않은 형식으로 해석되어 "파일이 손상되어 열 수 없습니다"와 같은 메시지가 표시될 수 있습니다.

 

지금까지 간단하게 Blog에 대해 알아봤는데요.

 

많은 도움이 됐으면 합니다.

 

그럼.