[JS] Base64, Blob, ArrayBuffer, File 객체

Base64

일반적으로 링크를 이용해서 이미지나 동영상 파일을 불러오는 것은 이미지, 동영상 그 파일 자체를 저장하는 것이 아닌 단순히 연결시키는 용도이다.

이미지와 동영상 같은 멀티 미디어 파일들을 변수에 저장하기 위해서는 base64를 이용한다. base64란 이진 데이터들을 텍스트 형식으로 인코딩 하는 것을 말한다.

사용하기 좋은 경우

• 크기가 작은 이미지를 url이나 파일 불러오는 것 없이 html에 직접 삽입하는 경우
• 간단한 페이지를 작성해 임시로 이미지를 사용하는 경우
• 이미지가 들어간 메일 내용을 html으로 작성해서 보내는 경우

장점

• url을 통해 서버에 요청 없이 이미지 데이터 자체를 저장하기 때문에 네트워크 상태가 안좋아도 문서와 같이 끊기지 않고 불러온다(이미지 자체를 저장하기 때문에)

단점

• base 64로 텍스트 형식으로 변환되기 때문에 가독성이 떨어진다.
• 원본보다 33% 큰 용량을 가지기 때문에 남용할 경우 로딩 속도가 저하될 경우가 있다.

Blob

Blob 객체는 멀티미디어 파일 바이너리들을 객체 형식으로 저장하는 것이다.
데이터베이스에 이미지 파일을 그대로 데이터로 저장하고 싶을때, 바로 blob 포맷으로 변환한 뒤 저장하는 것이다. 브라우저 환경에서도 자바스크립트를 이용해 이러한 blob 데이터에 접근하고 사용할 수 있다.

blob은 객체이기 때문에 object url을 base64, buffer형식으로 자유자재 변형할 수 있다.

base64랑 다른점은 멀티 미디어 바이너리를 텍스트로 변환하느냐, 객체로 저장하느냐 그 차이에 있다.

blob을 사용할 때는 img 파일을 blob으로 바꿔준뒤 createObjectUrl 메서드를 사용해 url형식으로 만든뒤 사용해줘야 한다.

 fetch('https://~~~/hi.jpg')
      .then((response) => response.blob())
      .then((blob) => {
        const url = URL.createObjectURL(blob);
        document.querySelector('img').src = url;
      });

base64와 달리 짧은 url 형태로 만들어 지는데 이때 url은 현재 탭의 브라우저 메모리에 적재가 된다. 다른 페이지에서 사용하거나 새로 고침할 시 url은 제대로 사용이 안될 수 있다.

Blob 객체가 URL로 변환되어 매핑이 이루어진 채 메모리에 저장되게 되면, 명시적으로 해당 URL이 해제되기 전까지 브라우저는 해당 URL이 유효하다고 판단하기 때문에 자바스크립트 엔진에서 가비지 컬렉션이 이루어지지 않는다.
따라서 blob URL을 사용한 이후, 더 이상 사용하지 않을 시점이라고 판단되면 명시적으로 해제해 주는 것이 좋다.

// Create Blob URL
const objectURL = window.URL.createObjectURL(blob);

// Revoke Blob URL after DOM updates..
window.URL.revokeObjectURL(objectURL);

Arraybuffer

버퍼(buffer) 라는 개념이 등장 하는데, 일정 구획만큼의 데이터를 쪼개서 전달되는 stream을 저장한 후 일정 크기가 도달하면 출력장치나 동영상 플레이어로 전달해주는 중개자 역할을 하는 객체라고 보면 된다. (버퍼링이 바로 이 개념이다)

따라서 자바스크립트 용도가 다양해지면서 이처럼 오디오나 비디오와 같은 binary data들 역시 다룰 필요성이 생기게 되자, 필요한 메모리 공간을 적절하게 할당해서 사용할 수 있는 유연성이 필요해 ArrayBuffer를 만들게 되었다고 이해하면 된다.

ArrayBuffer는 자바스크립트에서 원시 데이터(바이너리 데이터)를 직접 다루는 수단으로 사용되며, 이는 메모리를 개발자가 수동으로 관리할 수 있게 해준다. 지금까지 배운 base64와 blob은 사람이 읽고 다루기 편하게 가공된 데이터 타입이라면,  ArrayBuffer 보다 오리지널에 가깝다고 보면 된다.

성능 이슈에 관련해서 메모리를 직접 다뤄야 하거나 크기가 큰 Blob 객체를 다룰 때 사용하면 용이하다.

Buffer

버퍼는 고정된 크기의 데이터 덩어리를 표현하기 위한 타입이며, Node.js 의 많은 API들이 Buffer 타입을 지원한다.
클라이언트단에서 ArrayBuffer로 이진 데이터를 다루었다면, 서버단(Node.js)에서는 Buffer 객체로 이진 데이터를 다룬다고 이해하면 된다.

node.js 에서는 buffer를 이용하여 멀티미디어 파일을 다룬다.

서버에서는 blob객체를 받으면 바로 buffer로 변환은 안되기 때문에 아래와 같이 arrayBuffer로 변경우 buffer로 변환한다.

const img = await fetch('이미지URL 혹은 base64이미지') 
  .then((res) => res.blob())
  .then(async (blob) => {
    return Buffer.from(await file.arrayBuffer())
  });

File

파일시스템은 OS/서버단의 영역인데, 브라우저 상에서도 파일을 주고 받는 등의 기능이 필요하기 때문에 이를 지원하기 위한 규격으로 볼 수 있다.

브라우저에서 자바스크립트를 이용해 파일을 다루기 위한 방법으로는 File 객체를 이용하거나 html의 input태그를 이용하는 두 가지가 있다.

<input type="file" id="input" />

new File(fileParts, fileName, [options]);
/*
- fileParts : Blob / BufferSource / String 과 같은 배열
- fileName : 파일 이름 (문자열)
- options : 옵셔널 값. lastModified : 마지막 수정이 일어난 때의 timestamp
*/

FileReader

위에서 사용해봤던 FileReader는 Blob 또는 File과 같은 객체로부터 데이터를 읽어 들이기위한 목적으로 사용되는 객체이다.

• readAsArrayBuffer(blob) : ArrauBuffer 형태로 데이터를 읽음
  readAsArrayBuffer의 경우 바이너리 파일 대상으로 로우 레벨의 바이너리 작업이 필요한 경우에 유용하다. 대부분 하이레벨에서 하는 작업의 경우엔 File 객체가 Blob을 상속받고 있기 때문에 별도의 읽기 과정없이 즉각적으로 slice 등의 메서드 호출이 가능하다.

• readAsText(blob, [encoding]) : encoding 방식에 맞게 텍스트 형태로 데이터를 읽음 (기본 인코딩 방식 - utf-8)
  readAsText의 경우 텍스트 형태의 문자열이 필요한 경우 유용하다.

• readAsDataURL(blob) : base64 형태의 data url로 데이터를 읽음
  readAsDataURL의 경우 img 태그와 같이 src 속성에 리소스를 다루어야 하는 경우 유용하다. 또는 이전 챕터에서 다룬바와 같이 URL.createObjectURL을 이용하는 방법도 있다.

• abort() : 작업을 즉시 중단

출처: infa dev