JavaScript DataView: 초보자 가이드

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 DataView 객체의 세계로 흥미로운 여정을 떠납니다. 이전에 들어보지 못한 사람도 걱정 마세요 - 이 튜토리얼이 끝나면 프로처럼 이진 데이터를 다룰 수 있을 것입니다!

JavaScript - DataView

DataView는 무엇인가요?

자세한 내용에 들어가기 전에 기본적인 내용부터 시작해보겠습니다. 상상해보세요, 당신은 이진 데이터로 가득 찬 수수께끼의 패키지를 받은 탐정입니다. 이를 어떻게 이해할 수 있을까요? 이때 DataView가 구조물을 제공해줍니다!

DataView 객체는 ArrayBuffer에서 여러 수학 타입을 읽고 쓸 수 있게 해주며, 컴퓨터의 엔디언성에 관계없이 작동합니다 ( 걱정 마세요, 나중에 설명드리겠습니다). 이진 데이터를 위한 대역적 변換기似的입니다!

문법

먼저 DataView 객체를 어떻게 만드는지 살펴보겠습니다:

new DataView(buffer [, byteOffset [, byteLength]])

이것이 무서워서는 안 됩니다! 보이는 것보다 간단합니다. 이를 조금 더 자세히 설명해보겠습니다:

buffer: 이는 우리의 ArrayBuffer이며, 이진 데이터의 컨테이너입니다.
byteOffset (선택 사항): 버퍼에서 읽기 시작할 위치입니다.
byteLength (선택 사항): 우리의 뷰에 포함시킬 바이트 수입니다.

예제: DataView 객체 생성

손을 dirt고 우리의 첫 번째 DataView 객체를 생성해보겠습니다:

// 먼저 16 바이트의 ArrayBuffer를 생성합니다
const buffer = new ArrayBuffer(16);

// 지금, 전체 버퍼를 덮는 DataView를 생성해봅시다
const view1 = new DataView(buffer);

// 지금, 바이트 12에서 시작하여 4 바이트 길이의 다른 DataView를 생성해봅시다
const view2 = new DataView(buffer, 12, 4);

console.log(view1.byteLength); // 출력: 16
console.log(view2.byteLength); // 출력: 4

이 예제에서, 우리는 먼저 16 바이트의 ArrayBuffer를 생성합니다. 이를 16 픽셀의 공백 캔버스라고 상상해보세요. 그런 다음 두 개의 DataView 객체를 생성합니다:

view1은 전체 버퍼를 덮습니다.
view2는 바이트 12에서 시작하여 마지막 4 바이트를 덮습니다.

이는 우리가 데이터를 볼 수 있는 두 개의 다른 확대镜과 같습니다!

JavaScript DataView 프로퍼티

DataView는 몇 가지 유용한 프로퍼티를 가지고 있습니다. 살펴보겠습니다:

프로퍼티	설명
buffer	DataView가 참조하는 ArrayBuffer를 반환합니다
byteLength	DataView의 길이(바이트 단위)를 반환합니다
byteOffset	DataView의 오프셋(바이트 단위)을 ArrayBuffer의 시작에서 반환합니다

이러한 프로퍼티를 어떻게 사용할 수 있는지 보겠습니다:

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer, 2, 12);

console.log(view.buffer);       // ArrayBuffer(16)
console.log(view.byteLength);   // 12
console.log(view.byteOffset);   // 2

이 예제에서, 우리는 버퍼의 바이트 2에서 시작하여 12 바이트 길이의 DataView를 생성합니다. 프로퍼티를 사용하여 이 세부 정보를 확인할 수 있습니다.

JavaScript DataView 메서드

이제 흥미로운 부분으로 넘어가겠습니다 - 메서드! DataView는 다양한 수학 타입을 읽고 쓰는 메서드를 제공합니다. 가장 흔히 사용되는 메서드를 표로 나열해보겠습니다:

