URL.createObjectURL이란?
URL.createObjectURL은 JavaScript에서 제공하는 함수로, Blob 또는 File 객체를 메모리에서 URL로 변환해주는 역할을 합니다. 이를 통해 우리는 Blob 데이터를 다루기 쉬운 URL 형태로 변환하고, 웹 페이지에 표시하거나 다운로드 링크로 사용할 수 있습니다.
예제: 이미지 미리보기
가장 먼저, 이미지 파일을 Blob으로 만들고 이를 URL로 변환하여 이미지를 웹 페이지에 표시하는 예제를 살펴보겠습니다.
// 이미지 파일 가져오기
const imageFile = document.querySelector('#image-file').files[0];
// Blob으로 이미지 파일 생성
const blob = new Blob([imageFile], { type: 'image/jpeg' });
// Blob을 URL로 변환
const imageUrl = URL.createObjectURL(blob);
// 이미지를 표시할 img 엘리먼트 생성
const img = document.createElement('img');
img.src = imageUrl;
// 웹 페이지에 이미지 추가
document.body.appendChild(img);위 예제에서는 HTML의 <input type=”file”> 요소를 사용하여 이미지 파일을 선택하고, 선택한 파일을 Blob으로 만들어서 URL로 변환한 다음 이미지를 웹 페이지에 추가합니다.
예제: 다운로드 링크 생성
이번에는 Blob을 URL로 변환하여 다운로드 링크를 생성하는 예제를 살펴보겠습니다.
// 다운로드할 데이터를 Blob으로 만들기 (텍스트 파일 예제)
const data = 'Hello, World!';
const blob = new Blob([data], { type: 'text/plain' });
// Blob을 URL로 변환
const downloadUrl = URL.createObjectURL(blob);
// 다운로드 링크 생성
const downloadLink = document.createElement('a');
downloadLink.href = downloadUrl;
downloadLink.download = 'example.txt';
downloadLink.textContent = 'Download Text File';
// 웹 페이지에 다운로드 링크 추가
document.body.appendChild(downloadLink);위 예제에서는 텍스트 데이터를 Blob으로 만들어서 URL로 변환한 다음, 이를 사용하여 다운로드 링크를 생성하고 웹 페이지에 추가합니다. 사용자는 “Download Text File” 링크를 클릭하여 텍스트 파일을 다운로드할 수 있습니다.
URL 해제하기: 메모리 누수 방지
URL.createObjectURL로 생성된 URL은 메모리를 사용하므로 사용이 끝난 후에는 반드시 해제해야 합니다. 해제하지 않으면 메모리 누수가 발생할 수 있습니다. URL을 해제하는 방법은 간단합니다.
URL.revokeObjectURL(url);URL.revokeObjectURL 함수를 사용하여 URL을 해제하면 해당 URL과 연결된 메모리 자원이 해제되어 메모리 누수를 방지할 수 있습니다.
결론
URL.createObjectURL 함수는 JavaScript에서 Blob 또는 File 객체를 메모리에서 URL로 변환하여 사용할 수 있도록 도와주는 강력한 도구입니다. 이를 통해 웹 애플리케이션에서 파일 다운로드, 이미지 미리보기, 동영상 및 오디오 재생 등 다양한 미디어 관련 작업을 보다 효과적으로 수행할 수 있습니다. 그러나 URL을 해제하는 것을 잊지 않고 사용하도록 주의해야 합니다.