자바스크립트 fetch API의 활용 예시와 사례 분석

10 Sep 2023

javascript

자바스크립트 fetch API는 웹 개발에서 네트워크 요청을 보내고 응답을 처리하는 데 사용되는 강력한 도구입니다. 이 API를 통해 서버와 데이터를 주고받을 수 있으며, 비동기적인 방식으로 데이터를 가져올 수 있습니다. 이번 블로그 글에서는 자바스크립트 fetch API의 활용 예시와 실제 사례를 살펴보겠습니다.

기본 사용법

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

이 코드는 fetch 함수를 사용하여 지정된 URL로 GET 요청을 보내고, 응답을 처리하는 예시입니다. fetch 함수는 Promise를 반환하며, 서버의 응답이 성공인 경우 then 메소드로 응답을 처리할 수 있고, 실패인 경우 catch 메소드로 에러를 처리할 수 있습니다.

JSON 데이터 가져오기

GET 요청을 통해 JSON 형식의 데이터를 가져오는 것은 자바스크립트 fetch API의 일반적인 사용법입니다. 서버로부터 받은 데이터를 JSON 메소드를 이용해 파싱하고, 이후 데이터를 처리하는 로직을 작성할 수 있습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터 처리 로직
  })
  .catch(error => {
    console.error('Error:', error);
  });

POST 요청 보내기

fetch API를 사용하면 GET 요청뿐만 아니라 POST 요청도 간편하게 보낼 수 있습니다. POST 요청을 보낼 때는 Request 객체를 생성하고, 해당 객체의 body에 데이터를 포함시켜 보낼 수 있습니다.

const data = {
  username: 'john',
  email: 'john@example.com'
};

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => {
    // 응답 처리 로직
  })
  .catch(error => {
    console.error('Error:', error);
  });

실제 사례 분석

실제로 자바스크립트 fetch API는 다양한 사례에서 사용되고 있습니다. 예를 들어, 사용자가 입력한 검색어를 기반으로 서버로부터 데이터를 가져와 결과를 화면에 표시하는 경우가 있습니다. 또는 사용자가 제출한 양식 데이터를 서버로 전송하여 처리하는 경우에도 fetch API를 사용할 수 있습니다.

이 외에도 자바스크립트 fetch API는 다양한 기능과 옵션을 제공하므로, 개발자가 특정 요구사항에 맞게 사용할 수 있습니다. 하지만, 보안 상의 이유로 CORS 등의 제약 사항이 있으므로, 이를 고려하여 사용해야 합니다.

결론

자바스크립트 fetch API는 네트워크 요청을 보내고 받는 데 유용한 도구입니다. 가독성이 좋고 간편한 문법을 가지고 있으며, Promise 기반의 비동기 처리를 지원합니다. 실제 사례에서도 다양한 방식으로 활용되고 있으므로, 학습과 활용을 통해 자신의 프로젝트에 적용해 보길 권장합니다.

References

MDN Web Docs - fetch API