서버와 클라이언트 간의 효율적인 통신은 웹 애플리케이션의 성능과 사용자 경험에 중요한 역할을 합니다. 자바스크립트의 fetch API는 네트워크 요청을 간편하게 처리할 수 있는 기능을 제공하며, 서버와 클라이언트 간의 통신 방식을 개선하는데 도움을 줍니다.

fetch API란?

fetch API는 자바스크립트의 내장된 기능으로, 비동기 네트워크 요청을 수행하는 데 사용됩니다. 이 API는 HTTP 요청을 생성하고 응답을 다룰 수 있는 강력한 메서드를 제공합니다. 이를 통해 서버로부터 데이터를 가져오거나 서버에 데이터를 전송할 수 있습니다.

fetch API를 사용한 GET 요청 예제

아래는 fetch API를 사용하여 서버로 GET 요청을 보내는 간단한 예제입니다.

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

위 예제에서는 fetch 함수를 사용하여 https://api.example.com/users URL로 GET 요청을 보냅니다. 응답을 받은 후에는 response.json() 메서드를 사용하여 JSON 형식의 데이터로 파싱합니다. 그리고 나서 then 메서드를 사용하여 파싱된 데이터를 처리합니다. 만약 에러가 발생한다면 catch 메서드에서 에러를 처리할 수 있습니다.

fetch API를 사용한 POST 요청 예제

아래는 fetch API를 사용하여 서버로 POST 요청을 보내는 예제입니다. 이 예제는 JSON 형식의 데이터를 서버로 전송합니다.

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

위 예제에서는 fetch 함수의 두 번째 인자로 옵션 객체를 전달하여 요청을 구성합니다. 이 객체에는 method 속성으로 HTTP 메서드를 설정하고, headers 속성으로 요청 헤더를 설정하며, body 속성으로 요청 바디에 전송할 데이터를 설정합니다. 이후에는 GET 요청 예제와 동일하게 응답을 처리합니다.

요약

자바스크립트 fetch API를 사용하면 서버와 클라이언트 간의 통신을 효율적으로 수행할 수 있습니다. fetch API를 이용하면 네트워크 요청을 쉽게 생성하고, 응답을 다룰 수 있는 기능을 활용할 수 있습니다. GET, POST를 비롯한 다양한 요청을 처리할 수 있으며, 응답 데이터를 JSON 형식으로 파싱하여 다룰 수 있습니다. 이를 통해 웹 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있습니다.