DataView란 무엇인가?
자바스크립트의 DataView 객체는 바이너리 데이터가 담긴 ArrayBuffer 안에서 다양한 숫자 타입(int8, int16, uint32, float64 등)을 읽고 쓸 수 있도록 저수준(low-level) 인터페이스를 제공합니다.
DataView를 사용하면 버퍼 내 특정 오프셋(바이트 위치)에 원하는 크기의 데이터를 읽거나 쓸 수 있으며, 필요에 따라 엔디안(little-endian / big-endian) 방식까지 지정할 수 있습니다. 참고로 DataView() 없이는 ArrayBuffer를 직접 조작할 수 없습니다.
주요 메서드
- setInt16(byteOffset, value) : 지정한 오프셋 위치에 16비트 정수를 저장합니다.
- getInt16(byteOffset) : 지정한 오프셋 위치에서 16비트 정수를 읽어옵니다.
- 이 외에도 setInt8, getUint32, setFloat64 등 다양한 타입별 읽기/쓰기 메서드를 제공합니다.
구현 예제
다음은 자바스크립트 DataView를 구현한 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript DataView()</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to change the array buffer contents using
DataView()
</h3>
<script>
let fillEle = document.querySelector(".sample");
var buffer = new ArrayBuffer(8);
var view1 = new DataView(buffer);
view1.setInt16(0, 0x2721);
fillEle.innerHTML = view1.getInt16(0).toString(16);
document.querySelector(".Btn").addEventListener("click", () => {
fillEle.innerHTML = view1.getInt16(0).toString(2);
});
</script>
</body>
</html>
코드 설명
위 코드는 먼저 new ArrayBuffer(8)로 8바이트 크기의 버퍼를 생성하고, 이를 기반으로 DataView 객체를 만듭니다. 그런 다음 setInt16(0, 0x2721)을 사용해 첫 번째 바이트 위치(오프셋 0)에 16진수 값 0x2721을 16비트 정수로 저장합니다.
페이지가 로드되면 저장된 값이 16진수 형태로 화면에 표시되며, 버튼을 클릭하면 같은 값을 2진수로 변환해 다시 출력하는 구조입니다.
실행 결과
페이지를 열면 아래와 같이 16진수 값이 출력됩니다.
“CLICK HERE” 버튼을 클릭하면 −
버튼을 클릭하는 순간 DataView에 저장된 동일한 값이 2진수 형태로 변환되어 화면에 다시 렌더링되는 것을 확인할 수 있습니다. 이처럼 DataView 하나만으로 같은 바이너리 데이터를 다양한 진법과 타입으로 자유롭게 읽고 쓸 수 있습니다.