JavaScript Blob 객체란?
Blob(Binary Large Object) 객체는 JavaScript에서 변경 불가능한(immutable) 원시 데이터(raw data)를 표현하는 데 사용되는 객체입니다. 일반적인 파일(File) 객체처럼 Blob 역시 size(크기)와 type(MIME 타입) 속성을 가지고 있습니다.
특히 주목할 점은 File 객체가 사실상 Blob 객체에서 파생된(derived) 형태라는 것입니다. 따라서 File 객체가 사용되는 대부분의 상황에서 Blob 객체도 동일하게 활용할 수 있습니다.
Blob 객체의 주요 특징
- 불변성(Immutable): 한 번 생성된 Blob의 데이터 내용은 직접 수정할 수 없습니다.
- size 속성: Blob에 저장된 데이터의 크기를 바이트(byte) 단위로 반환합니다.
- type 속성: 저장된 데이터의 MIME 타입(예: text/plain, image/png 등)을 나타냅니다.
- File과의 관계: File은 Blob을 기반으로 하며, 파일 이름·수정 시간 등 추가 정보를 제공합니다.
예제 코드
다음은 JavaScript에서 Blob 객체를 생성하고, 해당 객체의 type과 size 속성을 화면에 출력하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result{
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Blob object in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to create and display a blob object</h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
let blob = new Blob(["This is a sample blob"], { type: "text/plain" });
resEle.innerHTML = "blob.type = " + blob.type + "<br>";
resEle.innerHTML += "blob.size = " + blob.size;
});
</script>
</body>
</html>코드 설명
new Blob(["This is a sample blob"], { type: "text/plain" }): 문자열 배열을 데이터로 받아 새로운 Blob 객체를 생성하고, MIME 타입을text/plain으로 지정합니다.blob.type: 생성된 Blob의 MIME 타입을 반환합니다.blob.size: Blob에 담긴 문자열의 바이트 크기를 반환합니다.
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면, 새로 생성된 Blob 객체의 type과 size 값이 결과 영역에 출력됩니다.
이처럼 Blob 객체는 이미지, 오디오, 텍스트 등 다양한 형태의 원시 데이터를 메모리에서 손쉽게 다룰 수 있게 해주며, 파일 업로드·다운로드 처리나 URL.createObjectURL()을 통한 임시 URL 생성 등 웹 개발에서 폭넓게 활용됩니다.