DataTables 장단점 및 속도 이슈

운영툴을 만드는데 테이블이 필요해서 datatable 을 사용했다.

datatable의 장점은 프론트나 서버사이드 개발자가 소팅, 페이징, 검색등을 전혀 신경쓰지 않아도 된다는 점이다.

JSON으로 응답받는 정보들은 그냥 전체 리스트를 내려주기만 하면 된다.

그러면 datatable이 알아서 테이블을 그려주고, 일단 테이블이 완성된 이후에는 검색이나 소팅이 굉장히 빠르게 동작한다. (특정 액션을 할때마다 API를 재호출 하는게 아니기 때문)

디자인 또한 제공되는 css를 사용해서 별도 스타일을 적용하지 않아도 꽤 괜찮은 모습으로 표현된다.  (우리는 semantic ui를 사용했다.)

테이블 복사, Excel 다운로드등도 코드 몇줄만 추가해주면 쉽고 편리하게 구현할 수 있다.

단점은 튜닝이 어렵다는 점. 버튼 위치를 옮기거나 새로운 요소가 필요하다거나 할때 애매한 경우가 발생한다.

디자이너가 디자인 해준대로 표현하기도 까다롭다. 그래서 우리는 유저들의 접근이 없는 운영툴에서만 사용한다. 디자인이나 크로스브라우징을 크게 고려하지 않아도 되기 때문이다.

초기 운영시에는 아무런 문제가 없어 보였다.

서버사이드 API는 통채로 정보를 내려주기만 하면 됐고, FT개발자들은 정보를 루프 돌린다음 DataTable( ) 해주면 OK였다. 운영자들은 새로운 정보를 추가하고, 필요하면 Excel로 다운받고, 보고 싶은 정보는 검색이나 소팅을 통해 바로바로 찾을 수 있었다.

문제는 운영건이 점점 늘어가면서 발생했다.

최초 진입시 테이블이 나타나는 시간이 점점 늦어지더니, 데이터가 1만건이 넘어가는 시점이 되자 페이지 로딩 시간이 1분 넘어가버렸다. (무한 돌돌이..)

원인을 찾아보았다.

1. API 응답이 느린가? : 아니었다. 1만건이 넘어도 SELECT 쿼리문은 빨랐고, ajax로 호출한 API는 2초 이내로 응답을 주었다.
2. Datatable이 느린가? : 아니었다. 불필요한 모든 코드를 지우고 datatable ajax로 그리니 금방 테이블이 나타났다.
3. html append가 느린가? : 정답.

나는 Backbone Collection fetch( )를 통해 API를 호출했고,

각 Backbone Model 을 루프돌면서 Backbone View element에 append 시켜주는 형태로 테이블을 그리고 있었다. 1만건이 넘는 <tr>을 append하는데 엄청난 시간이 소요되고 있었던 것이다.

애초에 datatable ajax로 그리면 될것을 왜 굳이 underscore template 을 사용해서 뻘짓을 했는가..

변명을 하자면 우선 운영툴 페이지는 모두 Backbone js로 제작되었다.

Backbone 을 쓰면 자연스럽게 underscore template을 사용할 수 있다.

underscore template은 직관적이고, js와 분리되어 관리가 편했고, 무엇보다 응답받은 data를 입맛에 맞게 튜닝하기 쉬웠다.

if/else/for/replace 등을 직접 사용할 수 있어서 편했다.

그래서 당연히 template을 통해 target element에 append 시켜주는 방식을 사용했던 것이다.

문제를 해결해보자.

앞서 테스트를 통해 확인했듯이 datatable에도 ajax를 통한 호출 및 loop > append기능이 있다.

안썼던 이유는 딱 하나, 응답받은 data를 입맛에 맞게 수정하기 힘들기 때문이다.

td안에 버튼이 있거나 상태값 체크가 필요한 경우 template 으로 처리하면 굉장히 편했다.

반면 datatable ajax를 이용하면 단순 텍스트의 표현외에는 할 수 있는게 없었다.

일단 이슈는 해결해야 되기 때문에 속도를 택하고, template을 버리고, ES2015 template를 사용하기로 했다.

datatable > ajax > dataSrc 함수로 응답받은  data를 입맛게 맞게 수정해서 return 해주자.

ES2015를 사용해도 운영자들은 어차피 크롬이나 파이어폭스만 사용하기 때문에 이슈는 없었고,

멀티라인을 이용해 html을 표현하기 수월했으며, $를 통해 표현식을 사용하는데 문제없었다.

underscore template을 사용하면서 느낀 편리함을 그대로 옮겨올 수 있었다.

나같은 경우에는 새로운 배열을 만들어 기존 정보를 튜닝해 넣어주고 return해주는 방식을 택했다.

추가 :

만약 데이터가 무한정 늘어난다면? 위 해결 방법은 답이 아니다.

애초에 불러오는 API응답이 느려질것이기 때문.

그때는 datatable의 Server-side processing을 사용해서 ajax 콜을 해야한다.

다만 이 경우 호출되는 API에 페이징 및 소팅, 검색 처리가 모두 되어있어야 한다.. 작업량이 엄청나게 늘어난다;;;