사이트 개발시에 어떤 그리드를 사용할지 고민이 많으시다면, 이 포스팅이 도움되었으면 좋겠습니다. 그리드는 사이트에서 많이 사용하는 기능이라 그런지, 유료로 제공되는 라이브러리도 많은 것 같습니다. 하지만, 그리드에서 특수한 기능들이 필요치 않은 한, 무료 라이브러리로도 사이트 구축이 충분히 가능 할 것 같습니다. 그럼 많은 라이브러리들 중 어떤것을 쓰는게 좋을까요?
무료 그리드 라이브러리 비교
npm 트랜드를 사용하여, 라이브러리의 다운로드 횟수를 비교해보았습니다. 많은 그리드 라이브러리 중 datables.net의 다운로드 횟수가 가장 많은 것으로 확인됩니다. 그리고, 최근 증가세가 가파른 toast-grid를 비교해보겠습니다.
datatable.net(데이터 테이블, https://datatables.net/)
이 라이브러리에서 가장 강력한 기능은 상태저장 기능입니다. local Storage와 Session Storage를 활용하여, 페이징 위치등을 기억하여 두었다가, 다른 페이지로 이동 후 다시 이페이지로 돌아왔을 때, 동일한 내역을 보여줄 수 있습니다.
그리드에 표시할 날짜 형식 지정이 간단합니다. Moment.js 또는 Luxon 중 골라서 선택하면 됩니다.
또한 여러 언어로 구현해야하는 경우, 유용하게 사용할 수 있는 기능이 내장되어 있습니다.
또한 XSS필터링 기능이 내장되어 있고, CSRF 공격을 방지 하기위해 통신시 토큰을 사용할 수 있습니다.
스타일링 프레임워크 선택 가능
스타일링 기능을 구현하기 위해서 자주 사용하는 Boostrap 뿐만 아니라, Jquery UI를 제공하기 때문에 자신이 사용하는 프레임워크를 그대로 사용하여 그리드 스타일링이 가능합니다.
선택적으로 확장프로그램 다운로드 가능
확장 기능 중 필요한 것만 선택적으로 다운로드 하여, 라이브러리 용량을 줄일 수 있습니다.
toast-grid (토스트 그리드, https://ui.toast.com/tui-grid)
토스트 그리드는 비교적 최근에 나온 라이브러리라서, 다른 라이브러리에 비해 깔끔합니다. 공식 문서가 잘 정리되어 있어, 그리드 설정이 간단하다는 것도 큰 장점입니다.
기능들을 간단히 설명하자면, 행이나 열을 합칠 수 있으며, 대용량 데이터 처리에도 무리가 없습니다. 또한 그리드 내에서 데이터 수정이 가능하며, 날짜 선택시 보여지는 캘린더도 다양한 형태로 제공하고 있습니다.
하지만, 날짜 형식지정은 별도로 구현되어 있지 않다는 것이 단점입니다. 그러나 날짜 형식 지정 라이브러를 직접 추가하여 구현가능할 것 같습니다.
공식 사이트가 잘 정리되어 있어서 한번 참고해보시면 좋을 것 같습니다.
제가 dataTable.net을 선택한 이유는, 별도의 보안처리가 필요 없기 때문입니다. 두 라이브러리의 기능은 크게 다르지 않고, 솔직히 토스트 그리드가 깔금하고 예쁘게 생겼지만, 아무래도 간단한 사이트이다보니 보안처리가 더 들어가 있는 라이브러리르 선택하는편이 좋을 것이라고 생각했습니다.
도움이 되셨기를 바라며.. 좋은하루 되세요 :D
'라이브러리 소개 > JAVASCRIPT' 카테고리의 다른 글
| javascript 달력(캘린더) 라이브러리 / daterangepicker / 설치 및 활용 (0) | 2022.10.27 |
|---|
댓글