ArrayBuffer and Binary Arrays

Taesol Kwon·2020년 8월 30일
1
post-custom-banner

Web Audio API 건드리다가 멘탈이 터졌을때 만났던 용어들이다..ㅎㅎ

Binary Data

웹 개발을 할때, binary data(이진 데이터)들은 우리가 파일들을 다루는 과정(create, upload, download)에서 만나게 된다.
이를 이용하는 이유는 높은 성능을 보여주기 때문이다.
하지만 사용함에 있어 꽤 혼동하게 되는데 ... 너무 많은 종류가 있다. 다 뭐라는건지;; ㅎㅎ

  • ArrayBuffer, Uint8Array, DataView, Blob, File, etc.

우리는 이 중에서 가장 기본적인 이진 객체를 먼저 만나보도록 하자.

ArrayBuffer - a reference to a fixed-length contiguous memory area.

let buffer = new ArrayBuffer(16); // 길이가 16인 buffer를 생성
console.log(buffer.byteLength); // 16

위의 buffer는 16바이트의 0으로 이루어진 메모리 영역을 할당하게 된다.

ArrayBuffer는 배열이 아니다.

why?

  • 고정 길이를 가진다. 우리는 이 길이를 마음대로 줄이거나 늘리지 못한다.
  • 메모리에서 정확하게 할당된 공간을 차지한다.
  • 각각의 바이트들에 접근하기 위해서는, 또 다른 "view" 객체가 필요하다. buffer[index] 이거 절대 안됨 ㅎㅎ;;

ArrayBuffer는 메모리 영역이다. 그 안에는 bytes raw sequence가 저장되어 있다.
이를 조작하기 위해서는 view 객체를 사용해야 하는데, view객체는 자체적으로 아무것도 저장하지 않는다. 그냥 ArrayBuffer에 저장된 bytes를 해석해 보여주는 장치다.

예를 들면,

  • Uint8Array - 0부터 255까지의 정수의 값을 가지는 각각의 byte를 다룬다. 이러한 값을 "8-bit unsigned integer"라고 한다.
  • Unit16Array - 모든 2 bytes 마다 0부터 65535까지의 정수의 값을 다룬다.
  • Unit32Array - 모든 4 bytes 마다 0부터 4294967295까지의 정수의 값을 다룬다.
  • Float64Array - 모든 8 bytes 마다 5.0x10^-324 부터 1.8x10^308까지의 소수점을 가진 값을 다룬다.

TypedArray

TypedArray는 Uint8Array, Uint32Array, Float64Array 등과 같은 view를 부르는 용어이다.
따라서 new TypedArray 와 같은 명령어는 쓸수 없다. 저 TypedArray 대신에 Uint8Array, Uint32Array, Float64Array 등과 같은 친구들을 써주면 된다.
그리고 new TypedArray() 에 들어갈 수 있는 인자로는 다섯가지가 있다.

new TypedArray(buffer, [byteOffset], [length]);
new TypedArray(object);
new TypedArray(typedArray);
new TypedArray(length);
new TypedArray();

TypedArray 의 종류
int8Array, Uint16Array, Uint32Array
Uint8ClampedArray
Int8Array, Int16Array, Int32Array
Float32Array, Float64Array

좀 더 Deep 하게 파고 싶다면 이 링크를 타고 들어가 봐도 좋다. Audio 다루기 너무 싫고 어렵다 ㅎㅎ

profile
사진촬영을 좋아하는 프론트엔드 개발자입니다.
post-custom-banner

0개의 댓글