Blob과 File API 완벽 가이드 - 자바스크립트 파일 처리의 모든 것
웹 애플리케이션에서 이미지 업로드, PDF 생성, 파일 다운로드 기능을 구현하려면 Blob과 File API에 대한 이해가 필수예요. 이 두 API는 브라우저에서 바이너리 데이터를 효율적으로 다루는 핵심 도구입니다.
Blob이란? 바이너리 데이터의 컨테이너
Blob(Binary Large Object)은 이미지, 비디오, 텍스트 등 모든 종류의 바이너리 데이터를 담는 불변 객체예요. 파일과 비슷하지만 메모리에만 존재하며, type(MIME 타입)과 size 속성을 가지고 있습니다.
// Blob 생성 기본 예제
const blob = new Blob(['Hello World'], { type: 'text/plain' });
console.log(blob.size); // 11
console.log(blob.type); // 'text/plain'Blob은 주로 서버에서 받은 데이터를 파일처럼 다루거나, Canvas에서 생성한 이미지를 다운로드할 때 사용해요. slice() 메서드로 특정 범위만 잘라낼 수도 있죠.
File API - 사용자가 선택한 파일 다루기
File 객체는 Blob을 상속받아 만들어졌으며, 사용자가 <input type="file">로 선택한 파일을 표현해요. Blob의 모든 속성에 더해 name, lastModified 같은 파일 메타데이터를 제공합니다.
// 파일 입력 처리
document.querySelector('#fileInput').addEventListener('change', (e) => {
const file = e.target.files[0];
console.log(file.name); // 파일명
console.log(file.size); // 바이트 단위 크기
console.log(file.type); // MIME 타입
console.log(new Date(file.lastModified)); // 수정일
});FileReader로 파일 내용 읽기
FileReader는 Blob이나 File의 내용을 비동기로 읽는 API예요. readAsDataURL(), readAsText(), readAsArrayBuffer() 등 다양한 메서드로 원하는 형식으로 데이터를 읽을 수 있습니다.
// 이미지 미리보기 구현
function previewImage(file) {
const reader = new FileReader();
reader.onload = (e) => {
document.querySelector('#preview').src = e.target.result;
};
reader.readAsDataURL(file);
}이미지 업로드 전 미리보기, CSV 파일 파싱, 대용량 파일 청크 단위 읽기 등 실무에서 자주 사용하는 패턴이에요.
실전 활용: Blob URL과 다운로드 구현
URL.createObjectURL()을 사용하면 Blob을 가리키는 임시 URL을 생성할 수 있어요. 이를 활용해 동적으로 생성한 데이터를 다운로드하는 기능을 구현할 수 있습니다.
// JSON 데이터를 파일로 다운로드
function downloadJSON(data, filename) {
const blob = new Blob([JSON.stringify(data, null, 2)],
{ type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url); // 메모리 해제
}Blob URL은 사용 후 반드시 revokeObjectURL()로 해제해야 메모리 누수를 방지할 수 있어요.
주의사항: 브라우저 호환성과 메모리 관리
구형 브라우저(IE10 이하)에서는 File API 일부 기능이 제한적이니 폴리필을 검토하세요. 대용량 파일 처리 시 slice()로 청크 단위로 나눠 처리하면 메모리 효율이 좋아지고, Blob URL은 사용 후 꼭 해제해야 합니다. 또한 File 객체는 보안상 경로 정보를 제공하지 않으므로, 파일명만으로 판단해야 해요.
결론
Blob과 File API는 현대 웹 개발에서 파일과 바이너리 데이터를 다루는 표준 방법이에요. 이미지 업로드, 파일 다운로드, Canvas 활용 등 다양한 시나리오에서 이 API들을 조합하면 네이티브 앱 수준의 UX를 구현할 수 있습니다. FileReader, Blob URL, FormData와 함께 사용하면 더욱 강력한 파일 처리 시스템을 만들 수 있으니, 실전 프로젝트에서 적극 활용해보세요.