Fetch API

네트워크 통신의 새로운 표준

Fetch API는 기존의 XMLHttpRequest(XHR)를 대체하는 강력하고 유연한 네트워크 통신 API입니다. Promise 기반으로 설계되어 비동기 처리가 훨씬 간결하며, 콜백 지옥(Callback Hell)을 방지할 수 있습니다. 최신 웹 브라우저에 기본 내장되어 있어 별도의 라이브러리(axios 등) 없이도 RESTful API와 통신하고 데이터를 주고받는 데 가장 널리 사용됩니다.

주요 특징:

기능/특징	설명
Promise 기반	`async/await`와 함께 사용하여 가독성 높은 비동기 코드 작성 가능
Request/Response 객체	요청과 응답을 다루기 위한 유연하고 구조화된 객체 제공
CORS 기본 지원	교차 출처 리소스 공유(CORS) 요청을 직관적으로 처리

// Fetch API를 사용한 기본 GET 요청 예제
async function getUserData() {
  try {
    // 1. fetch 함수로 서버에 요청
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    
    // 2. 응답 상태 확인
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    // 3. JSON 데이터 파싱
    const data = await response.json();
    console.log("사용자 이름:", data.name);
    console.log("이메일:", data.email);
    
  } catch (error) {
    console.error("데이터 로드 실패:", error);
  }
}

getUserData();