[javascript] 클라이언트-서버 통신

07 Dec 2023

javascript

웹 개발에서 클라이언트와 서버 간의 통신은 중요한 부분입니다. 클라이언트-서버 통신을 통해 클라이언트가 서버로 요청을 보내고, 서버는 그에 대한 응답을 반환합니다. 이를 통해 실시간으로 데이터를 주고받거나, HTML, CSS, JavaScript 파일 등의 리소스를 다운로드하여 웹 페이지를 구성할 수 있습니다.

HTTP 프로토콜

웹 개발에서 가장 일반적으로 사용되는 프로토콜은 HTTP(Hypertext Transfer Protocol)입니다. 클라이언트는 HTTP 요청 메시지를 서버로 보내고, 서버는 요청을 처리한 후 HTTP 응답 메시지를 클라이언트로 반환합니다. 이러한 요청과 응답은 다양한 메서드(GET, POST, PUT, DELETE 등)와 상태 코드(200 OK, 404 Not Found 등)를 통해 정의됩니다.

AJAX

AJAX(Asynchronous JavaScript And XML)는 비동기적으로 서버와 통신할 수 있도록 해주는 기술입니다. 이를 통해 웹 페이지를 새로고침하지 않고 데이터를 불러올 수 있습니다. JavaScript를 사용하여 AJAX 요청을 보내고, 서버는 요청을 처리한 후 JSON, XML 등의 형식으로 데이터를 반환합니다. 클라이언트는 이 데이터를 가지고 필요한 작업을 수행합니다.

XMLHttpRequest

AJAX 요청을 보내기 위해 가장 일반적으로 사용되는 객체는 XMLHttpRequest(XMLHttpRequest)입니다. 이 객체를 사용하여 HTTP 요청을 생성하고, 서버로 보내는 것이 가능합니다. 아래는 간단한 예제 코드입니다.

// XMLHttpRequest 객체 생성
var xhttp = new XMLHttpRequest();

// 요청에 대한 이벤트 핸들러 지정
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // 요청이 성공적으로 완료된 경우
    console.log(this.responseText);
  }
};

// GET 요청 보내기
xhttp.open("GET", "http://example.com/api/data", true);
xhttp.send();

// POST 요청 보내기
xhttp.open("POST", "http://example.com/api/data", true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.send(JSON.stringify({ key: value }));

위 코드에서 xhttp.onreadystatechange 함수는 요청의 상태가 변할 때마다 호출됩니다. 상태 코드가 4이고 HTTP 상태가 200인 경우, 요청이 성공적으로 완료된 것입니다. this.responseText는 서버에서 반환된 응답 데이터를 나타냅니다.

Fetch API

Fetch API는 JavaScript의 내장 API로, AJAX 요청을 보내기 위한 또 다른 방법입니다. XMLHttpRequest보다 더 간편하게 요청을 처리할 수 있습니다. 아래는 Fetch API를 사용한 예제 코드입니다.

// GET 요청 보내기
fetch('http://example.com/api/data')
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

// POST 요청 보내기
fetch('http://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: value }),
})
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

이 예제에서는 fetch() 함수를 사용하여 GET 또는 POST 요청을 보냅니다. then() 메서드를 사용하여 응답 데이터를 처리하고, catch() 메서드를 사용하여 오류를 처리합니다.

이렇게 클라이언트-서버 통신을 사용하면 웹 애플리케이션에서 실시간으로 데이터를 업데이트하거나, 서버와 상호작용하는 다양한 기능을 구현할 수 있습니다.

HTTP 프로토콜

AJAX

XMLHttpRequest

Fetch API

참고 자료