[javascript] 자바스크립트의 비동기 제어와 웹소켓 통신

08 Dec 2023

javascript

저희는 이 블로그에서 자바스크립트의 비동기 제어와 웹소켓 통신에 대해 알아보겠습니다.

비동기 제어

자바스크립트에서 비동기적으로 동작하는 작업들은 주로 Callbacks, Promises, 그리고 Async/Await를 사용하여 제어됩니다. Callbacks는 비동기 코드를 작성할 때 가장 기본적으로 사용되는 방법이지만, 콜백 헬(callback hell)과 같은 문제를 야기할 수 있습니다. Promises는 콜백 헬을 해결하기 위해 등장했고, ES2017(ES8)에서 추가된 Async/Await는 비동기 코드를 작성하고 읽기 쉽게 만들어줍니다.

아래는 Promises와 Async/Await를 사용한 예제입니다.

// Promise 예제
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 2000);
  });
}

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
});

// Async/Await 예제
async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 2000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

웹소켓 통신

웹소켓은 클라이언트와 서버 간 양방향 통신을 제공하는 TCP 기반 프로토콜입니다. HTTP 프로토콜과 달리 웹소켓은 서버로부터 데이터를 주도적으로 받을 수 있어 실시간 통신이 필요한 애플리케이션에 적합합니다. 웹소켓을 사용하면 실시간 채팅, 주식 시세 업데이트 등의 기능을 구현할 수 있습니다.

웹소켓을 이용한 간단한 클라이언트-서버 통신 예제는 아래와 같습니다.

// 클라이언트
const socket = new WebSocket('ws://localhost:3000');

socket.onopen = () => {
  console.log('웹소켓 연결이 열렸습니다.');
  socket.send('안녕하세요, 서버!');
};

socket.onmessage = (event) => {
  console.log('서버로부터 메시지를 수신했습니다:', event.data);
};

// 서버 (Node.js 예제)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });

wss.on('connection', (ws) => {
  console.log('클라이언트가 연결되었습니다.');

  ws.on('message', (message) => {
    console.log('클라이언트로부터 메시지를 수신했습니다:', message);
    ws.send('안녕하세요, 클라이언트!');
  });
});

웹소켓을 사용하면 실시간 양방향 통신을 구현할 수 있으므로, 웹 어플리케이션에서 실시간 업데이트 및 알림 기능을 구현할 때 유용하게 사용될 수 있습니다.

이렇듯, 자바스크립트의 비동기 제어와 웹소켓 통신은 모던 웹 개발에서 중요한 주제로, 적절히 활용하면 보다 효율적이고 사용자 친화적인 웹 애플리케이션을 개발할 수 있습니다.

비동기 제어

웹소켓 통신

참고 자료