ArrayBuffer 오브젝트
바이너리 데이터 처리
- ArrayBuffer, TypedArray, DataView
ArrayBuffer
- 바이너리 데이터를 저장하는 오브젝트
TypedArray, DataView
- ArrayBuffer 에 CRUD 하는 오브젝트
Typed Array
Typed Array 단어를 띄우면 개념적인 접근
TypedArray : 9개 타입의 오브젝트 총칭
Typed Array 특징
타입이 있는 배열, Array는 아님
Array.isArray false
배열 엘리먼트의 데이터 타입이 같음
엘리먼트 값을 바이너리로 저장
문자열, 오브젝트를 사용할 수 없음
제한없이 배열에 엘리먼트 추가, 삭제
- 배열이 유동적이면 처리속도에 영향을 미침
Array 처리 메커니즘
엘리먼트를 삭제하면 그위치에 undefined 설정
배열을 읽을 때 undefined 엘리먼트를 제외시킴
엘리먼트 추가는 어쩔수 없이 속도가 떨어짐
배열을 정의할때는 엘리먼트 수를 정하고
- 이를 초과하여 추가할 수 없는 언어도 있음
메모리 측면의 자바스크립트
64bit(8byte)를 사용하여 값표현
숫자 1은 1바이트면 충분, 7바이트도 낭비
이미지 같은 청크(chunk) 데이터는 낭비 과장
Type Array 필요성
배열 길이가 변하지 않는 형태 필요
- 불편한 점도 있지만, 처리 속도 향상
숫자 1 표현에 바이너리로 1바이트 사용
- 필요한 바이트 사용, 메모리 절약
서버프로그램이 가능하게 되면서(nodejs) 올라가면 10만 동접….이기때문에 고려해야함
출현배경
WebGL 에서 스펙작성, 현재는 ES6로 통합
바이너리 데이터를 웹에서 처리하기 위한 것
빠른 처리 속도가 필요하기 때문
webapi
FIleReader.prototype.readAsArrayBuffer()
XMLHttpRequest.prototype.send()
Canvas 의 ImageData.data
최근 API에 적용증가
구현요소
Buffer, View
Buffer
메모리의 바이너리 데이터 저장영역
영역을 정의하고 이 범위에 데이터 저장
View
Buffer에 데이터 CRUD
일부 영역이 대상이 될 수 있음
let bufferObj = new ArrayBuffer(20);
값 View를 위한 메서트는 ArrayBuffer 오브젝트에 없음
단지 버퍼영역
let int32View = new Int32Array(bufferObj);
int 정수
32 32비트
4바이트 단위로 데이터를 View - 20을 4로 나누면 5개의 값을 View 할 수 있음
ArrayBuffer
버퍼길이 고정
생성한 인스턴스의 바이트 수 변경 불가
메모리 효율을 고려한 바이트 수 사용
길이 고정을 고려하여 프로그램 작성
이런 생각을 갖고 접근하는 것이 중요
View 메서드를 제공하지 않음
TypeArray, DataView 를 사용하여 View
View 할 때 ArrayBuffer의
데이터 타입과 사용할 바이트 수 지정
데이터 타입이란 데이터의 정수, 실수 타입
사용할 바이트 수란
값 하나를 저장하는 바이트 수
8,16,32,64 비트
타입이 맞지 않으면 값이 짤림
구조체
ArrayBuffer 의 엘리먼트를 나누어서 사용
구간(시작,끝)을 지정하여 사용
new ArrayBuffer(100)로 생성한 인스턴스를
1~50바이트는 1바이트 단위의 정수로 사용
51~100바이트는 4바이트 단위의 실수 사용
let bufffer = new ArrayBuffer()
prototype : ArrayBuffer
new ArrayBuffer()
ArrayBuffer 인스턴스 생성, 반환
파라미터에 ArrayBuffer의 바이트 수 지장
new ArrayBuffer(20);
20바이트의 인스턴스 생성
생성한 인스턴스의 각 바이트에 초기값 0으로 설정
firefox 48, chrome 52 는 3억까지는 괜찮으나 4억은 에러
chrome 51은 1억까지지원
slice()
ArrayBuffer 인스턴스에서 지정한 범위 복사, 반환
첫 번째 파라미터에 복사 시작 인덱스 지정
두 번째 파라미터에 복사 끝 인덱스 지정
isView()
- TypedArray or DataView 여부 반환
Symbol.species()
- construct 반환
TypedArray
9개 TypedArray Object
new Int8Array(5)
new 연산자와 생성자 이름으로 각 타입의 인스턴스 생성
Int8 타입은 1바이트(8비트)로 값을 View, 사인 비트를 가짐
%TypeArray%
ArrayBuffer의 데이터를 Array-like 형태로 View 하기 위한 오브젝트
엘리먼트 타입
엘리먼트 값을 View 하는 크기
1바이트는 int8,Uint8,Uin8C 사용
타입이 일정한 바이트의 연속
Array에는 없고 TypedArray 에 있는 메서드
Array에도 TypedArray에도 있는 메서드
이름이 같음
일부는 기능이 다름
Array 에는 있고 TypedArray는 없는 메서드
- concat(),pop(),push(),shift,splice(),unshft()
비트 값 구성
1바이트는 8비트로 구성
비트는 0 또는 1
2이상의 값, 음수값을 가질 수 없음
음수값은 왼쪽의 사인 비트에 1 설정
사인 비트를 갖는 엘리먼트 타입
- Int8,16,32,Float32
사인 비트가 없는 엘리먼트 타입
Uint8,8C,16,32
첫문자가 대문자 U
사인 비트를 값으로 사용, 값 범위가 늘어남
9개 타입의 TypedArray 인스턴스 생성, 반환
파라미터에 엘리먼트 수 지정
구조체
다른 데이터 타입을 하나로 묶어 놓은 형태
아래 형태로 ArrayBuffer를 구성하고 TypedArray 로 값 구성
DataView 오브젝트
ArrayBuffer View 방법
TypedArray 오브젝트 사용
- set()
DataView 오브젝트 사용
- getter, setter
let viewObj = new DataView(bufferObj);
viewObj.setInt8();
엔디언(Endian)
메모리에 데이터를 배치하는 기준
바이트 오더 라고도 부름
TypedArray 오브젝트
그래픽과같은 청크 데이터를 메모리에서 처리
엔디언 지정불가
그래픽 데이터 표현
- computer, disk 등에서 데이터를 받아 그래픽 카드와 같은 디바이스를 사용하여 표현
그래픽 고려사항
디바이스에 따라 메모리에 데이터를 배치하는 방법이 다름
디바이스에 맞추어 데이터 송수신 필요
이를 엔디언이라고 함
TypedArray - 메모리에서 데이터 처리
DataView - 디바이스와 데이터 송수신에 사용
new DataView
첫번째 파라미터 : 오프셋
두번째 파라미터 : 사용할 바이트
엔디언
메모리에 데이터를 배치하는 기준
빅
리틀
믹스드 -드물게 사용
엔디언에 따라 메모리에 값 배치 형태가 다름
- 이에 맞춰 값을 Write,Read