웹 개발에서의 서버 기능은 매우 중요합니다. 사용자와의 상호작용이나 데이터 요청과 응답을 처리하기 위해서는 서버가 필요합니다. 이번 블로그 글에서는 자바스크립트의 fetch API를 사용하여 웹 서버 기능을 개발하는 방법에 대해 알아보겠습니다.

Fetch API란?

Fetch API는 자바스크립트에서 제공하는 네트워크 요청을 처리하는 API입니다. 기존의 XMLHttpRequest를 대체하는 현대적인 방식의 네트워크 통신을 제공합니다. Fetch API는 Promise 기반으로 작동하며, 간단하고 강력한 기능을 제공합니다.

기본적인 사용법

Fetch API를 사용하여 웹 서버 기능을 개발하기 위해서는 fetch 함수를 호출해야 합니다. fetch 함수는 URL과 옵션을 인자로 받아 네트워크 요청을 수행하고, Promise를 반환합니다.

fetch(url, options)
  .then(response => {
    // 응답 처리
  })
  .catch(error => {
    // 에러 처리
  });

URL은 요청을 보낼 서버의 주소이며, options는 요청에 대한 설정을 담고 있는 객체입니다. fetch 함수는 네트워크 요청을 비동기로 수행하고, 응답이 오면 성공 또는 실패에 따라 적절한 콜백 함수를 호출합니다.

GET 요청 처리

GET 요청은 주로 데이터를 서버로부터 가져오는 용도로 사용됩니다. fetch 함수에서 기본적으로 GET 요청이 수행되며, 응답 데이터를 가공하여 사용할 수 있습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터 가공 및 사용
  })
  .catch(error => {
    // 에러 처리
  });

위 예제에서는 https://api.example.com/data로 GET 요청을 보낸 후, 응답으로 오는 JSON 데이터를 가공하여 사용하는 방법을 보여줍니다. response.json() 메서드를 사용하면 응답 데이터를 JSON 형태로 파싱할 수 있습니다.

POST 요청 처리

POST 요청은 주로 서버에 데이터를 전송하는 용도로 사용됩니다. fetch 함수를 사용하여 POST 요청을 보내는 방법은 다음과 같습니다.

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

POST 요청의 경우에는 options 객체 내부에 method 속성을 ‘POST’로 설정하고, body 속성에 전송할 데이터를 JSON 형태로 문자열화하여 전달합니다. 또한 headers 속성을 사용하여 Content-Type을 지정해야 합니다. 이를테면 ‘application/json’으로 설정하면 JSON 데이터를 전송할 수 있습니다.

자세한 설정

Fetch API는 다양한 옵션을 제공하여 네트워크 요청을 더욱 세밀하게 컨트롤할 수 있습니다. 자세한 설정 예제는 Fetch API 문서를 참고하시기 바랍니다.

결론

자바스크립트 fetch API를 사용하여 웹 서버 기능을 개발하는 방법에 대해 알아보았습니다. fetch API를 사용하면 간단하면서도 강력한 네트워크 요청을 처리할 수 있으며, 다양한 대응되는 옵션들을 이용하여 원하는 기능을 구현할 수 있습니다. 웹 개발을 할 때는 fetch API를 적극 활용해보세요.