개요

• Binary
• Base64
  - 이미지 URL을 base64로 변환하기
• Blob(Binary Large Object)
  - Blob 이미지 다루기
  - Blob -> ObjectURL 변환
  - Blob -> Base64 변환
• ArrayBuffer
• Buffer
• File & FileReader

  ---

Flutter 웹 개발을 하면서 이미지를 다룰 일이 있어 이참에 파일에 대한 공부를 할려고 합니다.
인파님의 파일 정리글 이 글을 보며 정리했습니다. 부족한 부분은 인파님 글을 보시는 걸 추천해요~

바이너리 Binary

Binary란 이진 데이터를 의미하며 "1"과 "0"만을 사용하여 2개의 수를 나타내는 진법을 뜻하는, 컴퓨터를 다루는데 있어 가장 근본이 되는 체계라고 볼 수 있다.

---

# Base64 Base64란 0과 1로 이루어진 이진 데이터(바이너리)를 인코딩하여 텍스트 형식으로 변환하는 것을 의미합니다.

Base64인코딩을 통해 변수에 이미지,파일을 텍스트로 저장하여 사용이 가능합니다.
일반적으로 다루는 경우는

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

Base64 간단 정리

• 별도 이미지 파일이 필요 없이 바이너리를 텍스트 형식으로 변환하는 것이 Base64
• 브라우저 렌더링시 문서로딩과 같이 로딩 되기에 끊기지 않고 불러온다. 또한 네트워크 품질이 좋지 않아도 위와 같은 특징으로 이미지를 로딩할 수 있다는 점도 있다.
• 문자열이 매우 길기에 가독성이 떨어진다
• Base64 인코딩시 원본보다 33% 용량이 커져 로딩속도 저하를 일으킬 수 있다

Dart Base64 Example

다트 컨버트 문서

import 'dart:convert';

void main() {
  final str = "Hello world";
  final bytes = utf8.encode(str);
  // base64 인코딩
  final base64Str = base64.encode(bytes);
  print(base64Str); // SGVsbG8gd29ybGQ=
  final decodeBytes = base64.decode(base64Str);
  print(decodeBytes); // [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
  final decodeStr = utf8.decode(decodeBytes);
  print(decodeStr);// Hello world
}

Blob (Binary Large Object)

BLOB은 주로 이미지,오디오,비디오와 같은 멀티미디어 파일 바이너리를 객체 형태로 저장한 것을 의미한다
멀티 미디어 파일은 대다수 용량이 큰 경우가 많기 때문에, 이를 데이터베이스에 효과적으로 저장하기 위해 고안된 자료형이라 볼 수 잇다.

Base64와 달리 ObjectUrl을 통해 접근이 가능하여 간결한 코드 작성이 가능하다는 장점이 있다.
아래 예제를 통해 blob형태로 만드는 법 Object URL을 얻는 방법을 보자.

Blob -> Object URL , Base 64

import 'dart:html';

void main() {
  var blob =  Blob(['abc']);  
  var r = FileReader();
  r.readAsArrayBuffer(blob);
  r.onLoadEnd.listen((e) {
    var data = r.result;
    print(data); // Uint8List
    final base64Str = base64.encode(data);
    // Base 64
  });
  var objectUrl = Url.createObjectUrlFromBlob(blob);
  print(objectUrl); // blob:null/55662740-e2c5-402b-b7c3-937eca5e2a2f
  // 그외에 ObjectURL을 만드는 메소드들
  // createObjectUrl(dynamic blob_OR_source_OR_stream) → String
  // createObjectUrlFromSource(MediaSource source) → String
  // createObjectUrlFromStream(MediaStream stream) → String
}

Blob의 형태 (JS)

• Blob객체에 별도로 mimeType을 명시하기에 다운/업로드 과정에서 네트워크 요청에서의 Content-Type은 자연스레 명시된 타입으로 지정된다
• 변환된 URL은 현재 탭의 브라우저 메모리에 저장되고,저장된 Urldms 매핑된 Blob객체를 참고하고 있는 형태이다. 이러한 원리 때문에 Base64와 달리 짧은 문자열 만으로도 접근이 가능하다.
• 페이지 이동시 변환된 Url은 의미가 없어진다.
• 메모리 이슈 : Blob 객체가 Url로 변환되어 매핑이 이루어진채 메모리에 저장하게 되면 명시적으로 해당 Url이 해제되기 전 까지 브라우저는 해당 페이지가 유효하다고 판다한여 가비지 컬렉션이 이루어지지 않는다
  따라서 명시적으로 해제해 주는 것이 좋다

ArrayBuffer

ArrayBuffer 객체는 이미지,동영상과 같은 멀티미디어 데이터 덩어리를 표준 JS에서 다루기 위해 도입됬다.

일반적으로 실시간 방송과 같이 영상내용을 송출할 때에, 영상이라고 하는 실시간 데이터를 계속해서 전달해줘야 유저들이 이것을 볼 수 있다.즉, 데이터를 잘게 쪼개서 전송해야 하는 상황이 발생한다는 것이다.

지금까지 Blob,Base64의 경우 사람이 읽고 다루기 편하게 가공된 데이터 타입이라면, ArrayBuffer는 보다 오리지널에 가까운 느낌이다.

• Uint8Array : 숫자 8은 비트를 의미하고 8비트 = 1바이트이기 때문에 각 바이트별로 접근이 가능하다. 1바이트 크기이기 때문에 0 - 255 범위의 수를 다룰 수 있다. (Uint8의 의미는 Unsigned 8bit Int와도 같다)
• Uint16Array : 2바이트(16비트) 단위 정수형으로 접근이 가능한 view 객체이다. 따라서 다룰 수 있는 범위는 0 - 65535에 해당한다.
• Uint32Array : 4바이트(32비트) 단위 정수형으로 접근이 가능한 view 객체이다. 따라서 다룰 수 있는 범위는 0 - 4294967295에 해당한다.
• Float64Array : 8바이트(64비트) 단위로 부동 소수점 방식으로 접근이 가능한 view 객체이다. 다룰 수 있는 범위는 5.0x10^-324 부터 1.8x10^308 까지이다.