웹 앱의 성능은 사용자 경험에 큰 영향을 미칩니다. 사용자는 느린 로딩 시간과 응답 대기 시간으로 인해 실망하게 될 수 있습니다. 이를 피하기 위해 자바스크립트 fetch API를 사용하여 웹 앱의 성능을 향상시킬 수 있습니다.

1. HTTP 요청 최적화하기

fetch API는 HTTP 요청을 수행하는 데 사용됩니다. 성능 향상을 위해 다음과 같은 최적화 기술을 적용할 수 있습니다.

• 한 번에 여러 개의 요청 보내기: 여러 개의 리소스를 동시에 가져와야 할 때, Promise.all을 사용하여 여러 개의 fetch 요청을 병렬로 보낼 수 있습니다. 이를 통해 리소스를 병렬로 가져올 수 있으므로 전체 로딩 시간을 단축시킬 수 있습니다.

예시 코드:

const urls = ['https://api.example.com/resource1', 'https://api.example.com/resource2', 'https://api.example.com/resource3'];
const requests = urls.map(url => fetch(url));

Promise.all(requests)
  .then(responses => {
    // 모든 리소스를 가져왔을 때 수행할 작업
  })
  .catch(error => {
    // 요청 중 오류가 발생한 경우 처리할 작업
  });

• 캐싱 활용하기: fetch API는 기본적으로 캐싱을 지원합니다. 이를 활용하여 이전에 가져온 리소스를 로컬 캐시에서 가져오면서 네트워크 요청을 줄일 수 있습니다. Request 객체를 캐싱되지 않아야 하는 경우, cache 옵션을 “no-store”로 설정하여 캐싱을 비활성화할 수 있습니다.

예시 코드:

fetch('https://api.example.com/resource', { cache: 'no-store' })
  .then(response => {
    // 리소스를 가져왔을 때 수행할 작업
  })
  .catch(error => {
    // 요청 중 오류가 발생한 경우 처리할 작업
  });