JavaScript의 배열 버퍼 | Christian Nwamba

dimohy · 10월 23, 2025, 8:39오후

#JavaScript arraybuffer binarydata #WebDevelopment #Performance

요약: ArrayBuffer로 시작하는 고성능 이진 데이터 처리

JavaScript에서 ArrayBuffer는 고정 크기의 원본 이진 데이터를 저장하는 컨테이너입니다. 네트워크 프로토콜, 파일 입출력, 게임, 스트리밍 등 이진 데이터를 다루는 고성능 작업에 필수적입니다. 이 문서는 ArrayBuffer의 생성 방법, Typed Array와 DataView를 통한 데이터 조작, 실무 활용법, 그리고 성능 최적화 기법을 단계별로 상세하게 설명합니다.

상세 요약

1. ArrayBuffer의 정의와 이해

개념

ArrayBuffer는 고정 길이의 원본 이진 데이터를 나타내는 JavaScript 객체입니다. 직접적인 조작은 불가능하지만, 이진 데이터를 효율적으로 처리할 수 있도록 설계되었습니다.

비유: ArrayBuffer는 "고정 크기의 초콜릿 상자"와 같습니다. 상자의 크기는 고정되어 있고, 초콜릿의 유무와 관계없이 동일한 공간을 차지합니다. 상자의 크기를 줄이거나 늘릴 수 없으므로 메모리 효율성이 높습니다.

주요 사용 사례

고속 데이터 처리: 대용량 파일의 효율적인 처리
네트워크 통신: 프로토콜 데이터, 웹 API 상호작용
파일 입출력: 이미지, 비디오, 오디오 파일 처리
게임 및 그래픽: 텍스처, 3D 모델, 애니메이션 처리
생체 인증: Passkey 및 WebAuthn 구현

2. ArrayBuffer 생성 방법

기본 생성 방법

const buffer = new ArrayBuffer(8); // 8바이트 메모리 블록 생성
console.log(buffer.byteLength); // 출력: 8

중요 사항:

생성자는 **크기(바이트 단위)**만 매개변수로 받습니다
처음 생성된 buffer는 비어있는 상태입니다 (실질적인 데이터 없음)
크기는 한 번 생성되면 변경 불가능합니다

3. Typed Array를 통한 이진 데이터 조작

3.1 Typed Array의 역할

ArrayBuffer는 직접 조작이 불가능하므로, Typed Array라는 "보기(view)"를 통해 데이터에 접근합니다. Typed Array는 특정 형식의 이진 데이터를 다루는 특수한 배열 형식입니다.

특징:

단일 데이터 타입만 허용 (혼합 불가)
고정 크기 (생성 후 변경 불가)
메모리 효율적
고속 처리 가능

3.2 Typed Array 종류 및 사용 가이드

정수형 배열:

타입	크기	범위	설명
Int8Array	1바이트	-128 ~ 127	8비트 부호있는 정수
Uint8Array	1바이트	0 ~ 255	8비트 부호없는 정수
Uint8ClampedArray	1바이트	0 ~ 255	범위 이외 값은 자동 제한
Int16Array	2바이트	-32,768 ~ 32,767	16비트 부호있는 정수
Uint16Array	2바이트	0 ~ 65,535	16비트 부호없는 정수
Int32Array	4바이트	-2,147,483,648 ~ 2,147,483,647	32비트 부호있는 정수
Uint32Array	4바이트	0 ~ 4,294,967,295	32비트 부호없는 정수

부동소수점 배열:

타입	크기	범위
Float32Array	4바이트	≈ -3.4 × 10³⁸ ~ 3.4 × 10³⁸
Float64Array	8바이트	≈ -1.8 × 10³⁰⁸ ~ 1.8 × 10³⁰⁸

3.3 사용 예제

Uint8Array 예제:

const buffer = new ArrayBuffer(8);
const uint8view = new Uint8Array(buffer);

uint8view[0] = 65;  // 인덱스 0에 65 저장
uint8view[1] = 66;  // 인덱스 1에 66 저장

console.log(uint8view);
// 출력: Uint8Array(8) [65, 66, 0, 0, 0, 0, 0, 0]

Int16Array 예제:

const int16View = new Int16Array(buffer);

int16View[0] = 300;   // 첫 번째 위치에 300 저장
int16View[1] = -500;  // 두 번째 위치에 -500 저장

console.log(int16View);
// 출력: Int16Array(4) [300, -500, 0, 0]

Float32Array 예제:

const float32View = new Float32Array(buffer);

float32View[0] = 3.14;  // 부동소수점 저장

console.log(float32View);
// 출력: Float32Array(2) [3.140000104904175, 0]

3.4 Typed Array 선택 기준

