22. JavaScript에서 Typed Arrays 사용하는 방법 | 웹 개발 기초

어안 렌즈 스타일, dall-e

 

JavaScript Typed Arrays: 메모리 효율적 데이터 처리 방법

JavaScript의 Typed Arrays는 메모리 버퍼에서 바이너리 데이터를 읽고 쓰기 위한 효율적인 방법을 제공합니다. 이 블로그에서는 Typed Arrays의 구조, 종류, 사용 예제 및 장점을 다룹니다.

 

01. 서론

1) JavaScript Typed Arrays 소개

JavaScript는 고수준의 동적 언어로, 주로 웹 개발에서 많이 사용됩니다. 그러나 고수준의 특성으로 인해 저수준의 바이너리 데이터 처리가 필요할 때는 성능상 제약이 따릅니다. 이를 해결하기 위해 ECMAScript 2015(ES6)에서 도입된 것이 바로 Typed Arrays입니다. Typed Arrays는 원시 바이너리 데이터에 접근하고 조작할 수 있는 배열형 객체입니다. 이를 통해 JavaScript는 더욱 효율적으로 대규모 데이터 세트를 처리할 수 있게 되었습니다.

Typed Arrays는 ArrayBuffer를 기반으로 하여 여러 종류의 뷰(View)를 통해 데이터를 읽고 쓸 수 있도록 설계되었습니다. 이를 통해 이미지 처리, 파일 읽기 및 쓰기, 네트워크 통신 등에서 고성능 처리가 가능합니다.

2) Typed Arrays의 필요성과 중요성

Typed Arrays의 주요 필요성은 JavaScript가 고성능 데이터 처리를 효율적으로 수행할 수 있도록 하는 데 있습니다. 다음과 같은 상황에서 Typed Arrays의 필요성과 중요성이 두드러집니다:

• 이미지 처리: 고해상도 이미지를 처리할 때는 수많은 픽셀 데이터를 효율적으로 다뤄야 합니다. Typed Arrays를 사용하면 이러한 작업을 더 빠르고 효율적으로 수행할 수 있습니다.
• 네트워크 데이터 처리: 웹 애플리케이션은 종종 대용량 데이터를 네트워크를 통해 주고받아야 합니다. Typed Arrays는 이러한 바이너리 데이터를 효율적으로 처리할 수 있게 합니다.
• 파일 I/O: 파일 시스템에서 데이터를 읽고 쓸 때는 바이너리 데이터 처리가 필수적입니다. Typed Arrays는 파일의 바이너리 데이터를 직접 조작할 수 있게 해줍니다.
• 게임 개발: 고성능이 요구되는 게임 개발에서도 Typed Arrays는 필수적입니다. 게임의 그래픽 데이터나 물리 엔진 계산 등을 처리하는 데 매우 유용합니다.

 

02. Typed Arrays의 구조

1) Buffers와 Views 개념

Typed Arrays의 구조는 크게 두 가지 개념으로 나뉩니다: Buffers와 Views입니다.

• Buffer: 데이터의 원시 바이너리 저장소로 사용됩니다. JavaScript에서는 ArrayBuffer와 SharedArrayBuffer 두 가지 유형이 있습니다. Buffer는 크기를 지정하여 생성하며, 해당 크기만큼의 메모리를 할당합니다.
• View: Buffer의 데이터를 특정 형식으로 해석하고 조작하는 인터페이스입니다. 다양한 Typed Array(View) 타입이 있으며, 각각의 타입은 Buffer의 데이터를 특정한 방식으로 해석합니다.

예를 들어, Int8Array, Uint8Array, Float32Array 등의 다양한 View 타입이 존재하며, 각각의 타입은 8비트 정수, 8비트 부호 없는 정수, 32비트 부동 소수점 등의 형식으로 데이터를 해석합니다.

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

// Int32Array 뷰 생성
let int32View = new Int32Array(buffer);

// 값 설정
int32View[0] = 42;
int32View[1] = 43;

// 값 읽기
console.log(int32View[0]); // 출력: 42
console.log(int32View[1]); // 출력: 43
            

2) ArrayBuffer와 SharedArrayBuffer 설명

ArrayBuffer는 일반적인 용도의 버퍼로, 단일 스레드에서 사용되며 바이너리 데이터를 저장하는 데 사용됩니다. ArrayBuffer는 고정된 크기의 메모리 영역을 할당하며, 생성 시 크기를 지정해야 합니다. ArrayBuffer는 다양한 Typed Array와 DataView를 통해 접근할 수 있습니다.

