(파일시스템) Blob, Base64, arrayBuffer, Buffer

모든 이미지, 영상, 음성 데이터들은 바이너리 형태로 존재하게 된다. 

그렇다면 이러한 바이너리 형태의 데이터를 우리는 어떤 형식으로 만들어 쓸수 있을까?

 

1. Blob (Binary Large Object)

Blob은 대용량 바이너리 데이터를 객체 형태로 변환해 저장한 것이다. 

js에서 input엘레먼트로 파일을 받을때 나오는 FileList, File 역시 이 Blob형식을 상속받은 것이라고 할 수 있다.

이러한 Blob 데이터는 js에서 createObjectUrl() 메소드를 통해 Blob Url로 변환 하여 사용할 수 있는데, 해당 브라우저에서만 임시적으로 사용할 수 있고 그냥 두면 GC가 해제 시켜주지 않기 떄문에 revokeObjectUrl()로 꼭 해제를 시켜줘야 한다.

또한 Base64, arrayBuffer 등으로의 변환이 유용하다.

 

2. Base64

Base64는 바이너리 데이터를 64진법 텍스트 형태로 변환한 형식이다.

이미지와 영상 같은 데이터의 경우 브라우저 메모리에 저장된 Blob데이터를 FileReader.readAsDataURL을 통해 변환시킨다.

변환된 형식은 다음과 같다.

data:[<mediatype>][;base64],<data>

또한 이러한 dataUrl은 그자체로 파일 내용을 담고 있기 때문에 해당 브라우저가 아닌 다른곳에서도 사용할 수 있다.

 

그렇다면 이미지를 나타낼때 언제 Blob Url을 써야하고, 언제 Base64의 dataUrl을 써야할까?

Blob Url -> 현재의 브라우저에서만 사용할 수 있으므로 input엘레먼트로 들어온 이미지를 미리보기로 보여주거나

임시파일을 다운로드 할수 있게 해줄때 사용한다.

 

dataUrl -> url 자체로 파일을 담고 있으므로 현재 브라우저 외에 다른곳에서도 계속 사용하거나 html,css 파일에 직접 이미지를 담을 수 있다.

하지만 브라우저 메모리에 저장된 객체를 그대로 불러오는 Blob Url과 달리 매번 브라우저가 dataUrl을 읽어서 파싱 시켜야 하므로

속도가 느리고 이미지 캐싱이 안된다.

그러므로 큰 파일 보단 html에 포함시킬 작은 용량의  static한 이미지등을 표현할때 좋다. 

 

3. arrayBuffer

위의 Blob과 base64는 바이너리 데이터를 다루기 쉽게 변환한 타입이지만 arrayBuffer는 바이너리 데이터 자체를 

다루게 해주는 데이터 타입이다.  

일반 배열과 다르게 지정한 고정 길이를 늘리거나 줄일수 없으며, 일반 배열처럼 index로 접근할수 없고 별도의 객체를

생성해서 접근해야 한다. (Uint8Array, Uint16Array, Uint32Array, Float64Array)

 

4. Buffer

Node.js에서 도입한 타입으로 클라이언트에서 ArrayBuffer로 이진 데이터를 다룬것처럼 서버단에선 Buffer 객체로 

이진데이터를 다룸.