메서드	설명
getInt8(byteOffset)	지정된 바이트 오프셋에서 부호 있는 8비트 정수를 가져옵니다
getUint8(byteOffset)	지정된 바이트 오프셋에서 부호 없는 8비트 정수를 가져옵니다
getInt16(byteOffset [, littleEndian])	지정된 바이트 오프셋에서 부호 있는 16비트 정수를 가져옵니다
getUint16(byteOffset [, littleEndian])	지정된 바이트 오프셋에서 부호 없는 16비트 정수를 가져옵니다
getInt32(byteOffset [, littleEndian])	지정된 바이트 오프셋에서 부호 있는 32비트 정수를 가져옵니다
getUint32(byteOffset [, littleEndian])	지정된 바이트 오프셋에서 부호 없는 32비트 정수를 가져옵니다
getFloat32(byteOffset [, littleEndian])	지정된 바이트 오프셋에서 32비트 부동 소수점을 가져옵니다
getFloat64(byteOffset [, littleEndian])	지정된 바이트 오프셋에서 64비트 부동 소수점을 가져옵니다

이러한 get 메서드에 대한 대응 set 메서드도 있습니다.

이러한 메서드를 어떻게 사용할 수 있는지 보겠습니다:

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

// 데이터를 씁시다
view.setInt16(0, 42);
view.setFloat32(2, 3.14);

// 지금, 데이터를 읽읍시다
console.log(view.getInt16(0));   // 출력: 42
console.log(view.getFloat32(2)); // 출력: 3.140000104904175

이 예제에서, 우리는 바이트 오프셋 0에서 16비트 정수(42)를 쓰고, 바이트 오프셋 2에서 32비트 부동 소수점(3.14)을 씁니다. 그런 다음 이 값을 다시 읽습니다. 부동 소수점 값이 정확히 3.14가 아닌 이유는 이진 방식으로 저장되기 때문입니다.

엔디언의 미스터리

처음에 엔디언을 언급했을 때 기억하시나요? 이제 이 미스터리를 벗기겠습니다! 엔디언은 바이트가 더 큰 수치로 변환될 때의 순서를 의미합니다. 두 가지가 있습니다:

리틀 엔디언: 가장 작은 비트가 먼저 옵니다.
빅 엔디언: 가장 큰 비트가 먼저 옵니다.

수를 쓰는 것을 생각해보세요: 123은 빅 엔디언(가장 큰 자릿수가 먼저)이고, 321은 리틀 엔디언(가장 작은 자릿수가 먼저)입니다.

DataView의 아름다움은 여러 바이트 수치를 읽거나 쓸 때 엔디언을 지정할 수 있다는 점입니다. 예제를 보겠습니다:

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

view.setUint16(0, 0x1234, true);  // 리틀 엔디언을 위해 true
view.setUint16(2, 0x5678, false); // 빅 엔디언을 위해 false (또는 생략)

console.log(view.getUint16(0, true));  // 0x1234
console.log(view.getUint16(0, false)); // 0x3412
console.log(view.getUint16(2, true));  // 0x7856
console.log(view.getUint16(2, false)); // 0x5678

이 예제에서, 우리는 같은 값을 다른 엔디언으로 쓰고 다시 읽습니다. 이는 책을 왼쪽에서 오른쪽으로 읽거나 오른쪽에서 왼쪽으로 읽는 것과 같습니다!

결론

축하합니다! 여러분은 DataView의 세계로 첫 걸음을 뗐습니다. 우리는 DataView 객체를 생성하고, 그 프로퍼티를 사용하며, 메서드를 통해 데이터를 조작하는 방법을 다루었습니다. 엔디언의 미스터리도 풀었습니다!

이진 데이터를 다루는 것은 처음에는 무서울 수 있지만, DataView를 사용하면 강력한 도구를 손에 들게 됩니다. 이진 데이터를 위한 스위스 아르미 knife - 다양하고 정확하며 매우 유용합니다.

JavaScript 여정을 계속하면서, 파일 형식이나 네트워크 프로토콜과 같은 복잡한 이진 데이터 구조를 다루는 데 DataView가 매우 유용할 것을 발견하게 될 것입니다. 계속 연습하면 곧 진짜 코딩 탐정이 될 것입니다!

Credits: Image by storyset