자바스크립트 XMLHTTPRequest와의 차이점

10 Sep 2023

javascript

XMLHTTPRequest는 웹 애플리케이션에서 서버와 통신을 하기 위해 사용되는 자바스크립트 객체입니다. 하지만 최근에는 fetch API와 같은 새로운 기술들이 등장했으며, 이를 사용하여 데이터를 비동기적으로 가져올 수 있습니다. 이번 블로그에서는 XMLHTTPRequest와 새로운 방식간의 주요 차이점을 살펴보겠습니다.

1. 비동기적 처리

XMLHTTPRequest는 기본적으로 동기적으로 요청을 처리합니다. 요청을 보내고 응답을 기다리는 동안 브라우저는 다른 작업을 수행할 수 없습니다. 이는 사용자 경험에 부정적인 영향을 미치며, 애플리케이션의 성능을 저하시킬 수 있습니다.

반면에 fetch API는 비동기적으로 데이터를 가져옵니다. 이는 애플리케이션이 요청을 보내는 동안 다른 작업을 수행할 수 있으며, 응답이 도착하면 콜백 함수를 통해 처리할 수 있습니다. 이를 통해 애플리케이션의 반응성과 성능을 향상시킬 수 있습니다.

// XMLHTTPRequest 예제
var xhr = new XMLHttpRequest();
xhr.open("GET", "/data", false);  // 동기적으로 요청을 보냄
xhr.send();

// fetch API 예제
fetch("/data")  // 비동기적으로 요청을 보냄
  .then(function(response) {
    // 응답 처리
  })
  .catch(function(error) {
    // 에러 처리
  });

2. 편리한 API

XMLHTTPRequest를 사용할 때는 많은 boilerplate 코드를 작성해야 했습니다. 예를 들어, 요청의 성공 여부와 상태 코드를 확인하기 위해 여러 메서드를 사용해야 했으며, 응답 데이터를 파싱하는 과정 또한 복잡하였습니다.

하지만 fetch API는 훨씬 간단하고 직관적인 API를 제공합니다. 응답에 대한 체이닝된 Promise를 사용하여 데이터를 추출하고, 요청에 대한 성공 여부를 바로 확인할 수 있습니다.

// XMLHTTPRequest 예제
var xhr = new XMLHttpRequest();
xhr.open("GET", "/data", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 응답 데이터 처리
  } else {
    // 에러 처리
  }
};
xhr.send();

// fetch API 예제
fetch("/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json"
  }
})
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Error: " + response.status);
    }
  })
  .then(function(data) {
    // 응답 데이터 처리
  })
  .catch(function(error) {
    // 에러 처리
  });

3. 크로스 오리진 요청 처리

XMLHTTPRequest는 기본적으로 동일 출처 정책(same-origin policy)에 따라 동작합니다. 이는 동일한 출처에서만 요청을 보낼 수 있으며, 다른 출처로 요청을 보낼 경우 보안 상의 이유로 요청이 차단됩니다.

하지만 fetch API는 CORS(Cross-Origin Resource Sharing)를 지원하며, 동일 출처 정책을 우회하여 서로 다른 출처 간에 데이터를 주고받을 수 있습니다. 이를 통해 웹 애플리케이션에서 외부 API를 사용하는 등 다양한 가능성을 열어줍니다.

// XMLHTTPRequest 예제 (크로스 오리진 요청 처리를 위해 추가 작업 필요)
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.withCredentials = true;  // 인증 정보를 전송
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 응답 데이터 처리
  } else {
    // 에러 처리
  }
};
xhr.send();

// fetch API 예제
fetch("https://api.example.com/data", {
  method: "GET",
  credentials: "include"  // 인증 정보를 전송
})
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Error: " + response.status);
    }
  })
  .then(function(data) {
    // 응답 데이터 처리
  })
  .catch(function(error) {
    // 에러 처리
  });

이상으로 XMLHTTPRequest와 fetch API의 차이점에 대한 소개를 마치겠습니다. fetch API의 등장으로 더욱 간편하고 성능 좋은 방식으로 데이터를 비동기적으로 가져올 수 있게 되었습니다. 애플리케이션의 개발과 유지보수를 위해 최신 기술을 사용하는 것이 중요하니, 적절한 선택을 통해 자바스크립트에서의 통신 방식을 개선해보세요.