Nexacro Grid 데이터 표시 속도 개선 방법

Nexacro Grid 데이터 표시 속도 개선 방법

Nexacro에서 Grid 컴포넌트는 대량의 데이터를 표시할 때 성능 이슈가 발생할 수 있습니다. 특히, 다량의 데이터를 처리하거나, 복잡한 연산을 동반할 경우 그 속도는 눈에 띄게 느려질 수 있습니다. 하지만 몇 가지 최적화 기법을 통해 그 성능을 크게 개선할 수 있습니다. 이 글에서는 Nexacro Grid의 데이터 표시 속도를 개선할 수 있는 다양한 방법을 소개하고, 간단한 샘플 코드를 제공하겠습니다.

---

1. 데이터 페이징 처리 (Paging)

설명:

한 번에 모든 데이터를 로딩하는 대신, 필요한 만큼만 부분적으로 로딩하는 방법입니다. 대용량 데이터를 클라이언트에 한꺼번에 전달하는 것은 성능 저하의 주요 원인 중 하나입니다. 이를 해결하기 위해, 서버에서 일정 크기의 데이터만 요청하여 로드하는 페이징 기법을 사용할 수 있습니다.

샘플 코드:

// Grid의 페이징 처리 예시
function loadPageData(pageIndex) {
    var pageSize = 100; // 페이지 당 로드할 데이터 수
    var startRow = pageIndex * pageSize;
    
    var params = {
        startRow: startRow,
        pageSize: pageSize
    };

    // 서버에서 데이터 로드 (AJAX 혹은 Nexacro 트랜잭션 이용)
    var dataset = new Dataset();
    dataset.loadFromServer("getPagedData.do", params);

    // Grid에 데이터 바인딩
    myGrid.set_binddataset(dataset);
}

설명:

위 코드는 서버에서 페이지 단위로 데이터를 불러오는 방식입니다. 한 번에 모든 데이터를 가져오는 것이 아니라, 사용자가 보는 페이지에 해당하는 데이터만 로드하여 Grid에 표시하는 방식입니다. 이는 초기 로딩 속도와 메모리 사용량을 크게 줄일 수 있습니다.

---

2. Lazy Loading (지연 로딩)

설명:

Lazy Loading은 사용자가 데이터를 스크롤할 때마다 필요한 데이터만 로드하는 방식입니다. Grid의 스크롤을 끝까지 내렸을 때 다음 데이터를 서버로부터 로드하여 추가적으로 보여줍니다.

샘플 코드:

// 스크롤 이벤트를 이용한 Lazy Loading
function onGridScroll() {
    var lastVisibleRow = myGrid.getLastVisibleRow();  // 마지막으로 보이는 행
    var totalRowCount = myGrid.getBindDataset().getRowCount();  // 전체 데이터 개수
    
    if (lastVisibleRow >= totalRowCount - 1) {
        loadMoreData();  // 더 많은 데이터를 로드하는 함수
    }
}

function loadMoreData() {
    var dataset = myGrid.getBindDataset();
    var lastRow = dataset.getRowCount();
    
    var params = {
        startRow: lastRow,
        pageSize: 100
    };

    // 서버에서 추가 데이터 로드
    dataset.loadFromServer("getMoreData.do", params);
}

설명:

이 코드는 스크롤이 Grid의 마지막까지 내려갔을 때 새로운 데이터를 서버에서 로드하여 추가로 보여줍니다. 이를 통해 한 번에 모든 데이터를 로드하는 대신, 필요할 때만 데이터를 불러옴으로써 초기 로딩 시간과 메모리 사용량을 최적화할 수 있습니다.

---

3. 화면 갱신 중지 (Grid 갱신 최소화)

설명:

Grid는 데이터를 로드하거나 수정할 때마다 화면을 갱신합니다. 대량의 데이터가 있을 경우, 이 화면 갱신이 반복되면서 속도가 느려질 수 있습니다. 이 문제를 해결하기 위해 데이터가 변경되는 동안 화면 갱신을 일시적으로 중지할 수 있습니다.

샘플 코드:

// 화면 갱신 일시 중지 및 재개
myGrid.set_enableevent(false);  // 이벤트 중지 (화면 갱신 중지)
myGrid.set_enableredraw(false);  // 화면 갱신 일시 중지

// 데이터를 변경하거나 로드하는 작업
dataset.addRow();
dataset.setColumn(0, "column1", "value1");

// 화면 갱신 재개
myGrid.set_enableredraw(true);
myGrid.set_enableevent(true);

설명:

set_enable_redraw(false)로 Grid의 화면 갱신을 일시적으로 중지한 후, 데이터를 처리합니다. 데이터를 모두 처리한 후 set_enable_redraw(true)로 화면 갱신을 다시 시작하면, 불필요한 화면 갱신을 방지하여 속도를 최적화할 수 있습니다.

---

4. 필요 없는 컬럼 숨기기 및 축소

설명:

모든 컬럼을 표시하지 않고, 필요 없는 컬럼을 숨기거나, 기본적으로 표시할 컬럼을 최소화하는 것도 속도 향상에 도움이 됩니다. 특히, 화면에 표시되지 않는 컬럼도 데이터를 처리하는데 영향을 줄 수 있으므로 꼭 필요한 컬럼만 표시하는 것이 좋습니다.

샘플 코드:

// 필요 없는 컬럼 숨기기
myGrid.setCellProperty("Body", 0, "visible", false);  // 첫 번째 컬럼 숨기기

설명:

이 코드는 Grid에서 첫 번째 컬럼을 숨깁니다. 사용자가 보지 않아도 되는 데이터를 굳이 화면에 렌더링할 필요가 없기 때문에 성능 향상에 도움이 됩니다.

---

5. 속도 최적화를 위한 기타 팁

• 그리드 행 버퍼 설정: grid.set_rowheight() 등의 메소드를 통해 그리드의 행 높이를 고정하면, 그리드 렌더링 성능을 향상시킬 수 있습니다.
• 데이터셋의 데이터 캐싱: 동일한 데이터를 자주 불러오는 경우, 데이터셋에 데이터를 캐싱하여 중복 로드를 피할 수 있습니다.
• 데이터셋의 필터링 및 정렬: 데이터셋을 서버에서 필터링하거나 정렬하여 불필요한 연산을 줄입니다.

---

결론

Nexacro Grid의 성능을 최적화하기 위해서는 한꺼번에 많은 데이터를 로드하기보다는 페이징, Lazy Loading, 화면 갱신 제어 등 다양한 기법을 활용하여 데이터를 효율적으로 처리하는 것이 중요합니다. 위에서 제시한 여러 기법들을 적절히 조합하면, Grid의 성능을 크게 향상시킬 수 있습니다.