Articles
JavaScript 소개
JavaScript의 `ArrayBuffer`

JavaScript의 `ArrayBuffer`

이 기사는 JavaScript에서 ArrayBuffer를 설명합니다.

ArrayBuffer의 기본부터 사용법, 관련 타입, 실용적인 응용까지 모두 설명하겠습니다.

YouTube Video

JavaScript의 ArrayBuffer

JavaScript의 ArrayBuffer는 저수준 바이너리 데이터를 처리하기 위한 객체이며, WebAPI, 파일 작업, 네트워크 통신에서 바이너리 데이터를 조작하는 데 특히 유용합니다.

ArrayBuffer란 무엇인가

ArrayBuffer는 고정 길이의 바이너리 데이터를 다루기 위한 데이터 구조입니다. 일반 JavaScript 배열이나 객체로 처리할 수 없는 원시 이진 데이터를 다룰 수 있습니다.

ArrayBuffer 자체는 데이터를 직접 조작할 수 없습니다. 대신, 데이터는 ArrayBuffer를 기반으로 한 TypedArray 또는 DataView를 사용하여 읽고 씁니다.

ArrayBuffer는 다음과 같은 상황에서 특히 유용합니다.

  • 네트워크에서 받은 바이너리 데이터를 처리할 때
  • Web Worker에서 효율적인 데이터 공유가 필요한 경우.
  • Canvas 또는 WebGL을 사용하여 이미지 처리나 3D 렌더링을 수행하는 경우.
  • 파일(특히 바이너리 파일)을 조작하는 경우.

ArrayBuffer 생성하기

먼저, ArrayBuffer 인스턴스를 생성하는 방법부터 시작해 봅시다. ArrayBuffer는 메모리를 바이트 단위로 할당하며, 생성할 때 크기를 지정합니다.

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16
  • 이 예에서는 16바이트 크기의 버퍼를 할당합니다. 이 버퍼는 아직 아무 데이터도 포함하고 있지 않습니다.

TypedArray를 사용한 데이터 조작

ArrayBuffer에 직접 접근할 수 없으므로 데이터를 읽고 쓰려면 TypedArray를 사용합니다. TypedArray는 Int8Array와 Float32Array와 같은 다양한 타입의 뷰를 제공하여, 바이너리 데이터에 효율적으로 접근할 수 있게 합니다.

Int8Array를 사용한 예제 

1const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
2const int8View = new Int8Array(buffer); // Create an Int8Array
3
4int8View[0] = 42; // Write data to the first byte
5console.log(int8View[0]); // 42
  • Int8Array는 각 바이트에 데이터를 저장할 수 있으며, 버퍼에는 8개의 요소를 포함할 수 있습니다. 이와 같이, 다양한 종류의 뷰를 사용하면 데이터를 효율적으로 조작할 수 있습니다.

기타 TypedArray 예시들

JavaScript에는 다양한 종류의 TypedArray가 있습니다. 예를 들어, 32비트 부호 없는 정수를 처리하려면 Uint32Array를 사용합니다.

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456
  • Uint32Array는 데이터를 4바이트 단위로 저장할 수 있으므로, 버퍼는 네 개의 요소를 담을 수 있습니다. 처리하려는 데이터의 유형에 따라 적절한 TypedArray를 선택하는 것이 중요합니다.

DataView를 이용한 유연한 데이터 조작

TypedArray는 고정된 유형의 데이터만 처리할 수 있지만, DataView를 사용하면 어떤 유형의 데이터든지 원하는 위치에 기록할 수 있습니다. 이는 혼합된 데이터 유형을 포함하는 버퍼를 처리할 때 특히 유용합니다.

 1const buffer = new ArrayBuffer(16);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer to byte 0
 5dataView.setInt32(0, 2147483647);
 6console.log(dataView.getInt32(0)); // 2147483647
 7
 8// Write a 16-bit unsigned integer to byte 4
 9dataView.setUint16(4, 65535);
