Node JS 버퍼(Buffer), 스트림(Stream) 개념 정리📑

이번에는 버퍼와 스트림에 대해 알아보겠습니다.  버퍼와 스트림의 개념을 살펴보고, 버퍼와 스트림을 이용한 코드들을 살펴보겠습니다.

📑목차
1. 버퍼(Buffer)
1-1. 버퍼란?
1-2. 버퍼의 문법
1-3. 버퍼 내장 모듈 사용 코드
2. 스트림(Stream)
2-1. 스트림이란?
2-2. 스트림 내장 모듈 사용 코드

📑서론

본론으로 들어가기전 혹시 "버퍼링" 이라는 키워드를 들어보셨을까요?  영상이나 게임, 음악 등등 갑자기 화면에 톱니바퀴 처럼 돌아가는 화면이 나타나면서 잠시 데이터를 받아오지 못하는 경우가 종종 있으실겁니다.

 

바로 이런 화면이 버퍼링 현상입니다.  

버퍼링 현상이란?

데이터를 모아서 처리하는 과정을 말한다

 

 

버퍼링 화면

📑본론

1. 버퍼(Buffer) 

1-1. 버퍼란?

바이너리 데이터 (0과1) 를 구분한 데이터를 일시적으로 저장하는 공간 

어?  그럼 위에 있는 버퍼링 현상이  버퍼에서 데이터를 저장해서 화면에 보여줘야하는데 버퍼에서 데이터가 부족하게 되면서 Pending(대기) 상태가 되는건가?  이렇게 생각할 수 있겠죠?

+ 💡 추가 정보 (참고용)

## Buffer
> 메모리를 할당해서 바이너리 데이터를 다루기 위해서 사용하는 객체
> javascript는 문자열 데이터를 많이 사용하는데 이것과 별개로 파일 시스템
> 네트워크에서 파일을 전송하는 경우 바이너리 데이터를 직접 다뤄야할 경우가 있다.
> Buffer 라는 클래스로 생성하는 객체로 바이너리 데이터를 다룰 수 있도록 한다.
> 어떤 작업을 할때 데이터를 처리하는 시간보다 데이터가 도착하는게 더 빠르다면
> 초과된 데이터 어느 데이터의 공간에서 대기를 하고 있어야하는데
> 초과된 데이터가 처리되기 전에 데이터가 어느정도 쌓일때 까지 기다린다.
> 그 데이터가 잠시 대기하는 영역이 buffer
> nodejs에서는 스트리밍을 하는 동안 자동으로 buffer를 생성해준다.
> 데이터 이동은 특정 시간동안 데이터를 받을 수 있는 데이터의 최소량과 최대량이 존재한다.
> 이 작업의 데이터를 처리하는 시간이 데이터가 도착하는 시간보다 빠르다면
> 컴퓨터는 일반적으로 RAM의 영역에서 스트리밍 중의 데이터가 일시적으로 모이고, 기다리다가 
> 데이터를 처리할 때 처리하기 위해서 내보내준다.
> nodejs는 데이터가 도착하는 시간이나 전송되는 속도를 제어할 수 있다.
> nodejs가 결정할 수 있는건 언제 데이터를 내보내서 처리할거냐?
> RAM의 작은 영역인 buffer에 데이터를 쌓아놓는다.

 

 

1-2. 버퍼의 문법

// alloc () : 버퍼 객체를 만들면서 size 10인 버퍼 객체를 만든다. (10 byte)
const buf = Buffer.alloc(10);
console.log(buf);
// from () : 버퍼를 만드는데 어떤 내용으로 만들건지
const buf2 = Buffer.from('hello');
console.log(buf2);

 

alloc( ) :  버퍼 객체를 만들면서 버퍼 객체의 크기를 설정하는 메서드
from( ) : 어떤 내용으로 버퍼를 생성할지 결정하는 메서드

 

첫 번째 buf 객체에서는 버퍼를 생성하는데 10byte 크기로 버퍼를 생성하고

두 번째 buf2 객체에서는 "hello"라는 문자열을 ASCII CODE 로 변환해서 버퍼에 저장합니다.

1-3. Node js 에서 버퍼 내장 모듈 사용 코드

// alloc  버퍼 객체를 만들면서 size 10인 버퍼 객체를 만든다. (10 byte)
const buf = Buffer.alloc(10);
// from () : 버퍼를 만드는데 어떤 내용으로 만들건지
const buf2 = Buffer.from('hello');
const buf3 = Buffer.from('안녕');
// console.log(buf);
// buffer. toString() : 바이너리 데이터를 문자열로 인코딩
// console.log(buf2.toString()); 
// console.log(buf3.toString());

// 빈공간의 버퍼에 내용을 넣은 것.
buf.write("aaaasㅁㅋㅊㅋㅌㅋㅊㅋㅌㅊ");
console.log(buf.toString());

let a = "A";
let b = 12;
// 아스키 코드로 변환
// charCodeAt() : 인덱스 번호로 매개변수 전달.
// charCodeAt 아스키 코드 숫자를 표현 === 65
// toString () : 문자열로 변환하면서 2진수로 변환한다. === 1000001
// padStart () === 매개변수로 전달한 첫 번째 값의 길이의 문자가
// 아니면 앞에 8자리가 아니면 0으로 채운다. 
a =  a.charCodeAt(0).toString(2).padStart(8,"0");
console.log(a);
b = b.toString(2).padStart(8, "0");

