모아데이터 기업 과제
모아데이터에서 어드민 화면과 회원별 데이터를 차트에 구현해주는 과제였다.
그 중 차트파트를 맡게되어 우선 필요 요소부터 정리하였다.
상태관리
필요한 상태관리를 다음과 같이 정의했다.
전역적으로 필요한 상태관리
- 지정 날짜, 일별/시간별/주간 카테고리, 차트에 데이터를 표시할 회원을 특정할 상태
- 차트 컴포넌트에서 필요한 상태관리
- 날짜 값에 따라 차트에 넣어줄 X,Y값으로 이루어진 객체 데이터
처음 코드를 짤 때 날짜의 배열을 상태관리를 함으로서 조건별로 날짜 배열에 해당하는 날짜를 넣는 형식을 택했었는데 그렇게 되면 컴포넌트 단에서 매우 지저분해짐으로 시작, 끝 날짜만 있으면 원하는 데이터를 들고올 수 있는 함수를 컴포넌트 외부에서 정의해 들고오는 방식을 택했다.
시작, 끝 날짜로 구현해줌으로서 주간, 전체 카테고리는 무시해도 된다.
다만 하루치가 되었을 경우 시간별로 들고와야 함으로 이 부분에 있어서는 따로 함수를 정의하는게 가장 간결하다고 판단하여 아래와 같이 코드를 작성했다.
전부 작성한 후에 일별 평균 심장 박동수를 구현하는 과정에서 소숫점 계산쪽에 버그가 있어
이 부분은 자바스크립트 특성상 소숫점 계산시 오차가 있으므로 bignumber js로 처리하여 주었다.
위와 같이 큰 숫자나 소숫점 계산에는 따로 라이브러리를 사용해주어야 한다.
You only have to right once