[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을 진행한다.
요약
캔들차트를 그리기 위해 Next상에서 데이터를 fetching하여 차트 컴포넌트로 전달,
예상 작업 내용 (커밋단위)
이슈가 완료된 후
작성된
CandleChart
컴포넌트의 update함수에 D3코드를 작성하기만 하면 차트를 그릴 수 있다. 차트를 그림에 있어 더이상 리액트 레벨의 데이터 fetching을 신경 쓸 필요 없이 주어진 데이터만으로 D3 svg를 그리는 것에 신경쓸 수 있게 된다.기타
CandleChart
를 선언하는 것이 아닌Chart
컴포넌트에 D3 Update함수만을 props로 전달하는 더 범용/일반적인 방식으로 코딩할 수 있으나, 우리가 프로젝트에서 기획한 차트의 종류가 그리 많은 것이 않은 것을 감안하면, 일단은 각 차트당 하나의 컴포넌트를 생성하는 것으로 진행하려 한다. 차트의 종류가 많아져서 반복되는 Chart 로직을 줄여야 하는 필요가 느껴질 때, refactoring을 진행한다.