- Today
- Total
목록chart (3)
Act99 기술블로그
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/dccCjk/btrnbJ3G7Re/g7Ea3xnsLlaFXMbCn9kMf1/img.png)
가지고 온 코인 API는 현재 코인의 시세와 거래량, 전일 변화율 등이다. 이것을 홈 화면에 하나의 표 형태로 만들어 볼 예정이다. 먼저 React-table 모듈을 설치해주었다. `npm install react-table` `npm i @types/react-table` 다음으로 home.tsx 파일에 다음과 같은 코드를 구현했다. import React from "react"; import LoadingComponent from "../components/loader"; import { CoinTable } from "../components/table/cointable"; import { useGetCryptosQuery } from "../services/cryptoApi"; type Colum..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/kJjXs/btrmLBYysWr/CSgwRuUtIZu0EKj4ylNFE0/img.png)
다음은 볼린저 밴드를 만들 차례이다. 볼린저 밴드란 존 볼린저의 주가 기술적 분석 도구이며, 이동평균선을 추세중심선으로 사용하고, 상하한 변동폭은 추세중심선의 표준편차로 계산한 밴드이다. 볼린저 밴드의 상한선: 20일 이평선 값 + ( 20일 동안의 주가 표준편차 값 ) * 2 볼린저 밴드의 하한선: 20일 이평선 값 - ( 20일 동안의 주가 표준편차 값 ) * 2 볼린저 밴드 구름대 형성 -> 상한선과 하한선 갭 => (상한선 – 하한선) / 중심선 이다. 이를 이용해 볼린저 밴드를 만들 것이다. 먼저 20일간의 주가 표준편차 값을 구해야 한다. ** 밑그림** 평균값 clo20ArrayBol = clo20Array.slice(index, (index+20)) -> 20개씩 추출 clo20ArrayB..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/ehViE1/btrmEFHLdVy/6OQfEBxIeDdFc4f4enuh50/img.gif)
오늘은 onWheel 을 통해 데이터 값을 추가 또는 감소시키는 작업을 했다. 그 전에 만들었던 코드를 일단 정리했다. stock.tsx 파일에서 불러오는 데이터를 handmade-chart.tsx 로 옮겼으며, 안쓰는 코드들을 다 삭제시켰다. 중복 코드 정리와 코드축소화 작업, 컴포넌트 별 분류 작업은 오늘 할 작업을 마친 후 작업할 예정이다. 먼저, onWheel 로 불러올 데이터 량을 핸들링 할 필요가 있었다. const stockData = data?.gsStock.map((item) => item); const stockArray: any[] = []; stockData?.forEach((item) => stockArray.push(item)); console.log(stockArray); co..