자바스크립트 fetch API를 사용한 웹 사이트 모니터링 대시보드 구성

10 Sep 2023

javascript

웹 사이트 모니터링 대시보드는 여러 웹 사이트의 상태를 모니터링하고, 실시간으로 정보를 표시하는 유용한 도구입니다. 이번 포스트에서는 자바스크립트 fetch API를 사용하여 웹 사이트 모니터링 대시보드를 구성하는 방법을 알아보겠습니다.

fetch API란?

fetch API는 웹 브라우저에서 HTTP 요청을 보내고 응답을 받는 기능을 제공하는 자바스크립트 API입니다. 일반적으로 XHR(XMLHttpRequest)보다 더 간단하고 유연한 문법을 제공하기 때문에 많은 개발자들이 사용하고 있습니다.

fetch API를 사용하면 다양한 종류의 요청을 보내고, 응답을 처리할 수 있습니다. 대시보드에서는 웹 사이트의 상태를 확인하기 위해 GET 요청을 사용하여 웹 사이트의 정보를 가져올 수 있습니다.

대시보드 구성하기

HTML 파일 생성 및 구성 먼저 대시보드를 표시할 HTML 파일을 생성하고, 웹 사이트 상태를 나타낼 요소를 추가합니다. 예를 들어 다음과 같이 <div> 요소를 사용하여 각 웹 사이트의 상태를 표시할 수 있습니다.

<div id="dashboard">
  <div id="website1"></div>
  <div id="website2"></div>
  <!-- ... -->
</div>

자바스크립트 파일 생성 및 fetch API 사용 자바스크립트 파일을 생성하고, fetch API를 사용하여 웹 사이트의 상태를 가져오는 함수를 작성합니다. 예를 들어 다음과 같이 fetchWebsiteStatus 함수를 작성할 수 있습니다.

function fetchWebsiteStatus(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error('Failed to fetch website status');
      }
      
      return response.json();
    })
    .then(data => {
      // 상태를 표시하는 요소 업데이트
      updateWebsiteStatus(url, data.status);
    })
    .catch(error => {
      console.error(error);
      // 오류를 표시하는 요소 업데이트
      updateWebsiteStatus(url, 'Error');
    });
}

대시보드 초기화 및 상태 업데이트 대시보드를 초기화하고, 웹 사이트 상태를 주기적으로 업데이트하는 함수를 작성합니다.

const websites = [
  'https://example.com',
  'https://example.org',
  // ...
];

function initializeDashboard() {
  websites.forEach(url => {
    // 각 웹 사이트의 요소 초기화
    const websiteElement = document.getElementById(url);
    websiteElement.textContent = 'Loading...';
    
    // 웹 사이트 상태 가져오기
    fetchWebsiteStatus(url);
  });
}

function updateWebsiteStatus(url, status) {
  const websiteElement = document.getElementById(url);
  websiteElement.textContent = status;
}

setInterval(initializeDashboard, 60000); // 1분마다 상태 업데이트

실행 HTML 파일에서 자바스크립트 파일을 로드하고, initializeDashboard 함수를 호출하여 대시보드를 초기화합니다. 그러면 웹 사이트의 상태가 주기적으로 업데이트되는 모니터링 대시보드가 준비됩니다.

<!DOCTYPE html>
<html>
<head>
  <title>웹 사이트 모니터링 대시보드</title>
  <script src="dashboard.js"></script>
</head>
<body>
  <div id="dashboard">
    <div id="https://example.com"></div>
    <div id="https://example.org"></div>
    <!-- ... -->
  </div>
  <script>
    initializeDashboard();
  </script>
</body>
</html>

마치며

이번 포스트에서는 자바스크립트 fetch API를 사용하여 웹 사이트 모니터링 대시보드를 구성하는 방법을 알아보았습니다. fetch API를 사용하면 간단하게 웹 사이트의 상태를 모니터링하고, 대시보드에 실시간으로 정보를 표시할 수 있습니다. 이를 응용하여 추가적인 기능을 구현하면 웹 사이트 관리에 도움이 되는 효과적인 도구를 만들 수 있을 것입니다.