들어가기 전에

서버와 클라이언트 간의 통신은 웹 개발에서 핵심적인 요소입니다. 과거에는 XMLHTTPRequest를 통해 데이터를 주고받았지만, 이제는 fetch API를 사용하여 보다 간편하고 효율적인 방식으로 데이터를 요청하고 응답받을 수 있습니다. fetch API는 Promises를 기반으로 동작하며, 일반적으로 JSON 형태의 데이터를 주고받는데 활용됩니다.

이번 글에서는 자바스크립트 fetch API를 사용하여 서버와 클라이언트 간의 통신 방식에 대해 알아보겠습니다.

fetch API 기본 사용법

fetch API를 사용하여 서버로 요청을 보내려면 fetch 함수를 사용해야 합니다. fetch 함수는 다음과 같은 구조를 갖습니다.

fetch(url[, options])

url 파라미터는 요청을 보낼 서버의 URL 주소를 입력합니다. options 파라미터는 선택적으로 사용할 수 있는 객체입니다. 이 객체에는 HTTP 요청 메서드, 헤더, 바디 등의 정보를 정의할 수 있습니다. 여기에서는 기본적인 GET 요청을 예시로 살펴보겠습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 응답 받은 데이터 처리
  })
  .catch(error => {
    // 에러 처리
  });

위의 코드에서 fetch 함수는 https://api.example.com/data 주소로 GET 요청을 보냅니다. 그리고 .then 메서드를 사용하여 응답을 처리합니다. .catch 메서드를 사용하여 에러를 처리할 수도 있습니다.

요청 옵션 설정하기

fetch 함수의 두 번째 파라미터로 옵션 객체를 전달하여 요청에 관련된 설정을 할 수 있습니다. 대표적으로 HTTP 요청 메서드, 헤더, 바디 등을 설정할 수 있습니다.

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => {
    // 응답 받은 데이터 처리
  })
  .catch(error => {
    // 에러 처리
  });

위의 코드에서는 POST 요청을 보내고 있으며, Content-Type 헤더를 설정하여 전송하는 데이터의 타입이 JSON임을 명시하고 있습니다. 또한, body 속성을 사용하여 JSON 형식의 데이터를 전송하고 있습니다.

응답 처리하기

클라이언트가 서버로부터 응답을 받으면, .then 메서드를 사용하여 응답을 처리할 수 있습니다. fetch 함수의 반환값인 Response 객체를 통해 응답에 관련된 정보에 접근할 수 있습니다. 예를 들어, 응답의 상태 코드를 확인하려면 response.status 속성을 사용할 수 있습니다. 또한, JSON 형태의 응답 데이터를 처리하기 위해서는 .json() 메서드를 호출해야 합니다.

fetch('https://api.example.com/data')
  .then(response => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('응답이 실패했습니다.');
    }
  })
  .then(data => {
    // 응답 받은 데이터 처리
  })
  .catch(error => {
    // 에러 처리
  });

위의 코드에서는 응답의 상태 코드를 확인하고, 성공적인 응답인 경우에만 JSON 데이터를 처리하고 있습니다. 응답이 실패한 경우에는 Error 객체를 throw하여 에러를 처리하고 있습니다.

결론

자바스크립트 fetch API를 사용하면 간편하게 서버와 클라이언트 간의 통신을 구현할 수 있습니다. fetch 함수를 사용하여 요청을 보내고 응답을 처리하는 방법에 대해 알아보았습니다. 이를 토대로 서버와 클라이언트 간의 데이터 통신을 원활하게 구축할 수 있을 것입니다.