들어가는 말
오늘은 Blob 에 대해서 알아보는 시간을 가져볼까 합니다. 이번에 보고서 정보를 CSV 파일로 변환하는 함수를 작성하게 되었는데, 해당 함수에서 Blob 를 사용했습니다. 사용하는 것과 별개로 해당 객체에 대해서 잘 모르고 있다는 것을 많이 느꼈고, 이에 대해서 알아보고 정리하는 시간을 가져봅니다.
Binary Large Object (BLOB) 는 뭘까요?
우선 Blob 은 무엇을 의미할까요? 이진 데이터 형식의 거대한 객체라는 것은 언어만 봐도 알 것 같은데, 우선 크게 두 유형으로 나눠봅니다.
컴퓨터 과학에서의 Blob
Blob는 데이터베이스 시스템에서 주로 사용되는 데이터 타입 중 하나입니다. 이미지, 오디오, 비디오 및 기타 멀티미디어 데이터를 저장할 수 있는 대용량 바이너리 데이터를 의미합니다. 구조화되지 않은 데이터로 간주되며, 일반적으로 텍스트나 숫자 데이터와 달리 직접 검색할 수 없습니다.
웹 개발에서의 Blob
웹 개발에서는 자바스크립트 및 웹 API에서 바이너리 데이터를 나타내기 위해 사용됩니다. 예를 들어, 파일 업로드나 다운로드, 데이터 스트림 처리를 위해 사용됩니다. Blob 객체는 주로 파일이나 이미지 데이터를 클라이언트 측에서 처리할 때 유용합니다. 흔히, 이미지 미리보기나 다운로드, 파일의 포맷 변경 등에 사용되고 있죠.
요약 하자면, 이미지, 오디오, 비디오와 같은 대용량 데이터를 형식과 관계없이 처리할 수 있는 비구조화 데이터로서, 파일업로드, 다운로드, 데이트 스트림 처리 등의 이진 데이터를 나타내기 위해 활용하는 객체 라고 볼 수 있겠습니다.
Blob를 사용하면 어떤 이점이??
Blob 를 사용 했을 때 이점을 몇 가지로 정리해보았습니다. 이진데이터 형식이 확실히 컴퓨터가 이해하는 데이터 형식(0과 1의 이진 데이터)에 본질적으로 가깝기 때문에 데이터 변환, 전송 등에 있어서 다양한 활용상 이점이 있는 것 같습니다.
대용량 바이너리 데이터 처리
Blob 객체는 텍스트뿐만 아니라 이미지, 비디오, 오디오 등 대용량 바이너리 데이터를 효율적으로 처리할 수 있습니다. 이는 특히 웹 애플리케이션에서 멀티미디어 데이터를 다룰 때 유용합니다.
파일 읽기 및 쓰기
Blob 객체를 사용하면 파일을 읽고 쓰는 작업이 쉬워집니다. File API와 함께 사용하면 사용자가 업로드한 파일을 쉽게 읽을 수 있고, 생성한 Blob 객체를 파일로 다운로드할 수 있습니다.
데이터 URL 변환
Blob 객체는 FileReader API를 사용하여 Base64 인코딩된 데이터 URL로 변환할 수 있습니다. 이를 통해 이미지를 웹 페이지에 미리보기하거나 데이터를 클라이언트 측에서 인코딩할 수 있습니다.
유연한 데이터 전송
Blob 객체는 FormData와 함께 사용되어 서버로 대용량 데이터를 전송할 수 있습니다. 이 방식은 파일 업로드를 간단하고 효율적으로 처리할 수 있게 합니다.
메모리 관리
Blob 객체는 큰 데이터를 처리하면서도 메모리를 효율적으로 관리할 수 있도록 도와줍니다. Blob 객체는 필요한 데이터만 메모리에 로드하고 나머지는 필요할 때 로드하는 방식으로 동작할 수 있어 메모리 사용량을 줄일 수 있습니다.
브라우저 호환성
Blob 객체는 대부분의 최신 브라우저에서 지원되며, 파일 및 바이너리 데이터 처리를 위한 표준 API로 자리잡고 있습니다. 이는 크로스 브라우저 호환성을 확보하는 데 도움이 됩니다.
스트리밍 데이터 처리
Blob 객체는 WebSocket이나 Fetch API를 통해 스트리밍 데이터를 처리할 수 있습니다. 이를 통해 실시간으로 데이터를 전송하거나 수신할 수 있어 실시간 애플리케이션 개발에 유용합니다.
이미지 및 멀티미디어 변환
Canvas API와 함께 사용하여 이미지 데이터를 Blob 객체로 변환하거나, Blob 객체를 이미지로 변환하는 작업이 가능합니다. 이를 통해 이미지 편집, 변환 및 저장 기능을 구현할 수 있습니다.
사례
이번에는 앞서 이점이나 개념상으로 살펴보았던 부분의 몇 가지 활용 사례를 살펴보겠습니다. 예시를 참고하셔서 평소 몰랐던 부분에서 활용할 수 있는 참고자료가 된다면 좋겠네요.
파일 다운로드
txt 파일 생성 및 다운로드
아래는 자바스크립트 코드 입니다. Blob 객체를 생성하고 사용하는 예제를 보여줍니다. .txt 포맷으로 변경하여 다운로드 하는 예시입니다.
// 텍스트 데이터를 Blob 객체로 변환
let text = "Hello, world!";
let blob = new Blob([text], { type: "text/plain" });
// Blob 객체를 URL로 변환하여 다운로드 링크 생성
let url = URL.createObjectURL(blob);
let a = document.createElement("a");
a.href = url;
a.download = "hello.txt";
a.textContent = "Download hello.txt";
document.body.appendChild(a);
CSV 파일 생성 및 다운로드
아래는 제가 잔소리라는 개인 프로젝트에서 사용한 CSV 파일 변환 코드인데요, Blob 객체를 사용해 기존 자바스크립트 객체를 CSV 로 변환하여 다운로드하는 예시 자료로 두면 좋을 것 같아서 같이 넣어봅니다.
export interface ArrayToCsvProps {
(array:
{
date: string;
value: number
}[]
): string;
}
/** 배얼을 CSV 포맷으로 변경
* @description 첫 행을 객체 배열의 key 인 date, value 으로 구분하고, 두 번째 행부터 date, value 의 각 셀을 한 묶으로 개행하며 배치
*/
export const arrayToCSV: ArrayToCsvProps = (array) => {
const headers = Object.keys(array[0])
.join(',')
.replace('value', 'value(단위: $)');
const rows = array.map((obj) => Object.values(obj).join(',')).join('\n'); // date, value을 하나의 쌍으로 개행하며 배치
return `${headers}\n${rows}`;
};
/** CSV 파일 생성 */
export const createCsvFile = (csvForamtData: string) => {
return new Blob([csvForamtData], { type: 'text/csv;charset=utf-8' });
};
/** 생성한 CSV 다운로드 */
export const download = (blob: Blob, fileName: string) => {
const url = URL.createObjectURL(blob); // ex) blob:url 형태
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();
URL.revokeObjectURL(url); // 다운로드 후 삭제
};
이미지 처리
이미지 처리와 관련해서는 자바스크립트 기준으로 3 가지 예시를 소개해보겠습니다.
파일 입력에서 이미지를 읽고 미리보기
우선, 이 예제에서는 사용자가 파일 입력을 통해 이미지를 선택하면, 해당 이미지를 Blob 객체로 변환하고, 이를 URL.createObjectURL을 사용하여 미리보기 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Image Preview</title>
</head>
<body>
<input type="file" id="fileInput" accept="image/*" />
<img id="imagePreview" width="300" />
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
let file = event.target.files[0];
if (file) {
let blob = new Blob([file], { type: file.type });
let url = URL.createObjectURL(blob);
document.getElementById('imagePreview').src = url;
}
});
</script>
</body>
</html>
Canvas를 사용하여 이미지를 Blob으로 변환하고 다운로드
이 예제에서는 이미지를 Canvas에 그린 후, 해당 Canvas의 내용을 Blob 객체로 변환하고, 이를 사용자가 다운로드할 수 있도록 합니다. 저 같은 경우에는 명언 카드를 만들고, 이를 다운로드할 때 사용했던 기억이 있네요.
<!DOCTYPE html>
<html>
<head>
<title>Canvas to Blob</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<button id="downloadBtn">Download as PNG</button>
<script>
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
// 임의의 이미지 그리기 (원, 사각형 등)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 200, 200);
ctx.fillStyle = 'red';
ctx.arc(150, 150, 100, 0, Math.PI * 2);
ctx.fill();
document.getElementById('downloadBtn').addEventListener('click', function() {
canvas.toBlob(function(blob) {
let url = URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = 'canvas_image.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 'image/png');
});
</script>
</body>
</html>
이미지를 Blob으로 변환하여 서버로 업로드
이 예제에서는 사용자가 선택한 이미지를 Blob 객체로 변환한 후, FormData를 사용하여 서버로 업로드합니다.
<!DOCTYPE html>
<html>
<head>
<title>Image Upload</title>
</head>
<body>
<input type="file" id="fileInput" accept="image/*" />
<button id="uploadBtn">Upload</button>
<script>
let selectedFile;
document.getElementById('fileInput').addEventListener('change', function(event) {
selectedFile = event.target.files[0];
});
document.getElementById('uploadBtn').addEventListener('click', function() {
if (selectedFile) {
let formData = new FormData();
let blob = new Blob([selectedFile], { type: selectedFile.type });
formData.append('file', blob, selectedFile.name);
fetch('/upload', {
method: 'POST',
body: formData
}).then(response => response.text())
.then(result => console.log(result))
.catch(error => console.error('Error:', error));
} else {
alert('Please select a file first.');
}
});
</script>
</body>
</html>
Blob을 데이터 URL로 변환
Blob 객체를 읽어서 Base64 데이터 URL로 변환할 수 있습니다. 아래 예시에는 FileReader 의 인스턴스가 보유하고 있는 readAsDataURL 메소드에 blob 객체를 넘겨주니, 해당 blob 를 기반으로 Base64 형식의 URL 로 변환하여 출력해주고 있는 것을 볼 수 있습니다.
let blob = new Blob(["Hello, world!"], { type: "text/plain" });
let reader = new FileReader();
reader.onloadend = function() {
let base64data = reader.result;
console.log(base64data); // data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==
};
reader.readAsDataURL(blob);
기타 용도
"Blob"라는 단어는 그 자체로 비정형적이고 형태가 없는 큰 덩어리를 의미하기도 합니다. 이 용어는 특정한 형식이나 구조 없이 큰 데이터나 객체를 설명하는 데 사용될 수 있습니다. 애초에 이름에 바이너리(Binary) 가 들어가 있으니 당연한 소리겠네요.
WebSocket을 통해 바이너리 데이터 전송
Blob 객체를 WebSocket을 통해 전송할 수도 있습니다. 이를 통해 실시간 데이터 스트림을 구현하는데에도 이점이 있을 것 같습니다.
let socket = new WebSocket("ws://example.com/socket");
socket.onopen = function() {
let blob = new Blob(["Hello, WebSocket!"], { type: "text/plain" });
socket.send(blob);
};
socket.onmessage = function(event) {
console.log("Received:", event.data);
};
활용 방법은 무수히 많겠지만, 대략적으로 알아볼 수 있는 몇 가지 활용 예시를 살펴보았습니다.
나가는 말
오늘은 Blob 객체에 대해서 간략하게 알아보는 시간을 가져보았습니다. 이를 어떻게 활용하느냐에 따라서 정말 멋진 기능을 구현하는데 재밌게 사용할 수 있겠다는 생각이 듭니다.
여러분은 해당 객체를 보시면서 어떤 활용 방법이 떠오르셨나요? 이 글이 좋은 참고가 되었길 바라며 이만 글을 줄여보겠습니다. 감사합니다.
참고 하면 좋은 자료
w3c blob-section: https://www.w3.org/TR/FileAPI/#blob-section
Written by Heechan 기술블로그 : https://medium.com/hcleedev/web-javascript-blob-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-9140146e87a8
MDN Blob : https://developer.mozilla.org/ko/docs/Web/API/Blob/Blob , https://developer.mozilla.org/ko/docs/Web/API/Blob
'단순용어정리' 카테고리의 다른 글
| [단순용어] 캐시메모리/캐시 히트/캐시 미스 (0) | 2023.04.11 |
|---|---|
| [단순용어] LF와 CR (0) | 2023.04.10 |
| [단순용어] ECMA - 262 (0) | 2023.03.28 |
| [단순용어] 스택 오버플로우/정수 오버플로우/버퍼 오버런 (0) | 2023.03.15 |
| [단순용어] 쿠키와 세션 (0) | 2023.03.11 |