자바스크립트 Lazy Loading과 웹 애플리케이션의 로컬 캐싱 방법

10 Nov 2023

javascript

웹 페이지의 성능을 향상시키기 위해 자바스크립트 Lazy Loading을 사용하는 것은 일반적인 방법입니다. Lazy Loading은 페이지가 로드되는 동안 자바스크립트 파일을 필요한 시점에만 로드하는 기술입니다. 이를 통해 페이지 초기 로딩 속도를 빠르게 하고, 사용자 경험을 향상시킬 수 있습니다.

자바스크립트 Lazy Loading을 구현하기 위해선 몇 가지 접근 방법을 선택할 수 있습니다. 다음은 대표적인 방법들입니다.

1. Intersection Observer API

Intersection Observer API는 브라우저의 뷰포트와 요소의 교차점을 관찰하는 기능을 제공합니다. 따라서 필요한 시점에 자바스크립트 파일을 로드할 수 있습니다. 아래는 Intersection Observer API를 사용한 예제 코드입니다.

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const script = document.createElement('script');
      script.src = 'lazy-script.js';
      document.body.appendChild(script);
      observer.unobserve(entry.target);
    }
  });
});

const target = document.querySelector('#lazy-target');
observer.observe(target);

2. third-party Lazy Loading Library 사용

자바스크립트 Lazy Loading을 간편하게 구현하기 위해 제3자 라이브러리를 사용하는 방법도 있습니다. 대표적인 라이브러리로는 “Lozad” 나 “Lazysizes” 가 있습니다. 아래는 “Lazysizes”를 사용하여 Lazy Loading을 구현한 예제 코드입니다.

import 'lazysizes';

const lazyElements = document.querySelectorAll('.lazy');
lazyElements.forEach(element => {
  element.classList.add('lazyload');
});

웹 애플리케이션의 로컬 캐싱 방법

웹 애플리케이션을 개발할 때, 로컬 캐싱을 사용하면 애플리케이션의 성능을 향상시킬 수 있습니다. 로컬 캐싱은 웹 브라우저에 이미지, 스타일시트, 자바스크립트 파일 등을 저장해두고, 다음에 해당 파일을 요청할 때 서버에서 받아오지 않고 로컬에서 바로 로드하는 방법입니다.

로컬 캐싱을 구현하기 위해 다양한 방법이 있지만, 여기에는 주로 사용되는 두 가지 방법을 소개하겠습니다.

1. Service Worker

서비스 워커는 웹 애플리케이션의 네트워크 요청을 중간에서 가로채는 프록시 역할을 합니다. 이를 통해 웹 애플리케이션의 파일들을 캐싱하고, 오프라인 상황에서도 제공할 수 있습니다. 아래는 서비스 워커를 사용하여 로컬 캐싱을 구현한 예제 코드입니다.

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-app-cache').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js',
        '/image.jpg'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      // 캐시가 존재하는 경우 캐시를 반환하고, 아닌 경우 네트워크에서 가져옴
      return response || fetch(event.request);
    })
  );
});

2. 웹 스토리지 API

웹 스토리지 API(로컬 스토리지, 세션 스토리지)를 사용하여 웹 애플리케이션의 리소스를 캐싱할 수도 있습니다. 로컬 스토리지는 키-값 쌍 형태로 데이터를 저장하고, 세션 스토리지는 세션 동안만 유지되는 데이터를 저장합니다. 아래는 웹 스토리지 API를 사용하여 로컬 캐싱을 구현한 예제 코드입니다.

// 로컬 스토리지에 데이터 저장
localStorage.setItem('myKey', 'myValue');

// 로컬 스토리지에서 데이터 가져오기
const myValue = localStorage.getItem('myKey');

// 세션 스토리지에 데이터 저장
sessionStorage.setItem('myKey', 'myValue');

// 세션 스토리지에서 데이터 가져오기
const myValue = sessionStorage.getItem('myKey');

로컬 캐싱을 이용하여 웹 애플리케이션의 성능을 향상시킬 수 있으므로, 적절한 방법을 선택하여 구현해보시기 바랍니다.

1. Intersection Observer API

2. third-party Lazy Loading Library 사용

웹 애플리케이션의 로컬 캐싱 방법

1. Service Worker

2. 웹 스토리지 API

참고 자료