SharedArrayBuffer는 여러 스레드에서 데이터를 공유할 수 있는 버퍼로, 웹 워커와 함께 사용됩니다. 이를 통해 멀티 스레드 환경에서도 데이터를 안전하게 공유하고 동기화할 수 있습니다. SharedArrayBuffer는 고성능을 요구하는 애플리케이션에서 유용하게 사용됩니다.

// ArrayBuffer 예제
let arrayBuffer = new ArrayBuffer(8); // 8바이트 크기의 버퍼 생성
let uint8View = new Uint8Array(arrayBuffer);
uint8View[0] = 255;
console.log(uint8View[0]); // 출력: 255

// SharedArrayBuffer 예제
let sharedBuffer = new SharedArrayBuffer(8); // 8바이트 크기의 공유 버퍼 생성
let uint8SharedView = new Uint8Array(sharedBuffer);
uint8SharedView[0] = 128;
console.log(uint8SharedView[0]); // 출력: 128
            

 

03. Typed Arrays의 종류

1) 각 Typed Array의 특징 (Int8Array, Uint8Array, Float32Array 등)

Typed Arrays는 다양한 데이터 타입을 지원하는 여러 종류의 배열 형식을 제공합니다. 각각의 Typed Array는 특정한 크기와 형식의 데이터를 처리하는 데 최적화되어 있습니다. 주요 Typed Array 타입은 다음과 같습니다:

• Int8Array: 8비트 부호 있는 정수형 배열. -128에서 127까지의 값을 저장할 수 있습니다.
• Uint8Array: 8비트 부호 없는 정수형 배열. 0에서 255까지의 값을 저장할 수 있습니다.
• Int16Array: 16비트 부호 있는 정수형 배열. -32768에서 32767까지의 값을 저장할 수 있습니다.
• Uint16Array: 16비트 부호 없는 정수형 배열. 0에서 65535까지의 값을 저장할 수 있습니다.
• Int32Array: 32비트 부호 있는 정수형 배열. -2147483648에서 2147483647까지의 값을 저장할 수 있습니다.
• Uint32Array: 32비트 부호 없는 정수형 배열. 0에서 4294967295까지의 값을 저장할 수 있습니다.
• Float32Array: 32비트 부동 소수점 숫자형 배열. 단정도 부동 소수점 숫자를 저장할 수 있습니다.
• Float64Array: 64비트 부동 소수점 숫자형 배열. 배정도 부동 소수점 숫자를 저장할 수 있습니다.

2) Typed Arrays의 데이터 타입과 크기

Typed Arrays는 각각 고유한 데이터 타입과 크기를 가지고 있으며, 이를 통해 다양한 종류의 데이터를 효율적으로 처리할 수 있습니다. 다음은 주요 Typed Arrays의 데이터 타입과 크기입니다:

• Int8Array: 1바이트 크기의 8비트 정수
• Uint8Array: 1바이트 크기의 8비트 부호 없는 정수
• Int16Array: 2바이트 크기의 16비트 정수
• Uint16Array: 2바이트 크기의 16비트 부호 없는 정수
• Int32Array: 4바이트 크기의 32비트 정수
• Uint32Array: 4바이트 크기의 32비트 부호 없는 정수
• Float32Array: 4바이트 크기의 32비트 부동 소수점 숫자
• Float64Array: 8바이트 크기의 64비트 부동 소수점 숫자

이러한 다양한 Typed Arrays는 각기 다른 데이터 타입을 효율적으로 처리할 수 있도록 설계되었습니다. 개발자는 필요에 따라 적절한 Typed Array를 선택하여 사용할 수 있습니다.

 

04. Typed Arrays 사용 예제

1) 기본 사용 예제

Typed Arrays를 사용하는 기본적인 방법은 다음과 같습니다:

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

// Int32Array 뷰 생성
let int32View = new Int32Array(buffer);

// 값 설정
int32View[0] = 42;
int32View[1] = 43;

// 값 읽기
console.log(int32View[0]); // 출력: 42
console.log(int32View[1]); // 출력: 43
            

이 예제에서는 16바이트 크기의 ArrayBuffer를 생성하고, 이를 Int32Array로 해석하여 값을 설정하고 읽는 과정을 보여줍니다.

2) 여러 뷰를 사용하는 예제

하나의 ArrayBuffer를 여러 뷰로 해석하여 사용하는 방법은 다음과 같습니다:

// ArrayBuffer 생성
let buffer = new ArrayBuffer(8); // 8바이트 크기의 버퍼 생성

// Int32Array와 Uint8Array 뷰 생성
let int32View = new Int32Array(buffer);
let uint8View = new Uint8Array(buffer);

// Int32Array를 사용하여 값 설정
int32View[0] = 16909060;