데이터 타입 기준:
- 정수: Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array 선택
- 소수점: Float32Array, Float64Array 선택
값의 범위 기준:
- 음수 포함: Int8Array, Int16Array, Int32Array 등 부호있는 타입 선택
- 양수만: Uint8Array, Uint16Array, Uint32Array 등 부호없는 타입 선택
메모리 효율성 기준:
- 가장 작은 타입부터 시작 (0~255 범위면 Uint8Array 추천)
- 필요시 더 큰 타입으로 업그레이드
특수 용도 기준:
- 이미지 픽셀 데이터: Uint8Array 또는 Uint8ClampedArray
- 오디오/비디오 데이터: Float32Array

4. DataView를 통한 유연한 데이터 처리

4.1 DataView의 역할

Typed Array는 단일 데이터 타입만 허용하지만, DataView는 다양한 데이터 타입을 혼합하여 사용할 수 있습니다.

비교:

특성	Typed Array	DataView
데이터 타입	단일 타입만	혼합 타입 가능
크기	고정	고정
성능	더 빠름	상대적으로 느림
유연성	낮음	높음

4.2 DataView 생성

const buffer = new ArrayBuffer(8);      // 8바이트 메모리 생성
const view = new DataView(buffer);      // DataView로 접근

4.3 DataView 데이터 쓰기 (setXXX 메서드)

주요 메서드:

setInt8(offset, value): 8비트 부호있는 정수
setUint8(offset, value): 8비트 부호없는 정수
setInt16(offset, value): 16비트 부호있는 정수
setUint16(offset, value): 16비트 부호없는 정수
setInt32(offset, value): 32비트 부호있는 정수
setUint32(offset, value): 32비트 부호없는 정수
setFloat32(offset, value): 32비트 부동소수점
setFloat64(offset, value): 64비트 부동소수점

쓰기 예제:

const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);

view.setInt8(0, 100);         // 위치 0에 100 저장 (1바이트)
view.setUint16(1, 500);       // 위치 1~2에 500 저장 (2바이트)
view.setFloat32(3, 3.14);     // 위치 3~6에 3.14 저장 (4바이트)

console.log(view);
// DataView 객체의 8바이트 메모리 표시

오프셋(offset) 설명:

setInt8(0, 100): 바이트 위치 0에 100 저장
setUint16(1, 500): 바이트 위치 1과 2에 걸쳐 500 저장 (이진수: 00000001 11110100)
setFloat32(3, 3.14): 바이트 위치 3~6에 IEEE 754 표준으로 3.14 저장

4.4 DataView 데이터 읽기 (getXXX 메서드)

console.log(view.getInt8(0));       // 100
console.log(view.getUint16(1));     // 500
console.log(view.getFloat32(3));    // 3.14

5. 문자열과 ArrayBuffer의 상호 변환

5.1 문자열을 ArrayBuffer로 변환

function stringToArrayBuffer(str) {
  let encoder = new TextEncoder();
  return encoder.encode(str).buffer;
}

let myString = "Hello, World";
let buffer = stringToArrayBuffer(myString);
console.log(buffer);  // UTF-8로 인코딩된 ArrayBuffer

작동 원리:

TextEncoder를 사용하여 문자열을 이진 데이터로 인코딩
기본 인코딩은 UTF-8
결과는 Uint8Array를 거쳐 최종적으로 ArrayBuffer가 됨

5.2 ArrayBuffer을 문자열로 변환

function arrayBufferToString(buffer) {
  let decoder = new TextDecoder();
  return decoder.decode(new Uint8Array(buffer));
}

let decodedString = arrayBufferToString(buffer);
console.log(decodedString);  // "Hello, World"

작동 원리:

TextDecoder를 사용하여 이진 데이터를 텍스트로 디코딩
Uint8Array 보기를 통해 ArrayBuffer 접근
결과는 원본 문자열과 동일

5.3 다양한 인코딩 처리

let encoder = new TextEncoder("utf-16");
let buffer = encoder.encode("Hello, World!");
let decoder = new TextDecoder("utf-16");
let string = decoder.decode(buffer);
console.log(string);  // "Hello, World"

지원 인코딩:

UTF-8 (기본값, 가장 널리 사용)
UTF-16 (특정 용도)

6. Fetch API를 통한 이진 데이터 처리

fetch("example.com/data")
  .then((response) => response.arrayBuffer())
  .then((buffer) => {
    let text = arrayBufferToString(buffer);
    console.log(text);
  });

작동 흐름:

Fetch로 리소스 요청
response.arrayBuffer()로 응답을 이진 데이터로 변환
필요시 문자열로 디코딩

7. ArrayBuffer의 실무 활용

7.1 파일 처리 및 공유 애플리케이션

문제: 대용량 파일 처리 시 시스템 지연 발생
해결: ArrayBuffer를 사용한 효율적인 처리

let fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener("change", function (event) {
  let file = event.target.files[0];
  let reader = new FileReader();
  
  reader.onload = function () {
    let arrayBuffer = reader.result;
    let text = arrayBufferToString(arrayBuffer);
    console.log(text);  // 파일 내용 출력
  };
  
  reader.readAsArrayBuffer(file);
});

