wooritech/리얼그리드

초급 웹 개발자가 자주 겪는 200가지 문제(feat. RealGrid) : 2.데이터 정렬 구현 어려움

코딩쉐프 2024. 10. 31. 00:57
728x90

초급 웹 개발자들이 자주 겪는 문제 중 하나는 데이터 정렬 기능 구현입니다. 데이터 정렬은 사용자 경험을 개선하는 중요한 요소로, 사용자가 원하는 기준에 따라 데이터를 오름차순 또는 내림차순으로 정렬하여 쉽게 탐색할 수 있게 합니다. 하지만 다양한 데이터 타입을 정렬할 때 발생하는 문제와 클라이언트 및 서버 측에서의 구현 방식 차이로 인해 초보 개발자들이 쉽게 어려움을 겪곤 합니다. 이 포스트에서는 RealGrid를 활용하여 데이터 정렬 기능을 구현하는 방법과 관련된 문제 해결 방안을 다룹니다.

데이터 정렬의 주요 문제점

  1. 다양한 데이터 타입 정렬
    숫자, 문자열, 날짜 등 다양한 타입의 데이터가 포함된 경우, 각 타입에 맞는 정렬 방식을 구현해야 합니다. 문자열은 알파벳 순서로, 숫자는 크기 순서로, 날짜는 시간순으로 정렬해야 하는데, 각 데이터 타입에 맞는 정렬 방식을 혼합하여 구현하기 어렵습니다.
  2. 클라이언트 측 vs 서버 측 정렬
    소량의 데이터는 클라이언트 측에서 정렬하는 것이 간편하고 빠르지만, 대용량 데이터를 정렬할 경우 성능 저하가 발생할 수 있습니다. 따라서 서버 측에서 정렬을 수행하는 것이 좋지만, 이를 위해서는 서버와의 통신이 추가로 필요하며 구현이 복잡해질 수 있습니다.
  3. 다중 컬럼 정렬
    하나의 컬럼뿐만 아니라 여러 컬럼을 기준으로 동시에 정렬하는 기능을 구현하는 것이 어렵습니다. 예를 들어, '이름'을 기준으로 정렬한 후, 동일한 이름 내에서 '날짜'를 기준으로 정렬하는 방식은 초보 개발자에게 복잡하게 느껴질 수 있습니다.

RealGrid에서 데이터 정렬 구현하기

RealGrid는 기본적으로 각 컬럼에 정렬 기능을 제공합니다. 이를 통해 손쉽게 다양한 데이터 타입의 정렬을 지원할 수 있으며, 다중 컬럼 정렬도 가능하도록 설정할 수 있습니다.

  1. 기본 정렬 기능 활성화
    RealGrid에서는 컬럼에 sortable 속성을 추가하여 기본 정렬 기능을 활성화할 수 있습니다. 
    const grid = new RealGridJS.GridView("gridContainer"); const ds = new RealGridJS.LocalDataProvider(false); grid.setDataSource(ds); grid.setColumns([ { fieldName: "product", header: "Product", sortable: true }, { fieldName: "price", header: "Price", sortable: true }, { fieldName: "date", header: "Date", sortable: true } ]); ds.setRows([ { product: "노트북", price: 1200000, date: "2024-01-01" }, { product: "모니터", price: 300000, date: "2024-01-02" }, { product: "키보드", price: 50000, date: "2024-01-03" } ]);
  2. 서버 측 정렬 구현하기
    대량의 데이터를 처리하는 경우 서버 측에서 정렬을 수행하는 것이 성능 면에서 유리합니다. 서버 측에서 정렬된 데이터를 받아와 RealGrid에 표시할 수 있습니다. 
    function fetchSortedData(sortField, sortOrder) { const apiUrl = `/api/getSortedData?field=${sortField}&order=${sortOrder}`; fetch(apiUrl) .then(response => response.json()) .then(data => ds.setRows(data)) .catch(error => console.error('Error:', error)); } grid.onSortingChanged = function (event) { const sortField = event.fieldName; const sortOrder = event.order; // "ascending" or "descending" fetchSortedData(sortField, sortOrder); };


  3. 다중 컬럼 정렬 구현
    RealGrid에서는 다중 컬럼을 동시에 정렬할 수 있는 기능도 제공합니다. multiSorting 속성을 활성화하여 사용자가 여러 컬럼을 기준으로 정렬할 수 있게 설정할 수 있습니다.
grid.sortingOptions = { enabled: true, style: "exclusive", multiSorting: true };

실습 예제: 데이터 정렬 기능 구현

  1. 컬럼 정렬 기능 활성화
    • product, price, date 컬럼에 sortable 옵션을 추가하여 정렬을 활성화합니다.
  2. 서버 측 정렬 함수 작성
    • 정렬 기준과 정렬 순서(오름차순/내림차순)를 매개변수로 받아 서버에서 데이터를 정렬 후 반환하는 함수를 구현합니다.
  3. 다중 컬럼 정렬 활성화
    • multiSorting 옵션을 설정하여 다중 컬럼 정렬이 가능하도록 합니다.

정렬 기능을 구현할 때 주의해야 할 점

  • 데이터 타입별 정렬 방식 지정: 각 데이터 타입에 맞는 정렬 방식을 지정하여, 사용자가 데이터 타입에 맞는 정렬 결과를 볼 수 있도록 합니다.
  • 서버와의 효율적 통신: 서버 측 정렬을 사용할 경우, 불필요한 통신을 줄이기 위해 캐싱이나 페이지네이션을 고려할 수 있습니다.
  • 정렬 순서 시각화: 사용자가 현재 어떤 컬럼을 기준으로 정렬하고 있는지 쉽게 알 수 있도록 정렬 순서를 표시하는 UI를 추가하는 것도 좋습니다.
728x90