4주차 회고록

4주차는 기존과는 다르게 개인 과제로 진행이 되었고 라이브러리의 제한도 풀렸다.
과제의 난이도는 라이브러리를 사용한다면 기존과 비슷하다고 생각이 들었다.

과제를 진행하면서

4주차는주어진 데이터를 바탕으로 막대 그래프와 영역 그래프를 그리는 과제이다.
그렇기에 나는 차트를 그리기 위한 방법을 생각하기 시작했다.
라이브러리를 사용하지 않고 그래프를 그릴것인지 혹은 라이브러리의 제한도 없으니 차트를 그리는 라이브러리를 사용할 것인지!
결국 짧은 기간인 것을 고려하여 나는 라이브러리를 사용하여 보다 퀄리티 있는 차트를 그리기로 결정하였다.

이후에 나는 차트 라이브러리를 고르고자 npm trends를 통해 인기있는 차트 라이브러리를 찾아보았다.
그리고 나는 2가지의 라이브러리를 추려냈다. 첫번째는 Chart.js이다. 해당 라이브러리는 예전부터 들어본적이 있었다.
두번째는 Recharts였다. 해당 라이브러리는 들어본적은 없었지만 검색한 결과 많은 리액트 개발자들이 사용하는 차트 라이브러리라고 소개되어있다.
나는 각자의 장단점을 찾아보며 어떤 라이브러리를 사용할 것인지를 고민해보았다.

Chart.js의 경우에는 npm trends에서 1위를 기록하고 있으며 리액트에서 이를 사용할 경우에는 react-chartjs-2라는 추가적인 wrapper 라이브러리를 설치하여 사용하면 된다.
Chart.js는 웹에 차트를 그리는 것에 특화되어있어 기본적으로 제공되는 디자인과 기능이 있다. 또한 러닝커브가 낮은 것으로 유명하다.
나 또한 사용해본 적은 없었던 라이브러리였지만 문서를 읽으면서 어느정도 이해가 잘되는 편이였다.

Recharts는 d3기반으로 리액트에서 사용하기 위해 만들어진 차트 라이브러리이다. 해당 라이브러리는 react-chartjs-2와 비교하면 훨씬 인기가 많은 라이브러리이다. 해당 라이브러리 또한 react-chartjs-2와 비슷하게 러닝커브가 낮고, 문서화도 잘되어있다.

나는 두개의 라이브러리의 큰 차이점을 찾지는 못하였지만 이전부터 이름은 알고 있었던 chart.js를 사용해보고자 해당 라이브러리를 선택하였다.

배운점

리액트에서 chart.js를 사용하기 위해서는 react-chartjs-2라는 wrapper 라이브러리를 추가적으로 설치하여야 한다.
해당 라이브러리는 자체적으로 타입을 제공하기 때문에 타입을 react-chartjs-2 공식 문서를 보면서 타입을 참고하면 된다.

하지만 react-chartjs-2의 최대 단점을 뽑자보면 공식문서가 그렇기 친절하게 되어있지 않다. 물론 chart.js 공식 문서는 잘되어 있지만 react-chartjs-2의 공식문서는 완전 기초적인 것만 알려주기 때문에 초기에 나도 지원하는 메서드를 찾기 위해서 공식문서를 열심히 찾았지만 원하는 정보가 없어 chart.js 문서를 바탕으로 진행을 하였다.

4주차를 마무리하면서

4주차 과제는 오랜만에 처음 사용해보는 라이브러리를 공부하는 시간을 갖게되었는데 역시 처음 배우는 것은 언제나 어려움이 있었다. 하지만 공식문서를 읽는 것이 조금씩 익숙해지고 있어서 배우는데 오랜 시간이 걸리지 않은것 같다.

4주차는 혼자서 진행했기 때문에 기술 스택같은 것을 내 마음대로 할 수 있었기 때문에 개발 시 편한 것도 있었지만 코드를 같이 리뷰할 팀원들이 없었기 때문에 뭔가 내 코드가 좀 아쉬웠고, 코드 리뷰가 얼마나 중요하고 좋은 것인지를 깨닫게 되었다.