웹 앱에서 백엔드와의 통신은 매우 중요합니다. 보다 많은 데이터를 가져오고 보내기 위해 효율적이고 간편한 방법을 사용하는 것이 필수적입니다. 자바스크립트의 fetch API는 이러한 목적을 위해 도입된 최신 웹 기술입니다.

fetch API를 사용하면 비동기적으로 서버로 HTTP 요청을 보내고, 응답을 받아와서 처리할 수 있습니다. 이를 통해 웹 앱은 더욱 동적이고 실시간적인 정보를 효과적으로 제공할 수 있습니다.

fetch API의 기본 사용법

fetch API는 Promise 기반의 인터페이스로 제공됩니다. 다음은 fetch API의 기본적인 사용법입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 서버에서 받아온 데이터에 대한 처리
  })
  .catch(error => {
    // 에러 처리
  });

위의 예제에서, fetch 함수는 인자로 URL을 받아와서 해당 URL로 GET 요청을 보냅니다. 이후 then 메소드를 사용하여 응답(response)을 처리합니다. 이때 response.json() 메소드를 사용하면 JSON 형태로 변환된 데이터를 얻을 수 있습니다.

이후의 then 메소드에서는 서버로부터 받아온 데이터를 활용하여 필요한 작업을 수행할 수 있습니다. 만약 에러가 발생한 경우에는 catch 블록에서 에러 처리를 할 수 있습니다.

POST 요청과 데이터 전송

fetch API를 사용하면 GET 요청 뿐만 아니라 POST 요청도 보낼 수 있습니다. 이를 통해 서버에 데이터를 전송할 수 있습니다.

const data = {
  name: 'John Doe',
  email: 'johndoe@example.com'
};

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => {
    // 서버에서 받아온 응답 처리
  })
  .catch(error => {
    // 에러 처리
  });

위의 예제에서는 fetch 함수의 두 번째 인자로 설정 옵션 객체를 전달합니다. 이 객체에서 method를 ‘POST’로 지정하여 POST 요청을 보냅니다. headers 객체를 사용하여 요청 헤더를 설정하고, body에는 전송할 데이터를 JSON 형태로 변환하여 전달합니다.

헤더 설정과 CORS 이슈

fetch API를 사용할 때, 요청 헤더를 설정할 수 있습니다. 이를 통해 서버에 특정 정보를 전달하거나 인증 정보를 제공할 수 있습니다. 예를 들어, 다음과 같이 요청 헤더를 설정할 수 있습니다.

fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer my-token',
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    // 응답 처리
  })
  .catch(error => {
    // 에러 처리
  });

이때 주의해야 할 것은, CORS (Cross-Origin Resource Sharing) 이슈입니다. 서로 다른 도메인 간에 통신을 할 때 보안 상의 이유로 기본적으로 제한이 있습니다. 따라서, 서버에서 통신을 허용하는 CORS 설정을 해주어야 합니다. 이는 서버 측에서 처리해야 하며, fetch API 사용자가 직접 해결할 수 있는 일은 아닙니다.

결론

자바스크립트의 fetch API를 사용하면 웹 앱에서 원할한 백엔드 통합을 할 수 있습니다. 비동기적인 통신을 효율적으로 처리하고, 서버에 데이터를 전송하고 응답을 받아와서 처리할 수 있습니다. fetch API를 활용하여 웹 앱을 동적이고 실시간적인 솔루션으로 만들어보세요.