자바스크립트 Lazy Loading과 AJAX의 연동 방법

10 Nov 2023

javascript

지금은 웹 페이지가 점점 더 많은 컨텐츠를 가지고 있기 때문에 성능이 저하될 수 있습니다. 이 문제를 해결하기 위해 “레이지 로딩(Lazy Loading)” 과 “AJAX”를 함께 사용하여 페이지 로딩 속도를 최적화할 수 있습니다.

레이지 로딩(Lazy Loading)

레이지 로딩은 페이지의 모든 컨텐츠를 한 번에 로딩하는 대신, 사용자가 스크롤하거나 필요로 할 때 필요한 컨텐츠만 로딩하는 기술입니다. 이를 통해 초기 페이지 로딩 속도가 빨라지고, 사용자가 페이지로 스크롤할 때마다 추가적인 컨텐츠가 동적으로 로딩되므로 사용자 경험을 향상시킬 수 있습니다.

레이지 로딩을 구현하기 위해 자바스크립트의 Intersection Observer API를 사용할 수 있습니다. 이 API는 지정된 엘리먼트가 뷰포트에 진입하거나 벗어날 때를 감지할 수 있습니다. 이를 이용하여 사용자가 스크롤을 하면서 화면에 나타나는 컨텐츠를 동적으로 로딩할 수 있습니다.

// Intersection Observer로 Lazy Loading 구현하기
const lazyImages = document.querySelectorAll('img.lazy');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-src');
        img.setAttribute('src', src);
        img.classList.remove('lazy');
        observer.unobserve(img);
      }
    });
  });

  io.observe(target);
};

lazyImages.forEach(lazyLoad);

위의 코드는 img 엘리먼트에 lazy 클래스를 추가하고, data-src 속성에 실제 이미지 경로를 저장합니다. Intersection Observer를 사용하여 해당 이미지가 뷰포트에 진입하면 src 속성을 업데이트하고 lazy 클래스를 제거하여 이미지가 로딩되게 합니다.

AJAX

AJAX는 Asynchronous JavaScript and XML의 약자로, 비동기적으로 서버와 데이터를 주고받는 기술입니다. AJAX를 사용하면 웹 페이지의 내용을 동적으로 업데이트하고 서버와 통신하면서도 페이지 전체를 다시 로드할 필요가 없습니다.

AJAX를 사용하여 페이지 로딩 속도를 최적화하려면 초기 페이지 로딩 후 필요한 데이터만 비동기적으로 로딩하고, 이를 사용하여 화면을 업데이트해야 합니다. 이를 통해 필요한 데이터만 서버에서 가져오며, 사용자는 보다 빠른 페이지 응답 속도를 경험할 수 있습니다.

// AJAX를 이용한 데이터 로딩 예제
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    // 데이터를 사용하여 화면을 업데이트하는 로직 작성
  }
};
xhr.send();

위의 코드는 XMLHttpRequest 객체를 사용하여 서버로부터 데이터를 비동기적으로 가져오는 예제입니다. open 메서드를 이용하여 API의 URL을 설정하고, onreadystatechange 이벤트 핸들러를 등록하여 데이터가 성공적으로 도착했을 때 화면을 업데이트하는 로직을 작성합니다.

Lazy Loading과 AJAX의 연동

레이지 로딩과 AJAX를 함께 사용하면 초기 페이지 로딩 속도를 빠르게 하고, 필요한 데이터를 동적으로 로딩하여 사용자 경험을 향상시킬 수 있습니다. 예를 들어, 주문 목록을 보여주는 페이지에서는 초기에는 주문 목록의 일부만 로딩하고, 스크롤 할 때마다 추가 주문을 AJAX를 통해 동적으로 로딩할 수 있습니다.

const lazyOrderList = document.querySelector('.lazy-order-list');

const loadMoreOrders = () => {
  // AJAX를 이용하여 추가 주문 데이터를 가져오는 로직 작성
};

const lazyLoadOrders = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      loadMoreOrders();
      lazyLoadOrders.unobserve(entry.target);
    }
  });
});

lazyLoadOrders.observe(lazyOrderList);

위의 코드는 Intersection Observer를 사용하여 주문 목록의 일부가 뷰포트에 진입하면 loadMoreOrders 함수를 호출하여 추가 주문을 로딩하는 예제입니다.

#references