웹 사이트에서 자바스크립트를 사용하여 데이터를 요청하고 응답 받는 일은 매우 일반적입니다. 자바스크립트 fetch API는 이러한 작업을 간편하게 처리할 수 있는 강력한 도구입니다. fetch API는 일반적으로 서버에 HTTP 요청을 보내고 응답을 받아오는 경우에 사용됩니다.

fetch API 기본 사용법

fetch API는 Promise 기반의 API로, 네트워크 요청을 보내고 응답을 받아오기 전까지 대기합니다. 그런 다음 응답을 처리하기 위한 콜백 함수를 사용하여 데이터를 활용할 수 있습니다. 자바스크립트의 fetch() 함수를 사용하여 요청을 보내고 응답을 받아오는 방법에 대해 알아보겠습니다.

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

위의 예시에서는 fetch() 함수를 사용하여 https://api.example.com/data 주소로 GET 요청을 보냅니다. .then(response => response.json())은 응답 객체에서 JSON 데이터를 추출하는 역할을 합니다. 그리고 .then(data => { ... })로 받은 데이터를 활용합니다. 만약 요청이 실패한 경우 .catch(error => { ... })으로 오류를 처리할 수 있습니다.

자바스크립트 fetch API를 사용한 웹 사이트 흐름 제어

자바스크립트 fetch API는 웹 사이트 흐름을 제어하는 데 매우 유용한 도구입니다. 예를 들어, 웹 사이트에서 사용자에게 폼을 제출하고 결과를 받아올 때 fetch API를 사용하여 서버와 데이터를 주고받을 수 있습니다.

// 폼 제출 핸들러
function handleSubmit(event) {
  event.preventDefault();

  const formData = new FormData(event.target);

  fetch('https://api.example.com/submit', {
    method: 'POST',
    body: formData
  })
    .then(response => response.json())
    .then(data => {
      // 응답 데이터 활용
      console.log(data);
    })
    .catch(error => {
      // 오류 처리
      console.error(error);
    });
}

// 폼 제출 이벤트 리스너 등록
const form = document.getElementById('myForm');
form.addEventListener('submit', handleSubmit);

위의 예시에서는 handleSubmit 함수가 폼 제출 이벤트를 처리합니다. event.preventDefault()는 폼의 기본 동작인 페이지 새로고침을 방지합니다. 그리고 FormData 객체를 사용하여 폼의 데이터를 가져옵니다. 이렇게 가져온 데이터를 fetch() 함수로 POST 요청을 보내고, 응답을 받아와서 활용합니다.

결론

자바스크립트 fetch API를 사용하면 웹 사이트에서 서버와 손쉽게 데이터를 주고받을 수 있습니다. 이를 활용하여 웹 사이트의 흐름을 제어하고 사용자와 상호작용하는 기능을 구현할 수 있습니다. fetch API의 간단한 사용법과 웹 사이트 흐름을 제어하는 예시를 살펴봤는데요. 자바스크립트 fetch API를 잘 활용하면 좀 더 동적이고 효율적인 웹 프로그래밍을 구현할 수 있습니다.