[캔들차트] 메인 feature 개발

[baldwinIV]

요약

캔들차트를 그리기 위해 Next상에서 데이터를 fetching하여 차트 컴포넌트로 전달,

예상 작업 내용 (커밋단위)

• [x] d3 설치
• [x] 업비트 API fetch 함수 / 혹은 WS 이벤트 등록
• [x] CandleChart 컴포넌트 생성
  • [ ] 스토리북 등록?
• [x] 리액트 state에 데이터 등록
• [x] useRef로 차트 ref를 CandleChart 컴포넌트에 연결
• [x] UpdateCandleChart 함수 선언 후 useEffect로 캔들데이터에 binding
• [x] D3로 데이터 바인딩 후 정적 차트 렌더링
• [x] 소켓 연결하여 실시간 차트 렌더링
• [x] y축 axis 추가
• [x] x축 axis 추가

이슈가 완료된 후

작성된 CandleChart 컴포넌트의 update함수에 D3코드를 작성하기만 하면 차트를 그릴 수 있다. 차트를 그림에 있어 더이상 리액트 레벨의 데이터 fetching을 신경 쓸 필요 없이 주어진 데이터만으로 D3 svg를 그리는 것에 신경쓸 수 있게 된다.

기타

CandleChart를 선언하는 것이 아닌 Chart 컴포넌트에 D3 Update함수만을 props로 전달하는 더 범용/일반적인 방식으로 코딩할 수 있으나, 우리가 프로젝트에서 기획한 차트의 종류가 그리 많은 것이 않은 것을 감안하면, 일단은 각 차트당 하나의 컴포넌트를 생성하는 것으로 진행하려 한다. 차트의 종류가 많아져서 반복되는 Chart 로직을 줄여야 하는 필요가 느껴질 때, refactoring을 진행한다.

[baldwinIV]

생각보다 이슈가 길어져 이슈 이름을 변경하였다. 메인 피쳐까지 개발하고 추가기능은 다른 이슈로 분리함