JavaScript에서 바이너리 데이터 처리 - (ArrayBuffer, TypedArray)

고성능의 데이터 처리를 위해서는 데이터를 바이너리로 다루어야 한다고 합니다. 바이너리란 말 그대로 컴퓨터가 이해하는 이진수라는 건데 코딩을 하다 보면 자주 접하는 개념인데 기초를 좀 다져야 할 필요가 있을 것 같아서 정리해 봤습니다.

ArrayBuffer

JS에서 바이너리를 다루는 기본적인 객체는 "ArrayBuffer"입니다. ArrayBuffer는 메모리상의 고정된 영역을 참조하는 객체입니다. 

const buf = new ArrayBuffer(32);

위와 같은 표현으로 객체를 생성할 수 있는데요. 'buf' 변수는 메모리상에 32바이트 크기로 할당된 메모리 영역을 가리키게 됩니다. 할당된 메모리는 모두 "0"으로 초기화됩니다.

"ArrayBuffer"는 그냥 메모리의 어떤 영역이며 그 안에는 0과 1이 들어있습니다. 이런 원초적인 자원을 손쉽게 다루기 위해서는 어떤 도구가 필요한데 그 도구가 "TypedArray"입니다.

TypedArray

"TypedArray" 종류에는 다음과 같은 것들이 있습니다.

TypedArray	용도
Uint8Array, Uint16Array, Uint32Array	부호가 없는 8, 16, 32비트 정수
Uint8ClampedArray	0-255범위로 고정된 8비트 정수
Int8Array, Int16Array, Int32Array	부호가 있는 8, 16, 32비트 정수
Float32Array, Float64Array	부호가 있는 32, 64비트 부동소수점 실수

왜 이것들을 도구라고 하는지 그리고 어떻게 사용되는지 알아보겠습니다. 일단 메모리 임의 위치에 4바이트(32비트) 크기의 ArrayBuffer가 할당되어 있고 그 메모리에는 순서대로 "10000000010000001010000010010000"값이 저장되어 있으며 그 ArrayBuffer는 'BUF'라는 변수로 정의되었다고 가정하겠습니다.

'BUF'라는 변수에 있는 이 0과 1을 어떻게 해석하느냐에 따라서 의미가 달라질 수 있습니다. 예를 들어 왼쪽부터 8개 비트씩 자른 후 10진수로 변환하면 다음과 같이 [1, 2, 5, 9]의 4개 정수가 됩니다. 이때 사용한 도구가 바로 Uint8Array라고 하는 typedArray입니다. 마찬가지로 Uint16Array와 Uint32Array는 각각 16개, 32개 비트씩 끊어서 읽는 도구가 됩니다. 

const uint8 = new Uint8Array(BUF);
console.log("uint8: ", uint8);

const uint16 = new Uint16Array(BUF);
console.log("uint16: ", uint16);

const uint32 = new Uint32Array(BUF);
console.log("uint32: ", uint32);

그래서 같은 'BUF' 변수를 어떤 도구를 사용하느냐에 따라 다음과 같이 서로 다른 결과를 얻을 수 있습니다.

'typedArray'는 JS의 일반 배열과 유사하게 'map', 'slice', 'find', 'reduce' 등 메서드를 사용할 수 있습니다. 그러나  'splice', 'concat' 메서드는 사용할 수 없습니다. 대신 'set, 'subarray'의 메서드가 있습니다. 사용법은 다음과 같습니다.

typedArr.set(originArray, [offset])

'originArray' 이름의 배열을 'typedArr' 이름의 typedArray에 반영하는 표현입니다. 이때 offset 옵션이 있으면 배열의 시작에서 offset 만큼 간격을 벌리고 복사합니다. 앞의 예제코드에 있는 "uint8" 변수를 계속 이어서 사용한다고 생각하고 0, 1번째 바이트는 그대로 두고 2번째 바이트부터 배열 [3, 6]을 집어넣는다면 다음과 같이 할 수 있습니다.

uint8.set([3, 6], 2);
console.log("new uint8: ", uint8);

다음으로 'typedArr' 변수에 있는 typedArray를 새로운 변수 newArr로 복사하는 "subarray"메서드입니다.

const newArr = typedArr.subarray([begin], [end])

 옵션으로 복사할 시작위치와 끝위치를 지정할 수 있으며 복사위치를 지정하지 않으면 전체가 복사됩니다. 

const arr = uint8.subarray(1, 3);
console.log("arr: ", arr);

실행결과는 다음과 같습니다.

 

끝!