[JavaScript] URL.createObjectURL, URL.revokeObjectURL [6/5 study]

 

 

URL.createObjectURL, URL.revokeObjectURL

 

 

 

 

사용자가 업로드한 파일을 미리보기하거나, 서버에서 받은 데이터를 로컬에서 처리할 때 유용한 두 가지 메서드 URL.createObjectURL, URL.revokeObjectURL에 대해 설명하겠습니다!

 

❗️URL.createObjectURL

URL.createObjectURL 메서드는 File, Blob, MediaSource 객체를 가리키는 임시 URL을 생성합니다.

이 URL을 통해 해당 객체에 쉽게 접근할 수 있으며, 웹 애플리케이션에서 이미지, 동영상, 오디오 등의 미디어 파일을 미리보기할 때 유용하게 사용할 수 있습니다.

 

예제

// 파일 입력 요소에서 파일을 선택할 때
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const objectURL = URL.createObjectURL(file);
  
  // 생성된 URL을 이미지 요소의 src로 설정하여 미리보기
  const img = document.createElement('img');
  img.src = objectURL;
  document.body.appendChild(img);
});

 

위 예제에서 input 요소를 통해 파일을 선택하면, URL.createObjectURL을 사용하여 선택된 파일을 가리키는 URL을 생성합니다. 이 URL을 이미지 태그의 src 속성에 설정하면 브라우저에서 파일의 내용을 미리보기할 수 있습니다.

 

❗️URL.revokeObjectURL

 

URL.createObjectURL을 사용하여 생성된 URL은 브라우저가 관리하는 메모리 공간을 차지합니다. 

따라서 사용이 끝난 URL은 URL.revokeObjectURL을 통해 해제해야 메모리 누수를 방지할 수 있습니다.

(사용하게 된다면 꼭 같이 사용해야 합니다!)

 

예제

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const objectURL = URL.createObjectURL(file);
  
  const img = document.createElement('img');
  img.src = objectURL;
  document.body.appendChild(img);
  
  // 일정 시간 후에 URL을 해제하여 메모리 누수 방지
  setTimeout(() => {
    URL.revokeObjectURL(objectURL);
  }, 10000); // 10초 후에 URL 해제
});

 

위 예제에서는 파일 미리보기 후 10초가 지나면 URL.revokeObjectURL을 호출하여 생성된 URL을 해제합니다. 

이렇게 하면 브라우저가 더 이상 해당 URL을 가리키는 파일 데이터를 메모리에 유지하지 않게 됩니다.

 

🔥마무리

공부하면서 미리보기를 구현해보게 되면서 처음 알게 된 메서드인데 더 알아보고 싶어서 공부하다가 포스팅 하면 좋겠다 생각해서 올려봤습니다! 오늘도 화이팅!!