[javascript] 비동기 데이터 요청을 이용한 미세먼지 정보 확인

11 Dec 2023

javascript

미세먼지 정보를 확인하는 웹 애플리케이션을 개발한다고 가정해봅시다. 사용자가 페이지를 열 때마다 최신 미세먼지 측정 정보를 표시해야 할 경우, 비동기 데이터 요청을 이용하는 것이 적합합니다. 이를 위해서는 JavaScript의 XMLHttpRequest 또는 fetch API를 사용하여 서버와 통신할 수 있습니다.

XMLHttpRequest를 이용한 예제

function getFineDustData() {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        displayFineDustInfo(data);
      } else {
        console.error('Failed to retrieve fine dust data');
      }
    }
  };
  xhr.open('GET', '/api/fine-dust');
  xhr.send();
}

function displayFineDustInfo(data) {
  // 미세먼지 정보를 표시하는 로직
}

fetch API를 이용한 예제

function getFineDustData() {
  fetch('/api/fine-dust')
    .then(response => {
      if (!response.ok) {
        throw new Error('Failed to retrieve fine dust data');
      }
      return response.json();
    })
    .then(data => {
      displayFineDustInfo(data);
    })
    .catch(error => {
      console.error(error);
    });
}

function displayFineDustInfo(data) {
  // 미세먼지 정보를 표시하는 로직
}

위의 예제에서는 XMLHttpRequest와 fetch API를 사용하여 서버에서 미세먼지 정보를 요청하고, 받아온 데이터를 표시하는 간단한 방법을 보여주고 있습니다.

앱의 효율성과 사용자 경험을 향상시키기 위해 비동기 데이터 요청을 통해 실시간으로 미세먼지 정보를 업데이트할 수 있게끔 구현하는 것이 좋습니다.

더 많은 정보와 예제 코드는 MDN 웹 문서 XMLHttpRequest와 Fetch API에서 확인할 수 있습니다.