이점:

메모리 효율적인 파일 읽기
UI 블로킹 최소화
이미지, 비디오, 오디오, PDF 등 다양한 파일 형식 지원

7.2 스트리밍 애플리케이션 (Netflix, YouTube)

문제: 대용량 데이터를 한 번에 로드하면 메모리 부족
해결: 청크(chunk) 단위로 나누어 처리

ArrayBuffer는 스트리밍 데이터를 청크 단위로 효율적으로 관리합니다.

7.3 Web API 상호작용

지원 API:

Fetch API: 이진 데이터 다운로드/업로드
WebSocket: 실시간 양방향 통신
Socket.IO: 이벤트 기반 통신

8. 최적화 및 성능 고려사항

실용적인 팁

1. DataView 오용 방지

// ❌ 나쁜 예: 단일 데이터 타입인데 DataView 사용
const view = new DataView(buffer);
view.setUint8(0, 100);

// ✓ 좋은 예: Typed Array 사용 (더 빠름)
const arr = new Uint8Array(buffer);
arr[0] = 100;

권장사항: 단일 데이터 타입만 사용할 때는 Typed Array, 혼합 타입이 필요할 때만 DataView 사용

2. 불필요한 ArrayBuffer 중복 방지

// ❌ 나쁜 예: 메모리 낭비
const buffer1 = new ArrayBuffer(1024);
const buffer2 = buffer1.slice(0, 512);  // 복사 발생 (메모리 낭비)

// ✓ 좋은 예: 보기 사용
const view = new Uint8Array(buffer1, 0, 512);  // 복사 없음

중요: slice() 대신 subarray() 사용으로 메모리 절약

3. 메모리 해제

let buffer = new ArrayBuffer(8);
buffer = null;  // 메모리 정리

중요: 대용량 ArrayBuffer는 명시적으로 참조를 제거하여 가비지 컬렉션 유도

4. 대용량 이진 파일 스트리밍 처리

async function fetchLargeFile(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  
  const chunks = [];
  let receivedLength = 0;
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    
    chunks.push(value);
    receivedLength += value.length;
    console.log(`받은 데이터: ${receivedLength} 바이트`);
  }
  
  // 모든 청크를 하나의 Uint8Array로 통합
  const fullData = new Uint8Array(receivedLength);
  let position = 0;
  
  for (const chunk of chunks) {
    fullData.set(chunk, position);
    position += chunk.length;
  }
  
  console.log("다운로드 완료!");
  return fullData;
}

// 사용 예
fetchLargeFile("https://example.com/large-file.bin").then((data) => {
  console.log("최종 파일 크기:", data.length);
});

이점:

메인 스레드 블로킹 방지
메모리 효율적인 대용량 파일 처리
실시간 진행률 표시 가능

5. 멀티스레딩을 위한 SharedArrayBuffer

const buffer = new SharedArrayBuffer(1024);
const uint8Array = new Uint8Array(buffer);

사용 사례:

Web Workers: 멀티태스킹 필요 시
비디오 처리: 병렬 고속 처리
실시간 통신: 스레드 간 복사 없는 데이터 공유

주의사항:

보안 고려사항 (Spectre/Meltdown 공격 방지)
일부 환경에서 비활성화 가능

9. 사용 사례별 심화 예제

게임 및 그래픽스 엔진

게임 엔진(예: Three.js, Babylon.js)은 ArrayBuffer를 사용하여 텍스처, 3D 모델, 애니메이션 데이터를 고속 처리합니다.

생체 인증 (Passkey/WebAuthn)

Passkey 생성 및 인증 시 페이로드가 ArrayBuffer 형식으로 전달되며, 이를 통해 사용자 정보를 안전하게 처리합니다.

온라인 게임 및 실시간 통신

네트워크 패킷 데이터를 ArrayBuffer로 처리하여 고속 송수신을 구현합니다.

10. 핵심 정리

요소	특징	사용 시기
ArrayBuffer	고정 크기 이진 데이터 컨테이너	모든 이진 데이터 처리의 기초
Typed Array	단일 타입, 고정 크기, 고속	단일 데이터 타입만 사용 시
DataView	혼합 타입, 유연한 접근	다양한 타입을 한 곳에서 처리
TextEncoder	문자열 → 이진 데이터	텍스트 인코딩
TextDecoder	이진 데이터 → 문자열	텍스트 디코딩

11. 결론

ArrayBuffer는 JavaScript에서 고성능 이진 데이터 처리의 핵심 기술입니다. 올바르게 구현하면 스트리밍 플랫폼, 게임, 실시간 애플리케이션 등 많은 성공적인 소프트웨어 애플리케이션을 만들 수 있습니다. 특히 Typed Array와 DataView의 차이를 이해하고, 메모리 효율성과 성능을 고려하여 선택적으로 사용하면 더욱 효과적입니다.