JavaScript의 TypedArray

이 기사에서는 JavaScript의 TypedArray에 대해 설명합니다.

TypedArray의 기본 개념, 각 타입, 사용 방법, 그리고 구체적인 사용 사례에 대해 자세히 설명하겠습니다.

YouTube Video

JavaScript의 TypedArray

JavaScript의 TypedArray는 버퍼링된 이진 데이터를 효율적으로 처리하기 위한 객체입니다. TypedArray는 특정 데이터 유형에 따라 메모리를 할당하고 조작합니다. 일반 배열과 달리 TypedArray는 고정 크기의 이진 데이터만 저장할 수 있으며 임의 데이터 유형을 저장할 수 없습니다.

TypedArray의 기본 구조

TypedArray의 주요 구성 요소는 ArrayBuffer와 TypedArray 자체입니다.

• ArrayBuffer: 메모리에 이진 데이터를 할당하는 고정 크기 버퍼. 이 버퍼는 단순히 데이터 영역이며 직접 읽거나 쓸 수 없습니다.
• TypedArray: 버퍼에 특정 데이터 유형을 적용하여 데이터에 액세스하고 조작할 수 있도록 하는 래퍼 객체.

기본 사용 예시

다음은 ArrayBuffer를 생성한 후 이를 기반으로 TypedArray를 생성하는 예제입니다.

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• 이 예제에서는 ArrayBuffer가 생성된 후 이를 기반으로 Uint8Array가 생성됩니다. 각 요소는 8비트 부호 없는 정수로 처리되며, 지정된 범위 내의 값만 저장합니다.

TypedArray의 유형

각 데이터 유형에 따라 다양한 유형의 TypedArray가 있습니다. 주요 유형은 다음과 같습니다.

이 TypedArray들은 모두 메모리 효율적이며 대량의 데이터를 처리하는 데 효과적입니다.

TypedArray 조작

일반 배열처럼 인덱스를 사용해 TypedArray의 데이터를 액세스할 수 있으며, 몇 가지 특별한 메서드도 제공합니다.

값 설정하기

TypedArray에서 set 메서드를 사용하여 한 번에 여러 값을 지정할 수 있습니다.

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• set 메서드를 사용하여 여러 값을 한 번에 Int16Array에 할당하고, 각 요소를 콘솔에 표시하는 코드입니다.

서브 배열 가져오기

TypedArray의 일부를 서브 배열로 얻으려면 subarray 메서드를 사용하세요. 이는 원본 TypedArray와 동일한 버퍼를 참조합니다.

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• subarray 메서드를 사용하여 Int16Array에서 지정된 범위의 요소를 가져오고, 그 서브배열을 콘솔에 표시하는 코드입니다.

버퍼 복사하기

TypedArray의 버퍼는 다른 TypedArray로 복사할 수도 있습니다. set 메서드를 사용하면 지정된 위치에서부터 복사할 수 있습니다.

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• set 메서드를 사용하여 Uint8Array의 내용을 다른 배열에 복사하고, 복사된 배열을 콘솔에 표시하는 코드입니다.

DataView 사용하기

TypedArray는 고정된 데이터 유형의 버퍼를 다루는 반면, DataView는 임의의 오프셋과 데이터 유형으로 바이너리 데이터를 유연하게 조작할 수 있는 인터페이스입니다. 이를 통해 동일한 버퍼 안에 다양한 유형을 혼합할 수 있습니다.

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• DataView를 사용하여 32비트 정수와 32비트 부동소수점 등 서로 다른 타입의 데이터를 동일 버퍼에 기록하고, 그 결과를 확인하는 코드입니다.

• DataView는 TypedArray보다 더 큰 데이터 접근 유연성을 제공하며, 특히 바이너리 형식 파일이나 네트워크 프로토콜을 다룰 때 유용합니다.

TypedArray의 사용 사례

TypedArray는 주로 대량의 바이너리 데이터를 효율적으로 처리하는 데 사용됩니다. 구체적인 사용 사례는 다음과 같습니다.

이미지 처리

TypedArray는 이미지 데이터의 픽셀 정보를 조작할 때 사용됩니다. Uint8Array를 사용하여 각 픽셀의 RGBA 값을 저장하고 이미지 편집 및 처리를 수행합니다.

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• Uint8Array를 사용하여 너비 100, 높이 100의 RGBA 형식 이미지 데이터를 만들고, 모든 픽셀을 빨간색으로 설정하는 코드입니다.

WebAssembly와의 인터페이스

TypedArray는 JavaScript와 WebAssembly 간 바이너리 데이터를 교환하기 위해 사용됩니다. ArrayBuffer를 통해 JavaScript와 WebAssembly의 메모리 공간을 공유함으로써 빠른 데이터 교환이 가능합니다.

오디오 및 비디오 데이터 처리

TypedArray는 오디오 및 비디오 데이터를 처리하는 데 중요한 역할을 합니다. 오디오 데이터의 파형을 Float32Array에 저장하여 재생 및 처리를 수행할 수 있습니다.

결론

TypedArray는 대량의 바이너리 데이터를 효율적으로 처리하기 위한 강력한 도구입니다. 이미지 처리, WebAssembly, 오디오/비디오 데이터 처리와 같은 성능이 중요한 애플리케이션에서 특히 유용합니다. TypedArray는 일반 배열과 유사한 API를 가지고 있지만, 메모리 사용 및 데이터 유형에 제약이 있으므로 적절한 용도 구분이 필요합니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video