Javascript createObjectURL, revokeObjectURL 🤥

javascript에서는 createObjectURL을 통해 Blob 객체를 나타낼 수 있습니다.

URL.createObjectURL 메소드를 사용하면 생성된 window의 document에서만 접근 가능한 url이 생성됩니다.

이를 통해 image를 입력받았을때 화면에 보여줄 수 있는 임시 url을 생성할 수 있습니다.

 

Blob(Binary large Object) 객체는 javascript에서 이미지, 영상, 멀티미디어 데이터를 다룰때 사용합니다.
createObjectUrl에 입력 가능한 (File, Blob, MediaSource)중 File은 Blob에 기반한 인터페이스 입니다.

input에 type을 file로 주면 입력받은 파일에 input.files 메소드를 통해 접근할 수 있습니다.
아래의 embedded 예제에서 보면 확인할 수 있습니다.

 

이 url은 다른 window에서는 접근이 되지 않습니다.

 

URL.revokeObjectURL을 통해 createObjectURL을 통해 생성된 Url을 폐기 시킬수 있습니다

폐기시키지 않으면 javascript engine에서는 생성된 url을 계속 사용하는 것으로 판단하여 GC가 동작하지 않게 됩니다.

불필요한 메모리 영역을 할당하게 되는 셈이 됩니다.

그래서 생성된 url을 해제해 주어야 합니다. => 메모리 누수를 막을 수 있습니다.

 

---

createObjectURL

const objectURL = URL.createObjectURL(object)

// object에는 File, Blob, MediaSource 객체 와 같은것들이 입력되어야 함

위의 명령어를 통해 호출되는 url은 blob:https://cdpn.io/e11de577-1cd4-4ae5-8ff0-7dccff70203d  

와 같이 생성됩니다.

이 url은 위에서 설명했듯이 createObjectURL을 호출한 document에서만 접근이 가능합니다.

 

revokeObjectURL

URL.revokeObjectURL(objectUrl)

위의 방식으로 revokeObjectURL을 호출하면 createObjectURL을 통해 생성된 url을 폐기 시킬 수 있습니다.

이 url은 더이상 쓸일이 없기 때문에 revokeObjectURL을 통해 폐기 시켜야 합니다.

 

 

See the Pen Untitled by 정우병 (@woobottle) on CodePen.

 

 

출처 : https://heropy.blog/2019/02/28/blob/

Blob(블랍) 이해하기

https://developer.mozilla.org/ko/docs/Web/API/URL/createObjectURL

URL.createObjectURL() - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/File/Using_files_from_web_applications#%EC%98%88%EC%8B%9C_%EA%B0%9D%EC%B2%B4_url%EC%9D%84_%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC_%EC%9D%B4%EB%AF%B8%EC%A7%80_%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0

웹 어플리케이션에서 파일 사용하기 - Web API | MDN