Colin's Blog
자바스크립트 서버와 클라이언트 간 데이터 교환

이제 많은 웹 애플리케이션은 서버와 클라이언트 간 데이터를 교환하고 상호 작용하는 기능을 제공합니다. 이를 구현하기 위해 자바스크립트는 매우 강력한 도구입니다. 이 글에서는 자바스크립트를 사용하여 서버와 클라이언트 간 데이터 교환을 구현하는 방법에 대해 알아보겠습니다.

AJAX를 사용한 데이터 교환

AJAX(Asynchronous JavaScript and XML)는 자바스크립트를 사용하여 비동기적으로 서버와 데이터를 교환하는 기술입니다. 이를 통해 웹 페이지를 다시 로드하지 않고도 서버와 통신할 수 있습니다. 아래는 AJAX를 사용하여 서버와 데이터를 교환하는 간단한 예제 코드입니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 서버로부터 받은 데이터(response)를 처리하는 코드 작성
  }
};

xhr.send();

위의 코드는 XMLHttpRequest 객체를 사용하여 GET 요청을 서버에 전송합니다. 응답이 도착하면 onreadystatechange 이벤트 핸들러가 호출되고, 서버가 성공적으로 응답했을 경우 응답 데이터를 JSON 형식으로 처리합니다. 이후에는 받은 데이터를 원하는 방식으로 처리하면 됩니다.

Fetch API를 사용한 데이터 교환

Fetch API는 더욱 간단하고 강력한 방법으로 자바스크립트로 서버와 데이터를 교환하는 데 사용됩니다. 아래는 Fetch API를 사용하여 데이터를 교환하는 예제 코드입니다.

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    // 서버로부터 받은 데이터(data)를 처리하는 코드 작성
  })
  .catch(error => {
    // 오류 처리 코드 작성
  });

위의 예제에서는 fetch 함수를 사용하여 GET 요청을 서버에 보냅니다. 응답이 도착하면 첫 번째 .then 메서드에서 JSON 데이터로 응답을 처리하고, 두 번째 .then 메서드에서는 받은 데이터를 원하는 방식으로 처리합니다. 오류가 발생하면 .catch 메서드에서 오류를 처리합니다.

WebSocket을 사용한 실시간 데이터 교환

WebSocket은 클라이언트와 서버 사이에 실시간 양방향 통신을 가능하게 하는 프로토콜입니다. 이를 사용하면 서버와 클라이언트 간에 실시간으로 데이터를 주고받을 수 있습니다. 아래는 WebSocket을 사용하여 실시간 데이터 교환을 구현하는 예제 코드입니다.

var socket = new WebSocket('ws://localhost:3000');

socket.onopen = function() {
  // WebSocket 연결이 성공했을 때 실행되는 코드
};

socket.onmessage = function(event) {
  var data = JSON.parse(event.data);
  // 서버로부터 받은 데이터(data)를 처리하는 코드 작성
};

socket.onclose = function() {
  // WebSocket 연결이 닫혔을 때 실행되는 코드
};

// 데이터 전송 예제
var data = { message: 'Hello, server!' };
socket.send(JSON.stringify(data));

위의 코드에서는 WebSocket 객체를 사용하여 서버와 WebSocket 연결을 설정합니다. 연결이 성공하면 onopen 이벤트 핸들러가 호출되고, 서버로부터 메시지가 도착하면 onmessage 이벤트 핸들러가 호출됩니다. 데이터 전송은 send 메서드를 통해 이루어집니다.

결론

자바스크립트를 사용하여 서버와 클라이언트 간 데이터 교환을 구현하는 방법에 대해 살펴보았습니다. AJAX, Fetch API 및 WebSocket을 활용하면 웹 애플리케이션에서 다양한 방식으로 데이터를 교환하고 상호 작용할 수 있습니다. 특정 상황에 맞게 가장 적합한 방법을 선택하여 애플리케이션을 개발해보세요.

© 2018 Colin. All rights reserved.