Rev. 2.73

최근 자바스크립트로 바이너리를 다룰 일이 생겨서 이런저런 삽질 중에 ArrayBuffer API는 짚고 넘어가야겠다는 생각이 들어 학습차 정리합니다. HTML5에서 지원하는 ArrayBuffer를 이용하여 Ajax 또는 WebSocket을 통해 바이너리 데이터를 서버와 브라우저 간에 송/수신할 수 있습니다. 이를테면, 서버와 클라이언트에서 Base64로 인코딩/디코딩하는 비용을 줄이거나 사진에서 EXIF 정보를 뽑아내거나, MediaSource API를 함께 사용하여 동영상 스트리밍을 구현할 수도 있으며, WebSocket으로 파일을 업로드하는 등 다양하게 활용할 수 있습니다.

일반적인 스트림(Stream) 객체에 의해 순차적으로 발생하는 이벤트로 전달되는 ArrayBuffer는 우리가 소위 말하는 Chunk 데이터이며 메모리에 위치하게 됩니다. 이것을 자바스크립트에서 다룰 수 있도록 하기 위해서 타입 배열 뷰(Typed array views)로 만들 수 있는데, 이는 ArrayBufferView 클래스로 생성할 수 있으며 그 종류는 다음과 같습니다.

// Signed integer arrays.
var i8 = new Int8Array(64)             // 1 byte,  8-bit twos complement signed integer
var i16 = new Int16Array(32)           // 2 bytes, 16-bit twos complement signed integer
var i32 = new Int32Array(16)           // 4 bytes, 32-bit twos complement signed integer

// Unsigned integer arrays.
var u8 = new Uint8Array(64)            // 1 byte,  8-bit unsigned integer
var u16 = new Uint16Array(32)          // 2 bytes, 16-bit unsigned integer
var u32 = new Uint32Array(16)          // 4 bytes, 32-bit twos complement signed integer
var pixels = new Uint8ClampedArray(64) // 1 byte,  8-bit unsigned integer

// Floating point arrays.
var f32 = new Float32Array(16)         // 4 bytes, 32-bit IEEE floating point number
var f64 = new Float64Array(8)          // 8 bytes, 64-bit IEEE floating point number

멋모르고 프로그래밍 세계에 발을 들여 놓은 저로서는(보는 것 만으로도 화가 남) 이렇게 많은 형식이 어디에 어떻게 쓰이는지 막연하기만 했는데, O'Reilly에서 출판한 Javascript: The Definitive Guide(자바스크립트 완벽 가이드) 6판 챕터 22에 뭔가 감을 잡을 수 있는 예문(문제 되면 삭제하겠습니다)이 있더군요.

var matrix = new Float64Array(9);   // A 3x3 matrix
var 3dPoint = new Int16Array(3);    // A point in 3D space
var rgba = new Uint8Array(4);       // A 4-byte RGBA pixel value
var sudoku = new Uint8Array(81);    // A 9x9 sudoku board

이것은 그냥 처리할 바이너리가 메모리에서 비트 연산에 효율적으로 사용될 유형을 선택해 주면 되는 정도로 어렴풋이 이해했습니다. 더 많은 내공이 쌓여야 이 타입들에 대한 개념을 탑재할 수 있을 듯합니다. ArrayBuffer를 다루는 더 쉬운 방법은 DataViewStringView를 이용하는 것입니다. DataView는 ArrayBuffer로부터 값을 읽거나 쓸 수 있도록 로우 레벨의 인터페이스를 제공하며, StringView는 문자열에 대한 C 스타일의 인터페이스를 제공합니다. 끝으로 준비한 예제는 비동기로 수신한 바이너리를 자바스크립트에서 사용할 수 있는 배열로 변환하여 어딘가에 써먹는 예제입니다.

var req = new XMLHttpRequest();
req.open('GET', "/your/binary/data");
req.responseType = "arraybuffer";
req.onload = function () {
    if (req.status != 200) {
        alert("Unexpected status code " + req.status);
        return false;
    }
    var buffer = req.response;
    var dataView = new DataView(buffer);
    var vectorLength = dataView.getUint8(0);
    var width = dataView.getUint16(1); // 0 + uint8 = 1 bytes offset
    var height = dataView.getUint16(3); // 0 + uint8 + uint16 = 3 bytes offset
    var vectors = new Float32Array(width * height * vectorLength);
    for (var i = 0, off = 5; i < vectors.length; i++, off += 4) {
        vectors[i] = dataView.getFloat32(off);
    }
    ...
}
req.send();

참고로 C언어에서는 다음과 같이 타입(Typedefs)을 선언합니다.

typedef unsigned char       uint8 // 8 bit unsigned integer
typedef          char        int8 // 8 bit signed integer 
typedef unsigned short     uint16 // 16 bit unsigned integer 
typedef          short      int16 // 16 bit signed integer 
typedef unsigned int  	   uint32 // 32 bit unsigned integer 
typedef          int        int32 // 32 bit signed integer 
typedef unsigned long 	   uint32 // 32 bit unsigned integer 
typedef          long       int32 // 32 bit signed integer

