[javascript] 자바스크립트의 비동기 제어와 실시간 데이터 처리

08 Dec 2023

javascript

이번 글에서는 자바스크립트에서 비동기 처리를 하는 방법과 데이터를 실시간으로 처리하고 업데이트하는 기술에 대해 다루겠습니다.

비동기 프로그래밍

자바스크립트는 싱글 스레드로 동작하는 언어로, 비동기 처리가 중요합니다. 비동기 처리란 특정 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행하는 프로그래밍 방식을 말합니다.

콜백 함수

가장 기본적인 비동기 처리 방식은 콜백 함수를 사용하는 것입니다. 콜백 함수를 활용하여 비동기 작업이 끝난 후에 실행될 함수를 지정할 수 있습니다.

function fetchData(callback) {
  setTimeout(function() {
    callback('Data received');
  }, 1000);
}

function processData(data) {
  console.log('Processed data:', data);
}

fetchData(processData);

Promise

ES6부터는 Promise를 사용하여 비동기 작업을 보다 효율적으로 처리할 수 있습니다. Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체로, then과 catch 메서드를 통해 성공과 실패 시의 동작을 정의할 수 있습니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      resolve('Data received');
    }, 1000);
  });
}

fetchData()
  .then(data => console.log('Processed data:', data))
  .catch(error => console.error('Error:', error));

실시간 데이터 처리

실시간으로 변화하는 데이터를 처리하기 위해서는 주로 WebSocket이나 Server-Sent Events(SSE)를 활용합니다.

WebSocket

WebSocket은 양방향 통신을 지원하는 프로토콜로, 웹 소켓을 통해 서버와 실시간으로 데이터를 주고받을 수 있습니다.

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = function() {
  console.log('WebSocket connection opened');
};

socket.onmessage = function(event) {
  console.log('Received message:', event.data);
};

socket.onclose = function() {
  console.log('WebSocket connection closed');
};

Server-Sent Events (SSE)

Server-Sent Events (SSE)는 서버에서 클라이언트로 단방향 실시간 메시지를 보내는 기술로, EventSource 객체를 통해 이벤트를 수신할 수 있습니다.

const eventSource = new EventSource('/events');

eventSource.onmessage = function(event) {
  console.log('Received message:', event.data);
};

eventSource.onerror = function(event) {
  console.error('Error:', event);
};

결론

자바스크립트에서는 콜백 함수, Promise를 활용하여 비동기 작업을 처리하고, WebSocket, SSE를 활용하여 실시간 데이터를 처리할 수 있습니다. 이러한 기술을 활용하여 웹 애플리케이션 등 다양한 환경에서 실시간 데이터를 효과적으로 다룰 수 있습니다.

참고 자료: