자바스크립트 fetch API를 사용한 웹 서비스 성능 측정

10 Sep 2023

javascript

웹 서비스의 성능은 사용자 경험과 전반적인 서비스 품질에 큰 영향을 미칩니다. 자바스크립트 fetch API는 웹 애플리케이션에서 서버와의 데이터 통신을 담당하는 강력한 도구입니다. 이 글에서는 자바스크립트 fetch API를 사용하여 웹 서비스의 성능을 측정하는 방법에 대해 알아보겠습니다.

fetch API 소개

fetch API는 네트워크 요청을 생성하고 응답을 처리할 수 있는 간단하고 유연한 기능을 제공합니다. 기존의 XMLHttpRequest와 비교하여 사용법이 훨씬 간편하며, Promise 기반의 비동기 작업을 쉽게 처리할 수 있습니다.

다음은 fetch API를 사용하여 GET 요청을 보내는 예시 코드입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

위 코드에서는 fetch() 함수에 데이터를 가져올 URL을 전달하여 GET 요청을 보냅니다. 서버로부터 응답을 받으면 then() 메소드를 사용하여 응답(response)을 JSON 형식으로 변환합니다. 그리고 변환된 데이터를 출력하고, 에러가 발생한 경우 catch() 메소드를 사용하여 에러를 처리합니다.

웹 서비스 성능 측정 방법

자바스크립트 fetch API를 사용하여 웹 서비스의 성능을 측정하려면 다음과 같은 방법을 사용할 수 있습니다.

1. 응답 시간 측정

fetch API는 응답을 받기까지의 시간을 측정하는 기능을 제공합니다. 응답 시간을 측정하여 웹 서비스의 성능을 평가할 수 있습니다.

const startTime = performance.now();

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const endTime = performance.now();
    const responseTime = endTime - startTime;
    console.log(`응답 시간: ${responseTime}ms`);
    console.log(data);
  })
  .catch(error => console.error(error));

위 코드에서는 performance.now() 함수를 사용하여 현재 시간을 측정합니다. 요청을 보낸 후 then() 메소드에서 응답을 처리할 때, 다시 performance.now() 함수를 호출하여 응답 시간을 측정합니다. 응답 시간을 출력하고, 데이터를 처리하는 추가적인 작업을 수행할 수 있습니다.

2. 네트워크 요청 횟수 측정

웹 서비스의 성능을 평가할 때, 네트워크 요청 횟수는 매우 중요한 요소입니다. fetch API를 사용하여 네트워크 요청 횟수를 측정할 수 있습니다.

let requestCount = 0;

function fetchApiData() {
  requestCount++;
  
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      console.log(`네트워크 요청 횟수: ${requestCount}`);
      console.log(data);
    })
    .catch(error => console.error(error));
}

fetchApiData();
fetchApiData();

위 코드에서는 requestCount 변수를 사용하여 네트워크 요청 횟수를 측정합니다. fetchApiData() 함수는 요청을 보낼 때마다 requestCount 값을 증가시키고, 요청 횟수를 출력합니다. 이렇게 함으로써 웹 서비스에서 실제로 발생하는 네트워크 요청 횟수를 측정할 수 있습니다.

결론

자바스크립트 fetch API는 웹 서비스의 성능 측정에 매우 유용한 도구입니다. 응답 시간과 네트워크 요청 횟수를 측정하여 웹 서비스의 성능을 평가하고 개선할 수 있습니다. fetch API를 활용하여 웹 서비스의 성능 측정을 진행해보세요.