[Nextjs] 주식사이트 만들기-2 코인 이평선 만들기 & 볼린저밴드 만들기 [Redux, Apollo] 차트 라이브러리x

내가 가지고 오는 코인API 데이터에는 이평선에 대한 정보가 없다.

따라서 이평선을 구현하는 함수가 필요하다.

 

Functions 폴더에 ave-cal.ts 파일을 만들어준다. (평균을 구하는 함수)

그리고 다음처럼 구현했다.

const aveCal = (close: number[], length: number) => {
  const cloXArray: [number, number][] = [];
  const calClo20: number[] = [];
  for (let i = 0; i < close.length; i++) {
    calClo20.push(
      close.slice(i, i + length).reduce((a: number, b: number) => a + b) /
        length
    );
  }
  for (let i = 0; i < close.length; i++) {
    cloXArray.push([calClo20[i], calClo20[i + 1]]);
  }
  cloXArray.length > length
    ? (cloXArray.length = cloXArray.length - length)
    : null;
  for (let i = 0; i < length; i++) {
    cloXArray.unshift([0, 0]);
  }
  //   console.log(cloXArray);
  return cloXArray;
};

export default aveCal;

 

먼저 종가 데이터와 몇일 평균선인지 알려주는 props를 만들어주었다. (close, length)

그리고 이평선을 그릴수 있도록 전일데이터와 현재 데이터를 하나의 array 형태로 만들어 push 시켜주었다.

만약 종가데이터가 없다면 null 을 호출하여 데이터값을 0으로 만들어주었다.

 

결과적으로 

 

 

이평선이 잘 그려지는 것을 확인할 수 있다.

하지만 조금 무겁다는 느낌이 들었고(콘솔로그로 확인해보니 계산과정에서 무수한 로그들이 나왔다.), 주식데이터를 취급했던 것 처럼 이평선 데이터 자체가 있어줘야겠다는 생각이 들었다.

 

 

볼린저 밴드까지 구현시켰다. 하지만 볼린저밴드에 필요한 20일 평균선 데이터를 가져오는 과정에서 문제가 좀 생겼는지 완벽하게 구현되지 않고 5일정도 밀리고 있다. 추후 수정이 필요할 듯 하다.

 

먼저 채팅기능부터 구현한 후 천천히 수정해나갈 예정이다.