자바스크립트 fetch API를 사용한 웹 앱 성능 튜닝

10 Sep 2023

javascript

웹 앱의 성능은 사용자 경험을 크게 좌우하는 중요한 요소입니다. 웹 앱이 빠르게 로드되고 응답하는 것은 사용자의 만족도를 높이고 유지할 수 있는 핵심입니다. 이를 위해 자바스크립트 fetch API를 사용하여 웹 앱의 성능을 향상시킬 수 있습니다.

1. Fetch API란?

Fetch API는 웹 브라우저에서 제공하는 네트워크 요청을 수행하는 인터페이스입니다. XMLHttpRequest보다 간단하고 더 강력한 기능을 제공하며, Promise를 사용하여 비동기적으로 데이터를 가져올 수 있습니다.

2. Fetch API를 사용한 성능 향상 방법

Fetch API를 사용하여 웹 앱의 성능을 향상시키기 위해 몇 가지 방법을 알아보겠습니다.

2.1. 데이터 캐싱 활용

데이터 캐싱은 데이터를 한 번 요청한 후 다음 요청 시에는 이전에 받아온 데이터를 사용하는 것을 말합니다. 이를 통해 네트워크 요청의 수를 줄일 수 있으므로 성능 향상에 큰 도움이 됩니다.

let cachedData;

function fetchData() {
  if (cachedData) {
    return Promise.resolve(cachedData);
  }

  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      cachedData = data;
      return data;
    });
}

2.2. 요청 헤더 최적화

요청 헤더에 적절한 옵션을 설정하여 서버와의 통신을 최적화할 수 있습니다. 예를 들어, 캐싱된 데이터를 사용하기 위해 요청 헤더에 If-None-Match 헤더를 추가할 수 있습니다.

function fetchData() {
  return fetch('https://api.example.com/data', {
    headers: {
      'If-None-Match': cachedData.etag
    }
  })
    .then(response => {
      if (response.status === 304) {
        return cachedData;
      }
      return response.json();
    })
    .then(data => {
      cachedData = data;
      return data;
    });
}

2.3. 요청 병렬화

여러 개의 데이터를 가져와야 할 때, 요청을 병렬로 수행하여 시간을 절약할 수 있습니다. Promise.all을 사용하여 병렬로 여러 개의 fetch 요청을 수행할 수 있습니다.

function fetchData() {
  const request1 = fetch('https://api.example.com/data1');
  const request2 = fetch('https://api.example.com/data2');
  
  return Promise.all([request1, request2])
    .then((responses) => Promise.all(responses.map(res => res.json())))
    .then((data) => {
      const data1 = data[0];
      const data2 = data[1];
      // 데이터 처리 로직
    });
}

3. 요약

자바스크립트 fetch API를 사용하여 웹 앱의 성능을 향상시킬 수 있습니다. 데이터 캐싱, 요청 헤더 최적화, 요청 병렬화 등의 방법을 사용하여 웹 앱의 로딩 속도를 빠르게 만들 수 있습니다. 이를 통해 사용자 경험을 향상시키고 웹 앱의 성능을 최적화할 수 있습니다.