let c = a + b;
console.log(c);

// utf-8은 8bit씩 인코딩을 하는 것
// // 한글로 변환하는 메서드를 작성해보자
// const str = "가나다라마바사";
// // substr () : 문자열을 잘라서 반환
// console.log(str.substring(2 , 4));

const binaryToString = (binary) => {
    let result = "";
    // utf-8의 형식으로 8씩 잘라서 인코딩
    for (let i = 0; i < binary.length; i += 8) {
        // 2진수를 정수로 변환
        // substr() : 문자열의 어느 해당 위치를 변환
        // parseInt () : 매개변수로 전달한 정수로 변환을 하는데
        // 두 번째 매개변수로 값을 전달하면 어떤 형식의 문자열을 변환하는지 알 수 있다.

        // parsInt("10101010", 2) === 2진수의 문자열을 정수로 변환하겠다.
        const temp = parseInt(binary.substr(i, 8), 2) // temp 에는 정수로 받음
        // String.fromCharCode : 아스키 코드를 문자열로 변환
        // 아스키 코드의 변환시 값이 없으면
        // console.log(temp, "temp");
        // console.log(String.fromCharCode(temp), "fromCharCode"); 
        // 정수형으로 변환했을 때 아스키 코드로 변환이 가능하면
        // 아스키 코드로 변환한 문자열로 추가하고 정수의 숫자로 추가
        // 아스키 코드가 아닐 때 는 정수로 추가
        if(String.fromCharCode(temp) == false) {
            result += temp;
            console.log(result, "temp");
        }
        result += String.fromCharCode(temp); // result 에 temp를 변환
        console.log(result, "result");

    }
    return result;
}
console.log(binaryToString(c));

2. 스트림(Stream)

2-1. 스트림이란?

버퍼에서 저장된 데이터를  일정한 흐름으로 처리하는 방식 

 + 💡 추가 정보 (참고용)

## 스트림
> nodejs 스트림
> 한 지점에서 다른 지점으로 이동하는 일련의 데이터
> 방대한 데이터 처리를 할때 모든 데이터가 전부 다 사용가능할때 까지 기다리지 않아도 된다.
> 기본적으로 큰 데이터는 `청크`(처리할 단위)라는 단위로 세분화 되어 전송한다.
> buffer의 정의로 파일 시스템에서 바이너리 데이터가 이동한다는 것.

2-2. Node js 에서 스트림 내장 모듈 사용 코드

// node js의 내장 모듈
// stream

// Transform : 스트림 데이터를 읽고 데이터를 변환한 뒤, 다른 스트림으로 데이터를 전달하는데 사용
const { Transform }  = require("stream"); // stream 내장 객체를 가져오고, Transform 내장 모듈을 구조분해 할당

// nodejs 의 내장 모듈을 사용해서
// 파일을 읽거나 쓰거나
// fs : 파일 시스템 모듈을 사용해서 파일의 CRUD 제어할 수 있다.
const fs = require('fs');

// 청크의 크기
// 스트림에서 작업할 때 데이터를 받고 처리할 때마다 각 청크의 크기를 정해주자

const chunckSize = 64 * 1024; // 64KB

// Transform () : 생성자 함수를 호출할 때 필요한 옵션의 값을 가지고 있는 객체
const transformData = new Transform({
    highWaterMark : chunckSize, //  highWaterMark 키에는 청크에 크기의 값을 전달.
    transform(chunk, en, callback) { // 콜백은 변환이 되면 호출할 내용
        // chunk : 청크 단위의 데이터를 받는 것.
        // 여기서 this는 chunk
        // toUpperCase() : 대문자로 변환
        // toLawerCase() : 소문자로 변환
        this.push(chunk.toString().toUpperCase());
        // 변환이 완료가 되면 콜백함수 호출
        callback();
    }
})

// 파일을 text.txt 하나 만들고 파일에 있는 내용을 text2.txt 파일에 내용을 추가

// 파일을 읽어오고 
// fs.createReadStream() : 파일을 읽어오는데 스트림 데이터를 읽어온다.
// 매개변수 첫 번째 파일의 경로 
// 매개변수 두 번째 옵션 값을 객체로 전달
const text = fs.createReadStream('text.txt', {highWaterMark : chunckSize});
console.log(text);
// 파일 읽기 스트림 생성

// text2 파일에 내용에 스트림 데이터를 추가
// 파일에 스트림 데이터 추가 
// fs.createWriteStream() : 파일에 스트림 데이터를 추가한다.
// 매개변수 첫 번째
const text2 = fs.createWriteStream('text2.txt');

// 스트림으로 내용을 파일에서 읽어와서 다른 파일의 내용으로 추가
// pipe() : 메서드를 호출하는 객체의 데이터에 내용을 매개변수로 전달한 스트림 객체에 내용을 이동시킨다.
text.pipe(transformData).pipe(text2);

 

📑결론

버퍼와 스트림에 대해 간략하게 알아보았습니다. 평소 버퍼링 현상이 나타날 때마다 네트워크에 문제인가? 이렇게만 생각 했으나, 버퍼에 대해 간접적으로 알게되면서 왜 버퍼링 현상이 어떠한 과정으로 일어나는 지 알 수 있게 되었습니다. 스트림도 버퍼에 저장한 데이터를 일정한 흐름으로 처리하는 방식이라는 개념을 알 수 있었습니다. 감사합니다