자바스크립트 fetch API는 웹 애플리케이션에서 서버와의 통신을 위한 강력한 도구입니다. 이 블로그 포스트에서는 fetch API를 사용하여 웹 애플리케이션의 다양한 기능을 개발하는 방법에 대해 알아보겠습니다.

1. API 호출하기

fetch API는 네트워크 요청을 보내고 응답을 받는 기능을 제공합니다. 예를 들어, 외부 서버에서 데이터를 가져와서 해당 데이터를 웹 애플리케이션에 표시할 수 있습니다.

fetch('https://api.example.com/data') // API URL을 전달하여 데이터 요청
  .then(response => response.json()) // 응답 데이터를 JSON 형식으로 변환
  .then(data => {
    // 데이터 처리 및 표시
    console.log(data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

위의 예제에서는 fetch() 함수에 API의 URL을 전달하여 데이터를 요청합니다. then() 메서드를 사용하여 응답 데이터를 JSON 형식으로 변환하고, 다음 then() 메서드에서 데이터를 처리할 수 있습니다. 에러가 발생할 경우 catch() 메서드로 에러를 처리합니다.

2. POST 요청 보내기

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() 함수의 두 번째 매개변수로 옵션 객체를 전달하여 POST 요청을 보냅니다. method에 ‘POST’를 설정하고, headers 객체에는 ‘Content-Type’을 ‘application/json’으로 설정합니다. body에는 전송할 데이터를 JSON 형식으로 문자열로 변환하여 전달합니다.

3. 파일 업로드하기

fetch API를 사용하여 파일을 서버에 업로드할 수도 있습니다. FormData 객체를 사용하여 파일을 포함한 데이터를 전송할 수 있습니다.

const fileInput = document.getElementById('file-input'); // 파일 입력 요소

const formData = new FormData();
formData.append('file', fileInput.files[0]); // 파일 추가

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

위의 예제에서는 <input type="file"> 요소를 통해 사용자로부터 파일을 입력받습니다. FormData 객체에 파일을 추가한 후, fetch() 함수를 사용하여 서버에 POST 요청을 보냅니다. body에는 FormData 객체를 전달합니다.

결론

자바스크립트 fetch API를 사용하여 웹 애플리케이션의 다양한 기능을 개발할 수 있습니다. API 호출, POST 요청, 파일 업로드 등 다양한 기능을 구현할 수 있으며, 비동기 처리를 위한 Promise 체인을 사용하여 데이터를 효율적으로 처리할 수 있는 장점이 있습니다. 자바스크립트 fetch API를 활용하여 웹 애플리케이션을 더욱 다양하고 효율적으로 개발해보세요!