자바스크립트 fetch API를 사용한 웹 사이트 성능 측정 도구 개발

10 Sep 2023

javascript

개요

웹 사이트의 성능은 사용자 경험과 SEO에 매우 중요합니다. 이러한 이유로 웹 개발자들은 자신들이 개발한 웹 사이트의 성능을 측정하고 최적화하는 방법에 관심을 가지고 있습니다. 이번 블로그 포스트에서는 자바스크립트 fetch API를 사용하여 웹 사이트의 성능을 측정하는 간단한 도구를 개발하는 방법에 대해 알아보겠습니다.

fetch API란?

fetch API는 웹 브라우저에서 제공하는 자바스크립트 API 중 하나입니다. 이 API는 네트워크 요청을 보내고 응답을 받을 수 있도록 도와주는 기능을 제공합니다. 이를 통해 서버와 비동기적으로 데이터를 주고받을 수 있습니다.

도구 구성 요소

우리가 개발할 성능 측정 도구는 다음과 같은 구성 요소를 가집니다:

URL 입력 필드: 웹 사이트의 URL을 입력하는 필드입니다.
시작 버튼: 성능 측정을 시작하기 위한 버튼입니다.
로딩 시간 표시: 요청과 응답의 소요 시간을 표시하는 영역입니다.

성능 측정 도구 개발하기

먼저 HTML 파일을 생성하여 도구의 기본 구조를 작성합니다. fetch API를 사용할 것이므로 <script> 태그 안에 자바스크립트 코드를 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <title>성능 측정 도구</title>
</head>
<body>
  <h1>성능 측정 도구</h1>

  <input type="text" id="urlInput" placeholder="URL을 입력하세요">
  <button id="startButton">시작</button>

  <div id="loadingTime"></div>

  <script>
    const urlInput = document.getElementById('urlInput');
    const startButton = document.getElementById('startButton');
    const loadingTime = document.getElementById('loadingTime');

    startButton.addEventListener('click', () => {
      const url = urlInput.value;
      
      // 성능 측정 시작
      const startTime = performance.now();
      fetch(url)
        .then(response => {
          const endTime = performance.now();
          const time = endTime - startTime;
          loadingTime.textContent = `로딩 시간: ${time}ms`;
        })
        .catch(error => {
          loadingTime.textContent = '에러 발생';
        });
    });
  </script>
</body>
</html>

위 코드에서는 urlInput과 startButton 등의 요소를 JavaScript로 가져와서 각 이벤트에 맞게 처리해줍니다.

성능 측정이 시작되면 performance.now() 함수를 사용하여 현재 시간을 기록한 다음, fetch API를 사용하여 해당 URL에 GET 요청을 보냅니다. 응답이 도착하면 다시 performance.now() 함수를 사용하여 현재 시간을 측정하고, 시작 시간과의 차이를 계산하여 로딩 시간을 계산합니다.

마지막으로, 결과를 loadingTime 요소에 표시하게 됩니다.

실행결과

웹 사이트의 URL을 입력한 뒤 “시작” 버튼을 클릭하면 성능 측정이 시작되고, 로딩 시간이 표시됩니다. 만약 에러가 발생한다면 “에러 발생” 메시지를 표시합니다.

이렇게 자바스크립트 fetch API를 사용하여 간단한 웹 사이트 성능 측정 도구를 개발할 수 있습니다. 이 도구를 사용하여 웹 사이트의 성능을 측정하고 최적화하는 것은 사용자 경험을 향상시키는 데 도움이 됩니다.