초급 웹 개발자가 자주 겪는 200가지 문제(feat. RealGrid) : 6.Lazy Loading 구현 방법

Lazy Loading은 대용량 데이터를 한 번에 로드하지 않고 필요한 시점에 데이터 일부만 불러오는 방식으로, 성능을 크게 향상시키는 기술입니다. RealGrid에서는 Lazy Loading을 통해 네트워크 트래픽을 줄이고, 로드 시간을 단축하여 사용자 경험을 개선할 수 있습니다. 이 포스트에서는 Lazy Loading의 기본 개념과 RealGrid를 통해 구현하는 방법을 알아보겠습니다.

1. Lazy Loading의 필요성

대용량 데이터를 한 번에 모두 로드하면:

• 성능 저하: 데이터가 많아질수록 로딩 시간이 길어지고, 브라우저 메모리를 많이 차지해 성능이 떨어집니다.
• 네트워크 부하: 서버와의 네트워크 부하가 커지며, 실시간 데이터를 표시하기 어려워질 수 있습니다.

Lazy Loading은 스크롤이나 페이지 이동 시 필요한 데이터만 요청하는 방식으로 이 문제를 해결합니다.

2. RealGrid에서 Lazy Loading 설정하기

RealGrid에서는 onScrollToBottom 이벤트를 사용해 스크롤이 하단에 도달했을 때 서버로부터 추가 데이터를 가져오는 방식을 사용합니다.

// 기본 그리드 설정
const grid = new RealGridJS.GridView("gridContainer");
const ds = new RealGridJS.LocalDataProvider(false);
grid.setDataSource(ds);

// 초기 데이터 로드
fetchData(0, 50);  // 첫 페이지 (0번 페이지)부터 50개 데이터 로드

// Lazy Loading 구현
grid.onScrollToBottom = function () {
    const nextPage = ds.getRowCount() / 50;
    fetchData(nextPage, 50); // 다음 페이지 데이터 로드
};

// fetchData 함수 정의
function fetchData(page, pageSize) {
    const apiUrl = `/api/data?page=${page}&size=${pageSize}`;
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => ds.addRows(data)) // 가져온 데이터 추가
        .catch(error => console.error('Error:', error));
}

• onScrollToBottom: 사용자가 그리드의 하단으로 스크롤할 때 발생하는 이벤트입니다.
• fetchData 함수: 서버 API를 호출해 해당 페이지에 필요한 데이터만 로드합니다. addRows를 통해 기존 데이터에 추가해주므로, 전체 데이터를 갱신하지 않아도 됩니다.

3. Lazy Loading을 사용할 때의 주의사항

• 페이지 사이즈 설정: 너무 작은 페이지 사이즈를 설정하면 네트워크 요청이 빈번해져 성능에 부정적인 영향을 줄 수 있습니다. 일반적으로 50~100개 정도의 데이터 로드가 적당합니다.
• API 응답 시간: Lazy Loading이 원활하게 작동하려면 서버의 응답 속도도 중요합니다. API가 느리다면 사용자 경험에 지장을 줄 수 있으므로 서버 최적화가 필요합니다.
• 데이터 순서 및 중복: 데이터 추가 시 정렬 기준을 유지해야 하고, 중복 데이터가 발생하지 않도록 주의해야 합니다.

실습 예제: Lazy Loading 활성화 및 데이터 로드 테스트

1. 초기 데이터 로드: 기본 페이지를 설정하고 초기 데이터를 불러옵니다.
2. 스크롤 하단 이벤트 설정: onScrollToBottom 이벤트를 추가해 다음 페이지를 요청합니다.
3. 서버 성능 확인: 여러 페이지를 스크롤하면서 데이터 로드 속도와 성능을 테스트해 봅니다.