Fetch API와 AJAX(XMLHttpRequest)의 주요 차이점: 현대적인 웹 개발을 위한 비동기 통신의 선택

Fetch API와 AJAX(XMLHttpRequest)의 주요 차이점은 설계 철학, 사용법, 그리고 현대 웹 개발에서의 적합성에 있습니다. 아래에서 주요 차이를 정리해드리겠습니다.

---

1. 설계 방식

• AJAX (XMLHttpRequest)
  • 1999년에 도입된 기술로, 비동기 HTTP 요청을 가능하게 만든 초기 방법입니다.
  • 이름에 "XML"이 포함되어 있지만, JSON이나 텍스트 등 다양한 데이터를 처리할 수 있습니다.
  • 콜백 기반으로 동작하며, 코드가 복잡하고 읽기 어려워질 수 있습니다(예: "Callback Hell").
• Fetch API
  • 최신 웹 표준으로, Promise 기반으로 설계되어 콜백 대신 .then()과 async/await를 사용할 수 있습니다.
  • 더 직관적이고 가독성이 높은 코드 작성이 가능합니다.

---

728x90

2. 코드 사용 예시

AJAX (XMLHttpRequest)

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error(`Error: ${xhr.status}`);
  }
};

xhr.onerror = function () {
  console.error('Network error occurred.');
};

xhr.send();

Fetch API

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

비교:
Fetch API는 코드가 더 간결하고 직관적입니다. 에러 처리도 통합된 방식으로 이루어집니다.

---

3. Promise 기반

• AJAX:
  • 콜백 기반으로 동작하므로, 코드가 복잡해지고 가독성이 떨어질 수 있습니다.
  • Promise를 직접 감싸서 사용해야 비슷한 동작을 구현할 수 있습니다.
• Fetch:
  • Promise를 기본으로 지원하며, async/await와 함께 사용하면 동기 코드처럼 작성할 수 있어 가독성이 매우 높아집니다.

  async function fetchData() {
    try {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error:', error);
    }
  }
  

---

4. 응답 처리 방식

• AJAX:
  • 응답 데이터를 명시적으로 처리해야 합니다.
  • 예를 들어, JSON 데이터를 사용하려면 JSON.parse()를 호출해야 합니다.

  const data = JSON.parse(xhr.responseText);
  

• Fetch:
  • 응답 데이터를 자동으로 파싱하는 메서드를 제공합니다(예: response.json(), response.text() 등).

---

5. 에러 처리

• AJAX:
  • 네트워크 에러(onerror)는 처리 가능하지만, HTTP 상태 코드를 세밀히 다루기는 어렵습니다.
• Fetch:
  • HTTP 상태 코드도 간단히 확인 가능하며, 네트워크 에러와 분리해서 처리할 수 있습니다.
  • 단, response.ok를 직접 확인해야 HTTP 상태 코드를 구분할 수 있습니다.

---

6. CORS 및 보안

• AJAX:
  • CORS를 직접 다루기 어렵고, 설정이 번거로울 수 있습니다.
• Fetch:
  • CORS를 기본적으로 지원하며, 요청 옵션에서 세부 설정이 가능합니다.

---

728x90

7. 브라우저 지원

• AJAX:
  • 오래된 브라우저에서도 작동하므로, 광범위한 호환성이 필요할 때 적합합니다.
• Fetch:
  • 최신 브라우저에서만 기본적으로 지원됩니다(IE에서는 지원되지 않음).
  • IE 호환이 필요한 경우 폴리필(polyfill)을 사용해야 합니다(예: whatwg-fetch).

---

8. 추가 기능

• Fetch API는 스트리밍 및 Request/Response 객체를 다룰 수 있는 더 확장된 기능을 제공합니다.
  AJAX는 단순한 HTTP 요청/응답 처리에 초점이 맞춰져 있습니다.

---

결론

1. 현대적인 웹 개발에서는 Fetch API가 더 직관적이고 강력하며, 유지보수에도 유리합니다.
2. AJAX는 오래된 코드나 특정 브라우저 호환성이 필요한 경우에 적합할 수 있습니다.
3. Fetch API가 복잡하거나 추가 기능이 필요할 경우, Axios와 같은 라이브러리도 고려할 수 있습니다.

추가로 궁금한 점이 있으시면 말씀해 주세요!