[js] 자바스크립트 String -> Buffer 변환 TypedArray 사용하기

ECMAScript6 부터 TypedArray 가 생겨 자바스크립트에서도 바이너리데이터를 손쉽게 다룰수 있게 됬다.

아마 내생각엔 ECMAScript 5 (2011년) 까지만해도 바이너리 데이터를 자바스크립트에서 다룬다는 것은 아주 극히 드문일이였을 터인데

V8엔진의 등장을 시작으로 node.js의 활성화, 서버사이드를 자바스크립트로 핸들링 가능하게 되면서 바이너리 데이터를 다루는 일이 빈번해지고 바이너리 데이터를 다룰 때 포퍼먼스를 향상시키기 위해 ECMAScript6때 등장한 듯 하다.

사실 기존에도, 지금도 바이너리 데이터를 String으로 다루긴 해도 되긴하나, 속도적인 측면과 데이터 유지운영에 있어 전문적인 버퍼를 다룰수 있는 오브젝트가 필요하긴 했다.

TypedArray의 기본적인 사용 방법은 ArrayBuffer 생성자를 통해 버퍼를 만들어 주고 BufferView를 통해 만든 버퍼를 쓰면 된다.

            var buf = new ArrayBuffer(length);

            var bufView = new Uint8Array(buf);

쉽게 생각해보면 ArrayBuffer는 버퍼의 크기를 정해주는 것이고 Uint8Array는 만든 버퍼를 어느정도로 잘라 인식 할 것인지를 나타내준다.

8바이트 ArrayBuffer를 만들었다고 가정해보자

buffer > [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ]

본 블로그에 유니코드에 대해 설명했듯이 문자를 몇바이트(유니코드 기준 : 코드유닛)로 나타낼 것 인가에 따라 같은 버퍼라도 읽을 때 전혀 다른 글자가 될 수 있다.

따라서 코드유닛을 결정해 주는 것이 바로 BufferView이다. 아래의 그림은 버퍼뷰를 아주 잘 표현 해주고 있다.

우리가 스트링을 버퍼로 변환하기 위해서 아래와 같은 함수를 추가하자.

String.prototype.toBuffer = function (){

            var buf = new ArrayBuffer(this.length * 2);                   

            var bufView = new Uint8Array(buf);                            

            for (var i = 0, strLen = this.length; i < strLen; i++) {      

                bufView[i] = this.charCodeAt(i);                          

            }

            return buf;

        }