자바스크립트 대용량 데이터 전송 처리

10 Sep 2023

javascript

대용량의 데이터를 전송하거나 처리해야 할 때 자바스크립트는 매우 유용한 언어입니다. 이 글에서는 자바스크립트를 사용하여 대용량 데이터를 효율적으로 전송하고 처리하는 방법에 대해 알아보겠습니다.

1. 청크(chunk) 단위로 데이터 전송하기

대용량 데이터를 한 번에 전송하면 성능 문제가 발생할 수 있습니다. 대신, 데이터를 청크 단위로 나누어 전송하는 것이 좋습니다. 청크 단위로 데이터를 전송하면 클라이언트와 서버 사이의 네트워크 부하를 줄일 수 있습니다.

// 데이터를 청크 단위로 전송하는 예제

// 대용량 데이터
const largeData = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac fringilla sapien, vitae ullamcorper metus. Vestibulum metus ipsum, laoreet ut malesuada ac, pretium vel metus. Quisque sodales, ante auctor ullamcorper viverra, nisi enim condimentum metus, id sollicitudin orci arcu id elit.";

// 청크 단위로 데이터 전송
function sendChunks(data, chunkSize) {
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    // 청크 전송 로직 작성
    sendData(chunk);
  }
}

sendChunks(largeData, 10); // 10글자씩 청크로 나누어 전송

위 예제에서 sendData(chunk) 부분은 실제로 청크를 전송하는 로직을 구현해야 합니다.

2. 스트림(stream)으로 데이터 처리하기

대용량 데이터를 전송할 때, 한 번에 데이터를 모두 로드하여 메모리에 저장하는 것은 비효율적일 수 있습니다. 스트림을 사용하여 데이터를 조금씩 처리하면 메모리 사용량을 줄일 수 있습니다.

// 스트림을 사용하여 데이터 처리하는 예제

// 대용량 데이터 스트림
function DataStream(data) {
  this.data = data;
  this.currentIndex = 0;
}

DataStream.prototype.readChunk = function(chunkSize) {
  const chunk = this.data.slice(this.currentIndex, this.currentIndex + chunkSize);
  this.currentIndex += chunkSize;
  return chunk;
}

const largeData = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac fringilla sapien, vitae ullamcorper metus. Vestibulum metus ipsum, laoreet ut malesuada ac, pretium vel metus. Quisque sodales, ante auctor ullamcorper viverra, nisi enim condimentum metus, id sollicitudin orci arcu id elit.";

const dataStream = new DataStream(largeData);

let chunk;
while (chunk = dataStream.readChunk(10)) {
  // 청크 단위로 데이터 처리 로직 작성
  processData(chunk);
}

위 예제에서 dataStream.readChunk(10)은 10글자씩 데이터를 읽어오는 것을 의미합니다. 이렇게 스트림을 사용하여 대용량 데이터를 처리하면 메모리 사용량을 효율적으로 관리할 수 있습니다.

3. 웹소켓(websocket)을 활용한 실시간 데이터 전송

대용량 데이터를 실시간으로 처리해야 할 때는 웹소켓을 활용하는 것이 좋습니다. 웹소켓은 양방향 통신을 제공하며, 실시간으로 대용량 데이터를 전송할 수 있습니다.

// 웹소켓을 활용한 대용량 데이터 전송 예제

// 웹소켓 연결
const socket = new WebSocket('wss://example.com');

// 연결이 되었을 때 실행되는 이벤트 핸들러
socket.onopen = function() {
  // 대용량 데이터 전송
  socket.send(largeData);
};

// 메시지를 수신했을 때 실행되는 이벤트 핸들러
socket.onmessage = function(event) {
  const data = event.data;
  // 수신한 데이터 처리 로직 작성
  processData(data);
};

위 예제에서 largeData는 대용량 데이터를 의미하며, 웹소켓을 통해 서버로 전송됩니다. 서버에서 데이터를 처리한 결과는 웹소켓을 통해 클라이언트로 전송됩니다.

결론

자바스크립트를 사용하여 대용량 데이터를 효율적으로 전송하고 처리하는 방법에 대해 알아보았습니다. 청크 단위로 데이터를 전송하고, 스트림을 사용하여 메모리를 효율적으로 관리하며, 웹소켓을 활용하여 실시간으로 데이터를 전송할 수 있습니다. 이러한 기술들을 활용하여 대용량 데이터를 효율적으로 다룰 수 있습니다.