자바스크립트 fetch API를 사용한 웹 사이트 모니터링 도구 개발

10 Sep 2023

javascript

웹 사이트의 안정성과 성능을 유지하기 위해서는 정기적인 모니터링이 필요합니다. 이를 위해 자바스크립트의 fetch API를 사용하여 웹 사이트의 상태를 주기적으로 확인하는 모니터링 도구를 개발해보겠습니다.

fetch API란?

fetch API는 웹 브라우저에서 HTTP 요청을 보내고 응답을 받을 수 있는 API입니다. 이 API를 사용하여 웹 페이지나 웹 애플리케이션에서 서버와 데이터를 주고받을 수 있습니다. fetch API는 비동기적으로 동작하며, Promise를 반환합니다.

모니터링 도구 개발 과정

HTML 파일에 필요한 요소 추가하기

먼저, 웹 사이트의 모니터링 결과를 표시할 HTML 파일에 필요한 요소들을 추가합니다. 간단한 예로 상태를 표시할 div 요소와 결과를 업데이트할 버튼 요소를 추가할 수 있습니다.
```
<div id="status"></div>
<button id="update">모니터링 업데이트</button>
```

자바스크립트 코드 작성하기

다음으로, 자바스크립트를 사용하여 모니터링 도구를 개발합니다. fetch API를 사용하여 웹 사이트의 상태를 확인하고, 결과를 HTML 요소에 업데이트하는 로직을 작성합니다.

const statusElement = document.getElementById('status');
const updateButton = document.getElementById('update');

function updateStatus() {
  fetch('https://example.com') // 웹 사이트의 URL을 입력합니다.
    .then(response => {
      if (response.ok) {
        return '웹 사이트가 정상적으로 동작 중입니다.';
      } else {
        return '웹 사이트에 오류가 발생했습니다.';
      }
    })
    .catch(error => {
      return '웹 사이트에 접근할 수 없습니다.';
    })
    .then(message => {
      statusElement.textContent = message;
    });
}

updateButton.addEventListener('click', updateStatus);

위의 코드는 updateButton을 클릭하면 fetch API를 사용하여 ‘https://example.com’에 GET 요청을 보내고, 응답 상태 코드에 따라 상태 메세지를 생성하여 statusElement에 표시합니다. 예외가 발생한 경우에는 오류 메세지를 표시합니다.

웹 페이지에 스타일 적용하기

마지막으로, 스타일을 적용하여 모니터링 도구가 보기 좋게 표시되도록 CSS를 작성합니다.
```
#status {
  font-weight: bold;
  margin-bottom: 10px;
}

#update {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}
```
위의 CSS 코드는 status 요소에는 굵은 글씨체로 표시되고, update 버튼에는 초록색 배경 색상과 흰색 글씨로 스타일을 적용합니다.

동작 확인

모니터링 도구를 개발한 후, 개발환경에서 동작을 확인해보세요. update 버튼을 클릭하면 웹 사이트의 상태를 확인하고, 해당 상태를 status 요소에 업데이트할 수 있습니다.

이와 같이 자바스크립트 fetch API를 사용하여 웹 사이트의 모니터링 도구를 개발할 수 있습니다. 이 예시를 바탕으로 추가적인 기능을 추가하거나, 자신의 요구에 맞게 커스터마이징하여 사용해보세요.