현재 프론트 UI Framework 는 Antd를 사용하고 있어, 데이터테이블 또한 antd꺼를 사용하였는데,
리스팅 갯수가 500개가 넘어가면 테이블이 버벅거리면서 브라우저가 느려지는 증상이 발생하습니다.
현재 페이지 리스팅 갯수는 최대 5000개까지 지원중인데..
알고보니 antd에서는 가상 테이블을 지원하지 않고있었고, 방법을 모색하던중 antd-table-infinity라는 모듈을 찾게되었습니다.
www.npmjs.com/package/antd-table-infinity
antd-table-infinity
An infinite scroll component based on antd table that supports virtual scrolling & high-performance form http://keruyun.com/
www.npmjs.com
antd 공홈에는 따로 언급이 없는걸로 보아 누군가 antd table를 이용하여 가상화하여 만든듯 합니다
아무튼 해당 모듈을 사용하여 가상화 처리하여 해결이 된것 처럼 보였으나 한가지 큰 문제가 발생하였는데..
테이블 스크롤을 빠르게 움직이면 테이블 내용이 사라지는 문제가 있었습니다.
여러가지 방법으로 해당 문제를 수정하려고 노력했으나, 시간낭비인것으로 판단되어 다른 테이블 모듈을 찾게되었는데,
워낙 다양한 그리드 모듈들이 존재하였지만 제일 눈에 들어온 Ag-Grid를 선택하게 됐습니다.
매뉴얼도 워낙 잘되어있고 사용방법도 쉬워 개발하는데 그리 큰 어려움은 없었고, antd table에서 발생했던 2가지 문제도 다 해결이 됐습니다.
1. 가상화 테이블 지원 여부
2. 스크롤 이동 시 테이블 초기화 버그
혹시 그리드 모듈을 찾고 계시는분들이 있으시면 Ag-Grid를 한번 써보라고 적극 추천 드립니다.
(물론 다른 좋은 모듈들도 많아요)
AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid
AG Grid is a feature rich datagrid designed for the major JavaScript Frameworks. Version 25 is out now. Easily integrate into your application to deliver filtering, grouping, aggregation, pivoting and much more with the performance that your users expect.
www.ag-grid.com
'프로젝트 > 샵토' 카테고리의 다른 글
| [AWS] Lambda + CloudWatch를 이용하여 크롤링 작업하기 (0) | 2021.04.09 |
|---|---|
| 서버 마이그레이션 (0) | 2021.04.09 |
| 서비스 소개 (1) | 2021.04.09 |