왜? APEXCHART?
이번 프로젝트에서 특정 데이터를 APEXCHART를 통해 다양하게 보여주어야 했다.
처음에는 현재시간으로 부터 약 15분 이전의 기간, 약 800개의 데이터를 보여준다.
그리고 나서 여러 조건을 준다. 그 조건은 아래와 같다.
1) 비교할 데이터를 한 차트에 보여준다.
2) 특정 기간의 데이터를 보여준다.
- 현재 시간으로부터 30분, 1시간, 2시간
- 과거 시간의 데이터를 보여주기,
예를 들어, 24년 4월 29일 ~ 24년 4월 30일의 데이터
1) 비교할 데이터를 한 차트에 보여준다.
예를 들어, A, B, C라는 데이터가 있다고 하자, (차트는 line 차트이다.)
A데이터를 처음에 보여주었는데, 그 차트에 다른 색상으로 B데이터를 함께 보여주어야 했다.
API를 통해 새로운 데이터를 불러오는 건 어렵지 않지만,
이 차트를 화면에 시각화 하는 게 어려웠다.
1번
(1) 문제 : 화면에 차트가 그려지지 않음.
(1) 해결 : 이 부분은 A데이터와 B데이터의 개수가 같지 않았기 때문이다. 둘다 Array로 되어 있는데, 그 길이가 달라 차트에 그려지지 않았던 것이다.
2번
(2) 문제 : 비교할 데이터가 그려지나 보여지는 속도가 느리다.
(2) 해결 :
x축의 type이 원인이었다. 나의 경우 x축의 type을 categories로 해놓았다. 그런데 apexchart의 docs를 보면, type의 종류가 4가지 있는데, type이 차트의 성능을 좌우한다고 한다. Type 중 datetime, numric이 가장 빠른 성능을 가져오고, categories는 그에 비해 성능이 떨어진다. 따라서, 나는 type을 datetime으로 바꾸었다.
3번
(3) 문제 : 데이터가 그려지는 속도가 느리다.
(3) 해결 : 불필요한 렌더링이 문제의 원인이었다. 지나친 setState의 남용으로 인하여
데이터를 그려지는 게 느려진 것이다.
2) 특정 기간의 데이터를 보여준다.
불러와야 하는 데이터 양도 많다. 몇 백, 몇 천, 만 개가 넘기까지의 데이터를 불러와야 한다.
1번
(1) 문제 : 한 번에 많은 2만개 이상의 데이터를 그리기가 어렵다.
(1) 해결 : - 현재 시간으로부터 불러오는 데이터를 3시간 이내로만 limit를 걸었다. - 과거 데이터 range를 4일로 limit 걸었다.
그 외의 문제들은 1)번과 같다.
나의 각오
사실 이 차트라이브러리 이슈 때문에, 고생을 스트레스를 많이 받았다.
회사에서도 해결이 늦다는 압박도 있었다.
예전에 데이터를 한 종류에 15개 정도만 받아왔을 때는, 스트레스 받을 일이 없었다.
내가 차트 라이브러리를 잘 사용한다고 생각했는데, 교만이었다.
작업하면서 생각하지도 못한 이슈도 많이 있었다.
그럼에도 극복하게 해주심에 감사하다.
나는 할 수 있다.
