JavaScript Academy · 강의

Blob과 객체 URL

다운로드에 사용할 Blob URL을 만들고 사용합니다.

Blob과 객체 URL은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

블롭이란 무엇인가요

블롭(이진 대형 객체)은 파일 콘텐츠처럼 메모리에 저장되는 변경 불가능한 원시 데이터를 나타냅니다. 파일은 이름과 수정 날짜가 있는 특별한 종류의 블롭입니다.

블롭을 사용하면 브라우저에서 이진 데이터를 만들고, 잘라 내고, 다운로드할 수 있습니다.

블롭 만들기

문자열, 버퍼, 다른 블롭과 같은 여러 부분의 배열과 MIME type을 지정하는 옵션 객체로 블롭을 만듭니다.

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

console.log(blob.size);
console.log(blob.type);

여러 부분으로 블롭 만들기

부분 배열은 순서대로 연결됩니다. 문자열과 형식화 배열을 섞어 사용할 수 있습니다.

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

블롭 다시 읽기

블롭은 콘텐츠를 읽을 수 있는 프라미스 기반 메서드 text(), arrayBuffer(), stream()을 제공합니다.

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

블롭 잘라 내기

blob.slice(start, end)는 원본 전체를 복사하지 않고 원본의 일부를 포함하는 새 블롭을 반환합니다. 분할 업로드에 유용합니다.

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

객체 URL 만들기

URL.createObjectURL(blob)은 메모리에 있는 블롭을 가리키는 짧은 수명의 URL을 반환합니다. 이를 img.src, 링크 href 또는 동영상 소스로 사용할 수 있습니다.

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

console.log(url.startsWith('blob:'));

업로드된 이미지 미리 보기

선택한 파일을 객체 URL로 변환하고 이미지 요소에 할당하면 서버 왕복 없이 즉시 미리 보기를 표시할 수 있습니다.

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

다운로드 시작하기

블롭을 만들고 객체 URL을 생성한 다음 download 속성이 있는 임시 앵커를 클릭해 생성된 파일을 저장합니다.

function download(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

download('report data', 'report.txt');

객체 URL 해제하기

객체 URL은 URL.revokeObjectURL(url)을 호출할 때까지 블롭을 메모리에 유지합니다. 메모리 누수를 방지하려면 사용이 끝난 후 항상 해제하세요.

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

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

블롭과 JSON

데이터를 문자열로 변환해 올바른 MIME 형식의 블롭에 넣으면 다운로드 가능한 JSON 파일을 만들 수 있습니다.

const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});

console.log(blob.type);
console.log(blob.size + ' bytes');

블롭이 중요한 이유

블롭과 객체 URL을 사용하면 클라이언트 측에서 이진 데이터를 전부 처리할 수 있습니다. 업로드를 미리 보고, 다운로드를 생성하고, 큰 파일을 여러 부분으로 나눌 수 있습니다. 작업이 끝나면 URL을 해제해야 한다는 점을 기억하세요. 다음에는 fetch로 서버에 파일을 전송합니다.

const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);

간단히 확인하기

다운로드에 객체 URL을 사용한 후 메모리를 해제하려면 무엇을 호출해야 하나요?

복습: 블롭과 객체 URL

이진 데이터를 처리하는 방법을 배웠습니다.

new Blob(parts, { type })은 변경 불가능한 이진 데이터를 만듭니다.
text(), arrayBuffer()로 읽고, slice()로 나눕니다.
URL.createObjectURL은 미리 보기와 다운로드에 사용할 수 있는 blob: URL을 만듭니다.
작업이 끝나면 항상 URL.revokeObjectURL을 호출해 메모리를 해제합니다.

자주 묻는 질문

“Blob과 객체 URL” 강의는 무료인가요?

네 — “Blob과 객체 URL” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Blob과 객체 URL”에서 뭘 배우나요?

다운로드에 사용할 Blob URL을 만들고 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“Blob과 객체 URL” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기