나는 어떻게 차트를 만들었나

1. 직접 구현 vs 라이브러리 사용

처음 내 욕심은 D3를 이용하여 직접 구현하는 것이었다.

정확히는 html, css, js만으로 구현하려다 실패하고 D3를 활용하여 만드려고 했다.

다행히 캔들 차트를 만드는데 성공했으나 차트를 좌우로 움직이거나 확대/축소 기능을 만들지 못했다.

그래서 타협을 좀 해서 D3fc라는 라이브러리까지 써보기로 했다.

이 라이브러리로 스트리밍 기능과 좌우로 움직이는 기능을 구현할 수 있었다.

그런데.. 확대 기능을 붙이기가 쉽지 않았다.

D3에서 지원하는 zoom이 제대로 동작하지 않았다.

Y축 확대 축소 기능도 기본적으로 지원하지 않았다….

결국 슬프게도 차트를 통째로 지원하는 라이브러리를 찾기 시작했다.

2. highchart vs react-financial-charts

마지막까지 고민했던 라이브러리는 highchart 와 react-financial-charts였다.

구분	higchart	react-financial-charts
문서화	좋음	나쁨
사용 유저	많음	적음
참고자료	많음	적음
보조지표	적음	많음
미관	좋은편	좋음

거의 모든 면에서 highchart가 우세하다.

하지만 난 생각지도 못한 경험을 하고 react-financial-charts를 사용하기로 마음 먹었다.

3. 다른 사람의 코드를 보다

react-financial-charts는 사용방법이 거의 나와있지 않았다.

지금은 나아진 편인데, 처음 사용할때만해도 소스코드를 직접 보고 사용해야할 수준이었다.

그럼에도 예제로 나와있는 결과물이 굉장히 마음에 들었기 때문에 사용법을 알고자 열심히 코드를 읽었다.

이 때 처음으로 HOC 패턴에 대해 배웠다.

다른 사람의 코드를 보고 배운 첫 경험이었다.

항상 잘 정리된 문서로만 공부했던 나에게 이것은 굉장히 신선한 경험으로 다가왔다.

처음에는 문서화가 안돼있음에 분노했지만, 결과적으로 배운것이 있었다.

그래서 react-financial-charts 사용하기로 마음먹었다.

4. 완성하고 나서 느낀점

아직 개발 진행이 알파 단계인 라이브러리를 쓰면서 아쉬운 점이 있었고,

사용방법을 몰라 너무나 많은 테스트를 하며 만들어야 했지만 어느정도 만족스러운 결과가 나왔다.

강제로 남의 코드를 읽게 환경을 만든 것도 좋은 경험이 되었다.

회사에서는 안정적인 라이브러리를 쓰는게 중요하겠지만

혼자서 공부할 때는 개고생을 해보는 것도 나쁘지 않은것 같다.

---

• ← Previous Post
• Next Post →

---

---