우리가 개발하는 웹 사이트에서는 종종 서버에서 데이터를 가져와야 하는 상황이 발생합니다. 이를 위해 자바스크립트의 fetch API를 사용할 수 있습니다. fetch API는 브라우저에서 제공하는 네트워킹 기능을 사용하여 서버와의 통신을 단순화하고 처리할 수 있습니다.

fetch API를 사용하면 다양한 방식으로 데이터를 가져올 수 있습니다. GET, POST, PUT, DELETE 등 다양한 HTTP 메서드를 사용하여 데이터를 요청할 수 있습니다. 이러한 기능을 사용하여 웹 사이트의 흐름을 제어할 수 있습니다.

데이터 가져오기

fetch API를 사용하여 서버에서 데이터를 가져오는 가장 간단한 방법은 GET 요청을 사용하는 것입니다. 아래는 fetch API를 사용하여 데이터를 가져오는 예시입니다.

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

위의 예시 코드에서는 fetch 함수를 사용하여 서버로 GET 요청을 보내고, 그 결과를 비동기적으로 처리합니다. 응답은 체이닝된 then 메서드를 사용하여 JSON 형식으로 변환된 후에 콘솔에 출력됩니다. 만약 에러가 발생한다면 catch 메서드를 사용하여 에러를 처리합니다.

데이터 전송하기

fetch API를 사용하여 서버로 데이터를 전송하는 방법도 간단합니다. 아래는 POST 요청을 사용하여 데이터를 전송하는 예시입니다.

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 => {
    // 응답 처리 로직 작성
    console.log(data);
  })
  .catch(error => {
    // 에러 처리 로직 작성
    console.error(error);
  });

위의 예시 코드에서는 fetch 함수의 두 번째 인자로 전달하는 객체에 요청 메서드, 헤더 및 본문(body)을 지정하여 POST 요청을 보냅니다. JSON 형식으로 시리얼라이즈된 데이터는 body에 포함되어 전송됩니다.

웹 사이트 흐름 제어

fetch API를 사용하면 웹 사이트의 흐름을 제어하는 것이 가능해집니다. 예를 들어, 서버에서 가져온 데이터를 기반으로 페이지를 동적으로 업데이트하는 것이 가능합니다. 이를 위해 아래와 같은 예시 코드를 작성할 수 있습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터 처리 로직 작성
    updatePage(data);
  })
  .catch(error => {
    // 에러 처리 로직 작성
    console.error(error);
  });

function updatePage(data) {
  // 페이지 업데이트 로직 작성
  document.getElementById('content').textContent = data.content;
}

위의 예시 코드에서는 서버에서 데이터를 가져온 후에 updatePage 함수를 호출하여 페이지를 업데이트합니다. 이렇게 함으로써 사용자는 실시간으로 변경되는 데이터를 확인할 수 있습니다.

fetch API를 사용하여 웹 사이트의 흐름을 제어하는 것은 간단하면서도 강력한 기능입니다. 데이터 가져오기와 전송하기, 그리고 흐름 제어하기를 익히고 활용하여 보다 동적이고 효과적인 웹 사이트를 개발할 수 있습니다.