// Uint8Array를 사용하여 같은 버퍼의 값을 바이트 단위로 읽기
console.log(uint8View[0]); // 출력: 1
console.log(uint8View[1]); // 출력: 2
console.log(uint8View[2]); // 출력: 3
console.log(uint8View[3]); // 출력: 4
            

이 예제에서는 8바이트 크기의 ArrayBuffer를 생성하고, 이를 Int32Array와 Uint8Array로 각각 해석하여 값을 설정하고 읽는 방법을 보여줍니다.

3) 데이터 읽기와 쓰기 예제

Typed Arrays를 사용하여 데이터를 읽고 쓰는 방법은 다음과 같습니다:

// ArrayBuffer 생성
let buffer = new ArrayBuffer(12); // 12바이트 크기의 버퍼 생성

// Float32Array와 Uint8Array 뷰 생성
let float32View = new Float32Array(buffer);
let uint8View = new Uint8Array(buffer);

// Float32Array를 사용하여 값 설정
float32View[0] = 3.14;
float32View[1] = 2.71;

// Uint8Array를 사용하여 같은 버퍼의 값을 바이트 단위로 읽기
for (let i = 0; i < uint8View.length; i++) {
    console.log(uint8View[i]);
}
            

이 예제에서는 12바이트 크기의 ArrayBuffer를 생성하고, 이를 Float32Array와 Uint8Array로 각각 해석하여 값을 설정하고 바이트 단위로 값을 읽는 방법을 보여줍니다. 이렇게 하면, 하나의 버퍼를 다양한 뷰로 해석하여 데이터 처리의 유연성을 높일 수 있습니다.

 

05. Typed Arrays의 장점과 한계

1) Typed Arrays의 장점 (성능, 메모리 효율성 등)

Typed Arrays는 JavaScript에서 고성능 데이터 처리를 가능하게 하는 중요한 도구로, 여러 가지 장점을 가지고 있습니다.

• 성능: Typed Arrays는 원시 바이너리 데이터를 직접 조작할 수 있기 때문에 성능 면에서 큰 이점을 제공합니다. 특히 대용량 데이터를 다루거나 실시간 처리가 필요한 애플리케이션에서 높은 성능을 발휘합니다.
• 메모리 효율성: 일반적인 JavaScript 배열과 달리 Typed Arrays는 고정된 크기의 메모리 블록을 사용하여 데이터를 저장합니다. 이는 메모리 사용을 예측 가능하게 만들며, 메모리 관리가 효율적으로 이루어지게 합니다. 또한, Typed Arrays는 데이터 타입이 명확히 정의되어 있어, 데이터가 압축되지 않고 효율적으로 저장됩니다.
• 데이터 호환성: Typed Arrays는 다른 프로그래밍 언어에서 사용되는 데이터 구조와 호환성을 유지합니다. 이는 바이너리 데이터 교환이 필요한 환경에서 유용하게 사용될 수 있습니다. 예를 들어, 네트워크를 통해 데이터를 주고받거나 파일 시스템에서 데이터를 읽고 쓸 때 Typed Arrays는 큰 장점을 제공합니다.
• 다양한 데이터 타입 지원: Typed Arrays는 다양한 데이터 타입을 지원하여, 개발자가 필요한 데이터 타입을 선택하여 사용할 수 있습니다. Int8Array, Uint8Array, Float32Array 등 다양한 Typed Array를 통해 데이터 타입에 맞는 최적의 성능을 발휘할 수 있습니다.

2) 한계 및 주의사항

Typed Arrays는 많은 장점을 가지고 있지만, 몇 가지 한계와 주의사항도 존재합니다.

• 고정된 크기: Typed Arrays는 생성 시 고정된 크기를 가지며, 이후 크기를 변경할 수 없습니다. 이는 메모리 관리 측면에서 효율적일 수 있지만, 동적으로 크기를 조절해야 하는 상황에서는 불편할 수 있습니다.
• 다양한 데이터 타입 지원의 복잡성: 다양한 Typed Array가 존재하지만, 각각의 타입에 대한 이해와 적절한 사용이 필요합니다. 잘못된 타입을 사용할 경우 예상치 못한 결과가 발생할 수 있습니다.
• 범위 제한: 각 Typed Array는 특정 범위의 값을 저장할 수 있습니다. 예를 들어, Int8Array는 -128에서 127 사이의 값만 저장할 수 있습니다. 범위를 벗어나는 값을 저장하려고 하면 데이터 손실이 발생할 수 있습니다.
• 브라우저 호환성: 대부분의 현대 브라우저에서는 Typed Arrays를 지원하지만, 구형 브라우저에서는 지원하지 않을 수 있습니다. 따라서, 크로스 브라우저 호환성을 고려한 추가 작업이 필요할 수 있습니다.

 