10console.log(dataView.getUint16(4)); // 65535

DataView를 사용하면 바이트 오프셋을 지정하여 다양한 유형의 데이터를 읽거나 쓸 수 있습니다. 이는 네트워크 프로토콜이나 파일 포맷 같은 복잡한 바이너리 구조를 처리할 때 매우 유용합니다.

엔디언스(바이트 순서)에 대한 고려

DataView를 사용할 때는 엔디언스(바이트 순서)에도 주의를 기울여야 합니다. 컴퓨터 아키텍처에 따라 메모리에 데이터를 저장하는 순서가 다를 수 있습니다. DataView 메서드에는 엔디언스를 지정하는 옵션이 있습니다.

1const buffer = new ArrayBuffer(4);
2const view = new DataView(buffer);
3
4// Write a 32-bit integer in little-endian format
5view.setInt32(0, 42, true); // true indicates little-endian
6console.log(view.getInt32(0, true)); // 42

올바른 엔디언스를 지정하지 않으면 여러 환경에서 데이터가 제대로 해석되지 않을 수 있으므로, 네트워크 통신이나 파일 작업에서는 특히 주의를 기울여야 합니다.

ArrayBuffer의 활용 사례

ArrayBuffer는 웹 개발과 브라우저 API에서 자주 사용되는 강력한 도구입니다. 활용 사례들을 살펴보겠습니다.

바이너리 데이터의 수신 및 처리

예를 들어, XMLHttpRequest 또는 fetch API를 사용하여 서버에서 바이너리 데이터를 가져와 이를 ArrayBuffer로 처리할 수 있습니다.

1fetch('https://codesparklab.com/image.jpg')
2    .then(response => response.arrayBuffer())
3    .then(buffer => {
4        const view = new Uint8Array(buffer);
5        console.log(view);
6    });
  • 이 예에서는 서버에서 이미지를 가져와 이를 Uint8Array로 처리합니다. 이와 같은 방식으로, ArrayBuffer를 사용하여 서버에서 수신한 데이터를 처리할 수 있습니다.

WebGL에서의 활용

WebGL에서는 정점 데이터와 색상 데이터 같은 바이너리 데이터를 효율적으로 처리하기 위해 ArrayBuffer를 사용합니다.

 1const vertices = new Float32Array([
 2    -1.0, -1.0,
 3    1.0, -1.0,
 4    1.0,  1.0,
 5    -1.0,  1.0
 6]);
 7
 8// Send data to the WebGL buffer
 9const buffer = gl.createBuffer();
10gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
11gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  • 이 예에서는 Float32Array를 사용하여 사각형의 정점 좌표를 정의하고 이를 WebGL 버퍼에 보냅니다.

메모리 관리와 ArrayBuffer

ArrayBuffer는 바이트 단위로 메모리를 관리하여 매우 효율적이지만, 메모리 관리를 신중히 해야 합니다. 대용량 이진 데이터를 다룰 때, 사용되지 않는 ArrayBuffer를 적절히 해제하는 것이 중요합니다. JavaScript가 자동으로 가비지 컬렉션을 수행하지만, ArrayBuffer가 계속 참조되고 있다면 메모리 누수가 발생할 수 있습니다.

요약

ArrayBuffer는 JavaScript에서 이진 데이터 처리를 위한 기초를 제공합니다. TypedArray와 DataView를 결합하면 이진 데이터를 효율적이고 유연하게 처리할 수 있습니다. 이들은 웹 개발에서 없어선 안 될 도구로, 특히 네트워크 통신이나 WebGL 등 이진 데이터를 다루는 많은 상황에서 필수적입니다. 이들을 정확히 이해하고 적절히 사용하면 성능과 효율성을 향상시킬 수 있습니다.

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

YouTube Video

JavaScript와 StorageManagerJavaScript의 TypedArray