1. ArrayBuffer

ArrayBuffer는 자바스크립트에서 고정된 길이의 원시 바이너리 데이터를 담는 컨테이너다. 쉽게 말하면, 메모리에 연속된 바이트 덩어리를 할당해주는 객체라고 보면 된다.

일반적인 자바스크립트 배열은 편리하지만, 바이너리 데이터(이미지, 오디오, 파일 등)를 다루기에는 비효율적이다. ArrayBuffer는 이런 로우 레벨 데이터를 효율적으로 다루기 위해 만들어졌다.

e.g. 사용법

// 16바이트 크기의 ArrayBuffer 생성
const buffer = new ArrayBuffer(16);

console.log(buffer.byteLength); // 16

1-1) 중요한 점

ArrayBuffer 자체는 직접 읽거나 쓸 수 없다. 데이터를 다루려면 TypedArray나 DataView를 통해 접근해야 한다.

// Uint8Array를 사용해서 접근
const uint8View = new Uint8Array(buffer);
uint8View[0] = 255;
uint8View[1] = 128;

// Int32Array로 같은 버퍼를 다르게 해석
const int32View = new Int32Array(buffer);
console.log(int32View[0]); // 앞의 4바이트를 32비트 정수로 해석

2. 실무에서 사용하는 곳

2-1) 파일 업로드/다운로드

const response = await fetch('/api/file');
const arrayBuffer = await response.arrayBuffer();