자바스크립트 fetch API를 사용한 웹 앱 리소스 최적화

10 Sep 2023

javascript

웹 앱을 개발할 때 리소스 최적화는 매우 중요한 과정입니다. 이를 통해 우리는 사용자 경험을 향상시키고 네트워크 대역폭을 절약할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트 fetch API를 사용하여 웹 앱의 리소스를 최적화 하는 방법에 대해 알아보겠습니다.

Fetch API 개요

Fetch API는 웹 개발자들이 HTTP 요청을 보내고 응답을 처리하기 위한 강력한 인터페이스입니다. 이 API는 비동기 네트워크 작업을 수행하고, Json이나 XML과 같은 데이터를 요청 및 응답으로 받을 수 있습니다.

리소스 최적화를 위한 Fetch API 사용

Fetch API를 사용하면 다양한 방법으로 리소스를 최적화할 수 있습니다. 아래는 몇 가지 예시입니다.

1. Lazy Loading

Lazy loading은 사용자가 스크롤을 내릴 때 해당 요소의 리소스를 로드하는 기법입니다. 이를 통해 초기 페이지 로딩 속도를 향상시킬 수 있습니다.

window.addEventListener('scroll', () => {
  const lazyImages = document.querySelectorAll('img[data-src]');
  lazyImages.forEach(image => {
    if (image.getBoundingClientRect().top < window.innerHeight) {
      image.src = image.getAttribute('data-src');
    }
  });
});

2. 이미지 압축

웹 앱에서 이미지는 일반적으로 가장 큰 리소스입니다. 이미지를 압축하면 파일 크기를 줄이고 로딩 속도를 높일 수 있습니다.

fetch('https://api.example.com/image.jpg')
  .then(response => response.blob())
  .then(imageBlob => {
    // 이미지 압축 로직 적용
    const compressedImage = compressImage(imageBlob); 
    const imageUrl = URL.createObjectURL(compressedImage);
    const imgElement = document.createElement('img');
    imgElement.src = imageUrl;
    document.body.appendChild(imgElement);
  });

3. 코드 번들링

자바스크립트 앱의 경우, 코드 번들링을 통해 여러 파일을 단일 번들 파일로 결합할 수 있습니다. 이를 통해 HTTP 요청 수를 줄이고, 앱의 로딩 속도를 향상시킬 수 있습니다.

import moduleA from './moduleA.js';
import moduleB from './moduleB.js';
// ...

// 번들링된 코드에서 모듈 맵핑
const bundledCode = `...`;

fetch('https://api.example.com/bundle.js')
  .then(response => response.text())
  .then(scriptText => {
    // 번들링된 코드와 모듈 맵핑
    const scriptWithModules = bundledCode.replace('/* Module A */', moduleA)
                                         .replace('/* Module B */', moduleB)
                                         // ...
    const scriptElement = document.createElement('script');
    scriptElement.innerHTML = scriptWithModules;
    document.body.appendChild(scriptElement);
  });

결론

자바스크립트 fetch API를 사용하여 웹 앱의 리소스를 최적화하는 방법에 대해 알아보았습니다. 리소스 최적화는 사용자 경험을 향상시키고 네트워크 사용량을 줄일 수 있는 중요한 과정입니다. Lazy loading, 이미지 압축, 코드 번들링과 같은 기법을 사용하여 웹 앱의 성능을 향상시켜보세요.