웹 애플리케이션을 개발할 때, 웹 서버와의 통신은 빠질 수 없는 요소입니다. 이를 위해 자바스크립트의 Fetch API를 사용하여 웹 앱의 백엔드와 통합하는 방법에 대해 알아보겠습니다.

Fetch API란?

Fetch API는 웹 브라우저에서 네트워크 리소스를 요청하고 가져오기 위해 사용되는 API입니다. 이전까지는 주로 XMLHttpRequest 객체를 사용하여 AJAX 요청을 처리하였지만, Fetch API는 더욱 간편하고 유연한 사용법을 제공합니다.

Fetch API의 기본 사용법

Fetch API는 fetch() 함수를 통해 사용됩니다. 기본적인 사용법은 다음과 같습니다:

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 데이터 처리
  })
  .catch(error => {
    // 에러 처리
  });

위의 코드에서 url은 요청을 보낼 서버의 URL입니다. fetch() 함수는 Promise 객체를 반환하며, 이를 통해 비동기적으로 서버로부터 데이터를 가져올 수 있습니다. then() 메소드는 비동기 작업이 성공한 경우, catch() 메소드는 실패한 경우를 처리합니다.

웹 앱 백엔드와의 통합을 위한 Fetch API 사용 방법

웹 앱 백엔드와의 통합을 위해서는 서버에 요청을 보내는 방법과 서버로부터 받은 데이터를 처리하는 방법을 고려해야 합니다.

GET 요청 보내기

GET 요청을 보내려면 fetch() 함수에 URL을 전달하면 됩니다. 서버로부터 받은 응답 데이터는 response.json() 메소드를 통해 JSON 형태로 변환하여 사용할 수 있습니다.

fetch('/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => {
  // 데이터 처리
})
.catch(error => {
  // 에러 처리
});

POST 요청 보내기

POST 요청을 보내려면 fetch() 함수의 두 번째 인자로 옵션 객체를 전달해야합니다. 옵션 객체의 method 속성을 ‘POST’로 설정하고, 요청 바디에 전송할 데이터를 추가합니다.

const data = {
  name: 'John',
  age: 25
};

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

위의 예시에서는 요청 바디에 JSON 형식으로 데이터를 전송하고 있습니다.

결론

자바스크립트의 Fetch API는 간편하고 유연한 웹 서버 통신을 가능하게 해줍니다. GET, POST 등 여러 종류의 HTTP 요청을 보내고 서버로부터 받은 응답을 처리하는 방법을 익혀 웹 앱의 백엔드와의 통합을 원활하게 할 수 있습니다.