- Today
- Total
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 리액트
- Coin
- Firebase
- 채팅
- graphql
- 에러
- 3주차
- nextjs
- react
- 코인
- apollo
- 항해99
- nestjs
- Flutter
- typeorm
- error
- websocket
- API
- 주식
- 비전공자
- 코인차트
- 차트만들기
- rtk
- 차트구현
- 차트
- javascript
- Redux
- chart
- 주식차트
- typescript
Archives
Act99 기술블로그
[Nextjs] 주식사이트 만들기-2 코인 이평선 만들기 & 볼린저밴드 만들기 [Redux, Apollo] 차트 라이브러리x 본문
개발팁저장소/nextjs
[Nextjs] 주식사이트 만들기-2 코인 이평선 만들기 & 볼린저밴드 만들기 [Redux, Apollo] 차트 라이브러리x
Act99 2021. 12. 9. 11:56내가 가지고 오는 코인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일정도 밀리고 있다. 추후 수정이 필요할 듯 하다.
먼저 채팅기능부터 구현한 후 천천히 수정해나갈 예정이다.
'개발팁저장소 > nextjs' 카테고리의 다른 글
[Nextjs] 주식사이트 만들기-6 채팅 프론트엔드 (Websocket Error) (0) | 2021.12.14 |
---|---|
[Nextjs] 주식사이트 만들기-4 채팅 프론트엔드(Apollo client, graphQL, useQuery) (0) | 2021.12.13 |
[Nextjs] 주식사이트 만들기-3 프론트엔드 채팅 만들기 (Apollo client, graphQL, useForm) (0) | 2021.12.10 |
[Nextjs] 주식사이트 만들기-1 Next.js로 이사하기 [Redux, Apollo] 차트 라이브러리x (0) | 2021.12.08 |
[React] 주식사이트 만들기-6 Next.js로 이사하기 [Redux, Crypto Compare] 차트 라이브러리x (0) | 2021.12.08 |