웹 애플리케이션에서 대용량 데이터를 처리할 때 그리드 성능은 매우 중요합니다. jqGrid는 대용량 데이터를 효율적으로 처리하기 위해 다양한 성능 최적화 기능을 제공하며, 클라이언트 측과 서버 측 처리를 모두 지원합니다. 이 글에서는 대용량 데이터를 처리하는 방법과 성능을 향상시키기 위한 팁을 설명하고, 관련된 예제 소스도 제공합니다.
대용량 데이터 처리 및 그리드 성능 최적화
jqGrid는 수천 개 이상의 데이터를 처리할 수 있습니다. 하지만 데이터를 모두 클라이언트로 로드하면 성능 저하가 발생할 수 있으므로, 서버 페이징과 가상 스크롤 기능을 사용해 성능을 향상시킬 수 있습니다. 서버 페이징은 필요한 만큼의 데이터를 서버에서 받아와 그리드에 표시하는 방식입니다.
서버 페이징을 사용한 대용량 데이터 처리 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jqGrid 서버 페이징 예제</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
<script>
$(document).ready(function () {
$("#grid").jqGrid({
url: 'https://jsonplaceholder.typicode.com/posts',
datatype: "json",
colNames: ['ID', 'Title', 'Body'],
colModel: [
{ name: 'id', index: 'id', width: 60 },
{ name: 'title', index: 'title', width: 150 },
{ name: 'body', index: 'body', width: 200 }
],
rowNum: 20, // 한 페이지에 표시할 행 수
rowList: [10, 20, 30], // 사용자가 선택할 수 있는 행 수
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
height: 'auto',
autowidth: true,
loadonce: false, // 데이터를 서버에서 페이징
caption: "서버 페이징을 사용한 jqGrid 예제"
});
});
</script>
</body>
</html>설명: 이 예제는 서버 페이징을 사용하여 데이터를 한 번에 다 가져오지 않고, 페이지당 필요한 만큼의 데이터만 서버에서 요청합니다. loadonce: false 설정은 서버에서 계속 데이터를 받아오는 것을 의미합니다.
클라이언트 측 vs 서버 측 처리 방식 비교
클라이언트 측 처리는 데이터를 한 번에 로드하여 클라이언트에서 필터링, 정렬, 페이징 등을 처리하는 방식입니다. 소량의 데이터에 적합하며, 속도나 성능에 크게 영향을 받지 않습니다. 하지만 대용량 데이터를 처리할 때는 클라이언트 메모리 사용량이 급격히 증가해 성능 저하가 발생할 수 있습니다.
반면에 서버 측 처리는 데이터를 부분적으로 요청하여 서버에서 필터링, 페이징, 정렬을 처리하고 그 결과를 클라이언트에 전달하는 방식입니다. 대용량 데이터 처리를 위해 권장되는 방법이며, 메모리 사용량이 적고, 네트워크 트래픽을 줄일 수 있습니다.
성능 최적화를 위한 팁과 트릭
1. 데이터 페이징 사용: 앞서 언급한 것처럼 페이징을 사용하면 대량의 데이터를 한 번에 로드하지 않고, 필요한 만큼만 가져올 수 있습니다. 이는 성능 저하를 방지하는 중요한 방법입니다.
2. 가상 스크롤 적용: 가상 스크롤을 사용하면 사용자가 스크롤을 내릴 때마다 데이터가 동적으로 로드되어 성능이 크게 향상됩니다. 이를 통해 페이지 네비게이션 없이도 대량의 데이터를 빠르게 탐색할 수 있습니다.
가상 스크롤을 사용한 예제
<script>
$(document).ready(function () {
$("#grid").jqGrid({
url: 'https://jsonplaceholder.typicode.com/comments',
datatype: "json",
colNames: ['ID', 'Name', 'Email', 'Body'],
colModel: [
{ name: 'id', index: 'id', width: 60 },
{ name: 'name', index: 'name', width: 150 },
{ name: 'email', index: 'email', width: 150 },
{ name: 'body', index: 'body', width: 200 }
],
rowNum: 20,
rowList: [20, 40, 60],
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
height: 'auto',
autowidth: true,
scroll: 1, // 가상 스크롤 사용
caption: "가상 스크롤을 사용한 jqGrid 예제"
});
});
</script>3. 불필요한 데이터 최소화: 서버에서 필요한 데이터만 전송하도록 설정해야 합니다. 예를 들어, 모든 필드를 로드할 필요가 없는 경우, 특정 필드만 요청하여 네트워크 트래픽과 메모리 사용량을 줄일 수 있습니다.
4. Lazy Loading 사용: 그리드가 처음 로드될 때 모든 데이터를 로드하지 않고, 필요한 시점에 데이터를 로드하는 Lazy Loading 기법을 사용하면 로드 시간을 줄일 수 있습니다.
참고 사이트: jqGrid Documentation
'JS > jqGrid' 카테고리의 다른 글
| [jqGrid] 12. 자주 발생하는 문제 해결 (FAQ) (0) | 2024.09.12 |
|---|---|
| [jqGrid] 11. 예제 프로젝트 (1) | 2024.09.11 |
| [jqGrid] 10. 자주쓰는 함수 (0) | 2024.09.11 |
| [jqGrid] 8. 고급 설정 (1) | 2024.09.11 |
| [jqGrid] 7. 기능 확장 (0) | 2024.09.11 |
| [jqGrid] 6. 데이터 편집 및 수정 (0) | 2024.09.10 |
| [jqGrid] 5. 옵션 및 설정 (0) | 2024.09.09 |
| [jqGrid] 4. 데이터 로드 및 바인딩 (0) | 2024.09.09 |