ICT 인턴십 근무를 하면서 4월, 5월 달에는 기존에 맡았던 서비스의 어드민 페이지를 작업 중에 있습니다. 기존 서비스에 대한 어드민 페이지가 있지만 다양한 이슈(나중에 인턴십 후기에 정리해볼까 하는)로 인해서 새롭게 리뉴얼을 진행하고 있습니다. 그 과정에 개발하면서 적어둔 내용들을 하나 씩 올려볼까 합니다.
특정 서비스에 대한 통계치를 보여주는 카드가 대시보드 작업을 하면서 필요로 했기 때문에 팀장님께서 의견을 주신 nivo를 활용해서 해당 컴포넌트를 구현해보려고 하였습니다.
Chart.js 나 d3.js와 같은 라이브러리를 이전에 사용은 해보았지만 특정 데이터를 잘 보여주기 위해서 컴포넌트를 구성하는 건 이번이 처음이라 최대한 공식문서를 잘 읽으면서 진행해보려고 하였습니다.
nivo를 사용하면서 느낀 점을 간단하게 정리하면
커스텀에 대한 부분이 공식 문서에 그대로 나타나 있어, 특정 값을 변경 하거나 추가했을 때 어떻게 보이게 되는지 바로 시각적으로 확인이 가능하다. nivo 공식 페이지에서 Line 컴포넌트를 테스트
왼쪽 사이드 바에서 원하는 그래프 형태를 클릭한 후에 왼쪽 부분에는 해당 그래프에서 설정할 수 있는 값들과 설명이 그리고 오른쪽 부분에는 설정 값에 따른 시각화된 그래프와 그래프를 구성하고 있는 데이터, 코드를 확인할 수 있습니다. 그래프 라이브러리를 일반적으로 사용해봤을 때 그래프 + 코드 조합으로 되어 있는 경우가 많았지만, nivo의 경우처럼 값을 바꿔가면서 테스트를 하고 바로 코드로 확인할 수 있는 라이브러리가 확실히 극소수 였던 것 같아 장점이라고 생각합니다.
커스텀에 대한 정보가 적다 + 커스텀의 범위가 좁다. 1번이 장점이자 단점인 이유라고도 보는 이유는 위에 적혀있는 것 처럼 커스텀 할 수 있는 설정값들에 대한 설명이 부족하다는 점과 커스텀 할 수 있는 범위가 좁다는 것 입니다. nivo의 Bump 그래프
Bump 그래프로 예를 들어 보겠습니다. 처음에 팀장님께서 컴포넌트를 빠르게 확인할 수 있도록 그래프의 코드를 가져와서 몇몇 컴포넌트를 구성해주셨습니다. 실제 데이터를 fetch 해와서 데이터를 넣을 때 까지는 문제가 없었지만 해당 그래프에서 문제점은 왼쪽 Y축에 대한 값의 순서를 바꿀 수가 없었다는 점 입니다. 당연히 같은 라이브러리의 다른 그래프 들이 reverse라는 옵션을 제공해줬기 때문에 Bump 또한 있을 거라고 생각했던 것이 문제였습니다. 커스텀을 직접 할 수는 없을까 찾아보다가 reverse를 구성하기 위해 들이는 공수가 그래프를 바꾸는 공수보다 더 들어갈거라는 예상이 계속 들어서 결국 Bump가 아니라 글의 초반 부에 나왔던 Line 그래프로 변경해야 했습니다.
y축, x축에 대한 값의 format이 고정되어져 있다. format을 변경 해볼 수 있도록 해주는 nivo 공식 문서 컴포넌트 값을 알려줄 때 x,y축에 대해서 알려주려고 그래프에 작성하는 경우가 많습니다. nivo에서 문제가 되는 이유는 그래프 위에 마우스를 hover하게 되면 값을 보여주긴 하는데 해당 값에 대한 양식이 고정이라는 점입니다. format 자체가 정규식 처럼 고정 되어져 있다보니 제공을 하는 format 외의 경우로 사용하기가 어려운 것 같습니다. 예를 들어서 nivo에서 제공하는 $ 등을 붙여 0.01$로는 가능하지만 0.01개로 '개'를 원하는 숫자 뒤에 붙여서 사용하기가 어렵습니다. 아무래도 영어권 라이브러리 이다 보니 이런 이슈가 한국어를 사용했을 때 문제가 생기는 것 같습니다.
만약 nivo를 사용하시려고 생각하시는 분이 있다면 이런 점에 대해서 고려를 하시고 사용을 하시면 좋을 것 같습니다.
