글을 쓰게 된 이유
도대체 블롭이란 무엇인가...
프로젝트를 하다보니 데이터, 특히 멀티미디어 파일을 서버에 보내고, 받아오는 등의 일이 많아졌다. 이 전 프로젝트에서는 오디오 파일, 현재는 이미지 파일을 다루다보니 블롭이란 객체를 사용할 수 밖에 없게 되었다.
그래서 블롭이란 무엇일까?
Blob 객체는 파일류의 불변하는 미가공 데이터를 나타냅니다. 텍스트와 이진 데이터의 형태로 읽을 수 있으며, ReadableStream으로 변환한 후 그 메서드를 사용해 데이터를 처리할 수도 있습니다.
Blob은 File 인터페이스는 사용자 시스템의 파일을 지원하기 위해 Blob 인터페이스를 확장한 것이므로, 모든 블롭 기능을 상속합니다.
즉, MDN 공식문서에 따르면 자바스크립트에서 텍스트, 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용한다. 즉, 비동기적으로 데이터를 읽기 위해서 파일 리더 객체를 사용하게 되는데, 이 때 블롭 객체를 이용하게 된다. 즉, 블롭 객체로 변경을 해준 후 파일 리더 객체를 사용하게 되면 파일을 읽고 컴퓨터에 저장까지 가능하게 해준다.
위의 사진은 이미지 파일의 데이터 타입을 찍어본 결과이다. 엄청 알수 없는 긴 문자열이 나오는데 도통 해당 문자열이 무슨 타입인지 알 수 없어 엄청 고생했다. 이미지 파일뿐만 아니라 오디오 파일도 저런 식으로 타입이 출력된다.
오디오 파일
const url = URL.createObjectURL(new Blob([new Uint8Array(audio.split(','))]));
<a class="download" href="${url}" download="${question}.wav" title="download audio"></a>즉, 이 긴 문자열을 블롭으로 변환해주어야 하는데, 바로 블롭으로 변환해주면 당연히 작동을 안한다. 그럼 중간에 어떤 형태로 바꾸어 주어야하는데 그게 바로 Array Buffer이다. ArrayBuffer은 직접 콘텐츠를 조작할 수 없지만, 특정 형식으로 버퍼를 나타내는 DataView를 만들어 버퍼의 콘텐츠를 읽고 쓰기위해 사용한다. 이 때 이 DataView 중 하나가 uint8Array (8비트 부호 없는 정수)이고, 이 8비트 이터러블한 정수 배열을 블롭 안에 넣어주어 사용해야 한다.
이렇게 블롭으로 변환시켰다면, createObjectUrl을 통해 블롭 객체를 가리키는 url을 만들어 DOM에서 참조할 수 있게 한다. 이 변환된 url을 href 링크에 걸어주면 다운도 받아지고 이제 화면에서도 오디오를 들을 수 있게 된다. (다만, 이 createObjectUrl은 생성된 window의 document에서만 유효하고 다른 window에서 재활용할 수 없어 보안 이슈는 없다)
이미지 파일
이미지 파일의 경우도 Uint8Array를 통해 데이터를 블롭으로 변환이 가능하다.
ArrayBuffer
Array Buffer은 앞서 말했던 것 처럼 직접 조작할 수 없어 특정 형식의 버퍼로 나타내 읽고 쓸 수 있다. 이 때 Blob.arrayBuffer()은 이진 데이터로 담은 프로미스를 반환하게 된다.
위의 이미지는 MDN에서 가지고 온 사진인데 ArrayBuffer은 버퍼와 뷰로 나누는데, ArrayBuffer에 의해 구현된 객체는 데이터 부분을 나타내고, 뷰는 문맥을 제공해 실제 데이터 형식화 배열로 바꾼다.
결론
결국, 그래서 오디오 파일, 비디오 파일, 이미지 파일 등 무거운 데이터들의 최적화를 위해 비동기 처리로 읽어올때는 블롭을 써야하는데 바로 블롭으로 변환시키는 것이 아니라 ArrayBuffer로 변환을 해야한다. 데이터를 다룰 일이 많아질텐데 그 때는 당황하지말고 블롭을 떠올리자!
출처