06. 결론

1) Typed Arrays의 실전 적용 사례

Typed Arrays는 다양한 분야에서 효율적인 데이터 처리를 위해 사용됩니다. 다음은 몇 가지 실전 적용 사례입니다:

• 이미지 처리: 고해상도 이미지의 픽셀 데이터를 처리할 때 Typed Arrays는 매우 유용합니다. 이미지 데이터를 직접 조작하여 필터링, 변환, 분석 등을 빠르고 효율적으로 수행할 수 있습니다.

// 예시: 이미지 데이터 필터링
let buffer = new ArrayBuffer(4 * 100 * 100); // 100x100 픽셀 이미지
let uint8View = new Uint8Array(buffer);

// 필터 적용 (예: 밝기 조절)
for (let i = 0; i < uint8View.length; i++) {
    uint8View[i] = Math.min(255, uint8View[i] * 1.2); // 밝기 20% 증가
}
                

• 네트워크 데이터 처리: 바이너리 데이터를 주고받는 네트워크 애플리케이션에서도 Typed Arrays가 유용합니다. 예를 들어, WebSocket을 통해 바이너리 데이터를 효율적으로 주고받을 수 있습니다.

// 예시: WebSocket을 통한 바이너리 데이터 전송
let socket = new WebSocket("ws://example.com/socket");
let buffer = new ArrayBuffer(8);
let int32View = new Int32Array(buffer);
int32View[0] = 42;
socket.send(buffer);
                

• 게임 개발: 게임 개발에서 그래픽 데이터 처리나 물리 엔진 계산 등에 Typed Arrays가 사용됩니다. 높은 성능과 메모리 효율성을 제공하여 실시간 처리를 가능하게 합니다.

// 예시: 게임 엔진에서의 위치 데이터 저장
let positionBuffer = new ArrayBuffer(4 * 3); // x, y, z 좌표 저장
let float32View = new Float32Array(positionBuffer);
float32View[0] = 10.5; // x 좌표
float32View[1] = 20.2; // y 좌표
float32View[2] = 5.0;  // z 좌표
                

2) Typed Arrays를 활용한 성능 최적화 방법

Typed Arrays를 활용하여 성능을 최적화하는 방법은 다음과 같습니다:

• 적절한 Typed Array 선택: 처리할 데이터의 특성에 맞는 Typed Array를 선택하여 사용합니다. 예를 들어, 정수 데이터를 처리할 때는 Int8Array나 Uint8Array를, 부동 소수점 데이터를 처리할 때는 Float32Array나 Float64Array를 사용합니다.
• 배치 처리: 데이터를 한 번에 처리하는 배치 처리를 통해 성능을 최적화할 수 있습니다. 대량의 데이터를 한 번에 읽고 쓰는 것이 개별적으로 처리하는 것보다 효율적입니다.
• 버퍼 재사용: 동일한 크기의 데이터 처리가 반복되는 경우, 새로운 버퍼를 생성하는 대신 기존 버퍼를 재사용하여 메모리 할당과 해제를 최소화합니다.
• Web Workers 활용: 멀티 스레드를 활용하여 데이터를 병렬로 처리함으로써 성능을 최적화할 수 있습니다. Web Workers를 사용하여 메인 스레드의 작업을 분산시킵니다.

// 예시: Web Workers를 사용한 병렬 처리
let worker = new Worker("worker.js");
let buffer = new ArrayBuffer(1024);
worker.postMessage(buffer, [buffer]);
                

Typed Arrays는 JavaScript에서 고성능 데이터 처리를 가능하게 하는 강력한 도구입니다. 이를 통해 다양한 응용 프로그램에서 효율적으로 데이터를 처리하고 성능을 최적화할 수 있습니다. 실전에서의 다양한 적용 사례와 최적화 방법을 통해 Typed Arrays의 활용도를 극대화할 수 있습니다.

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.16 - [Study] - 19. JavaScript에서 객체를 다루는 방법 | 웹 개발 기초

19. JavaScript에서 객체를 다루는 방법 | 웹 개발 기초

2024.07.16 - [Study] - 18. JavaScript Keyed Collections: Map, Set, WeakMap, WeakSet | 웹 개발 기초

18. JavaScript Keyed Collections: Map, Set, WeakMap, WeakSet | 웹 개발 기초

2024.07.12 - [AI] - 17. JavaScript 배열과 타입 배열의 모든 것 | 웹 개발 기초

17. JavaScript 배열과 타입 배열의 모든 것 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)