Comments

Got something to add? You can just leave a comment.

  • BeyondItBlog BeyondItBlog

    HTML5 ArrayBuffer API 이해하기: 최근 자바스크립트로 바이너리를 다룰 일이 생겨 이런 저런 삽질 끝에 ArrayBuffer API는 집고 넘어가야 겠다는 생각이 들어 학습차 정리합... firejune.com/1787

    from twitterfeed

  • iMaZiNe iMaZiNe

    @firejune 잘 읽겠습니다 >__< b

    from TweetDeck

  • iMaZiNe iMaZiNe

    RT @firejune: HTML5 ArrayBuffer API 이해하기 firejune.com/1787

    from TweetDeck

  • 박대선 박대선

    RT @beyonditblog: HTML5 ArrayBuffer API 이해하기: 최근 자바스크립트로 바이너리를 다룰 일이 생겨 이런 저런 삽질 끝에 ArrayBuffer API는 집고 넘어가야 겠다는 생각이 들어 학습차 정리합... http://…

    from twitter

  • JeongWoo Chang JeongWoo Chang

    RT @beyonditblog: HTML5 ArrayBuffer API 이해하기: 최근 자바스크립트로 바이너리를 다룰 일이 생겨 이런 저런 삽질 끝에 ArrayBuffer API는 집고 넘어가야 겠다는 생각이 들어 학습차 정리합... http://…

    from twitter

  • thinker0 thinker0

    RT @beyonditblog: HTML5 ArrayBuffer API 이해하기: 최근 자바스크립트로 바이너리를 다룰 일이 생겨 이런 저런 삽질 끝에 ArrayBuffer API는 집고 넘어가야 겠다는 생각이 들어 학습차 정리합... http://…

    from Flipboard

  • BeyondJ2EE BeyondJ2EE

    HTML5 ArrayBuffer API 이해하기: 최근 자바스크립트로 바이너리를 다룰 일이 생겨 이런 저런 삽질 끝에 ArrayBuffer API는 집고 넘어가야 겠다는 생각이 들어 학습차 정리합... firejune.com/1787

    from twitter

  • developerFarm developerFarm

    RT @beyondj2ee: HTML5 ArrayBuffer API 이해하기: 최근 자바스크립트로 바이너리를 다룰 일이 생겨 이런 저런 삽질 끝에 ArrayBuffer API는 집고 넘어가야 겠다는 생각이 들어 학습차 정리합... http://t.…

    from twitter

  • Yu sung-min Yu sung-min

    RT @beyondj2ee: HTML5 ArrayBuffer API 이해하기: 최근 자바스크립트로 바이너리를 다룰 일이 생겨 이런 저런 삽질 끝에 ArrayBuffer API는 집고 넘어가야 겠다는 생각이 들어 학습차 정리합... http://t.…

    from twitter

  • 임철호 임철호

    RT @beyondj2ee: HTML5 ArrayBuffer API 이해하기: 최근 자바스크립트로 바이너리를 다룰 일이 생겨 이런 저런 삽질 끝에 ArrayBuffer API는 집고 넘어가야 겠다는 생각이 들어 학습차 정리합... http://t.…

    from twitter

  • 김재현 김재현

    RT @beyondj2ee: HTML5 ArrayBuffer API 이해하기: 최근 자바스크립트로 바이너리를 다룰 일이 생겨 이런 저런 삽질 끝에 ArrayBuffer API는 집고 넘어가야 겠다는 생각이 들어 학습차 정리합... http://t.…

    from Flipboard

  • Outsider Outsider

    RT @firejune: HTML5 ArrayBuffer API 이해하기 firejune.com/1787

    from twitter

  • Yu sung-min Yu sung-min

    RT @firejune: HTML5 ArrayBuffer API 이해하기 firejune.com/1787

    from twitter

  • 허어... 바이너리까지 다뤄 이제 ㅋ

    reply edit

  • 걍 C를 배우는게 낫겠어...

    reply edit

  • ㅎㅎㅎ 예전에는 C 로만 되던걸 js 로 하는거라고 생각해.
    세상 좋잖아!

    reply edit

  • Again Startup Again Startup

    RT @beyondj2ee: HTML5 ArrayBuffer API 이해하기: 최근 자바스크립트로 바이너리를 다룰 일이 생겨 이런 저런 삽질 끝에 ArrayBuffer API는 집고 넘어가야 겠다는 생각이 들어 학습차 정리합... http://t.…

    from twitter

  • So, Dong-Sub So, Dong-Sub

    RT @firejune: HTML5 ArrayBuffer API 이해하기 firejune.com/1787

    from twitter

  • Shrek Shrek

    우와 돌아 오셨다~~~~글 감사합니다.

    reply edit

Your Reaction Time!

captcha

avatar