Lazy Loading을 이용한 동적 페이지 전환 방법

10 Nov 2023

javascript

웹 애플리케이션에서 동적 페이지 전환은 사용자 경험을 향상시키는 중요한 요소입니다. 특히, 사용자가 많은 컨텐츠를 가진 페이지로 이동할 때 페이지를 로드하는 시간을 단축시킬 수 있다면, 사용자들은 더욱 편리하게 애플리케이션을 이용할 수 있습니다. 이를 위해 Lazy Loading을 사용하여 페이지를 동적으로 로드하는 방법을 알아보겠습니다.

1. Lazy Loading 개요

Lazy Loading은 필요한 컨텐츠를 지연해서 로딩하는 기술입니다. 즉, 사용자가 컨텐츠를 요청하는 시점에 해당 컨텐츠를 동적으로 로드합니다. 이를 통해 사용자가 페이지를 처음으로 로드할 때 필요한 컨텐츠만 로딩해 초기 로딩 시간을 단축할 수 있습니다.

2. Lazy Loading의 장점

Lazy Loading을 사용하면 다음과 같은 장점을 얻을 수 있습니다:

초기 로딩 시간 단축: 필요하지 않은 컨텐츠를 미리 로딩하지 않고, 사용자가 요청하는 시점에만 로딩하여 초기 로딩 시간을 최소화합니다.
대역폭 절약: 필요한 컨텐츠만 로딩하므로, 사용자가 사용하지 않는 컨텐츠를 로딩하지 않아 대역폭을 절약할 수 있습니다.
메모리 절약: Lazy Loading을 통해 필요한 컨텐츠만 로드하므로, 메모리 사용량을 줄일 수 있습니다.

3. Lazy Loading 구현 방법

Lazy Loading을 구현하기 위해 다음 단계를 따를 수 있습니다:

3.1. Intersection Observer 등록

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 필요한 컨텐츠 로딩
      // ...
      observer.unobserve(entry.target); // 로딩 후 Observer 해제
    }
  });
});

const target = document.querySelector('.lazy-load'); // 로딩이 필요한 요소 선택
observer.observe(target); // Intersection Observer 등록

3.2. 필요한 컨텐츠 로딩

function loadContent() {
  const lazyElements = document.querySelectorAll('.lazy-load'); // 로딩이 필요한 요소들 선택
  lazyElements.forEach(element => {
    // 로딩되지 않은 컨텐츠 로드
    // ...
  });
}

위의 코드 예제에서는 Intersection Observer API를 사용하여 로딩이 필요한 요소를 감지하고, 해당 요소가 화면에 진입할 경우 필요한 컨텐츠를 로딩하도록 구현되어 있습니다. IntersectionObserver의 isIntersecting 속성을 이용하여 요소가 화면에 진입했는지 여부를 체크할 수 있습니다.

3.3. 초기 로딩 시 필요한 컨텐츠 로딩

초기 로딩 시 필요한 컨텐츠를 로딩하려면 loadContent 함수를 실행해야 합니다. 이는 페이지 로딩이 완료된 후 호출되도록 구현해야합니다.

window.addEventListener('load', loadContent);

4. 마무리

Lazy Loading을 이용하여 동적 페이지 전환이 가능하도록 구현하는 방법에 대해 알아보았습니다. 이를 통해 초기 로딩 시간을 단축하고, 대역폭 및 메모리를 절약할 수 있습니다. Lazy Loading 기술은 웹 애플리케이션의 사용자 경험을 향상시킬 수 있는 강력한 도구입니다.

참고 자료

#LazyLoading #동적페이지전환