Act99 기술블로그

내가 가지고 오는 코인API 데이터에는 이평선에 대한 정보가 없다. 따라서 이평선을 구현하는 함수가 필요하다. Functions 폴더에 ave-cal.ts 파일을 만들어준다. (평균을 구하는 함수) 그리고 다음처럼 구현했다. const aveCal = (close: number[], length: number) => { const cloXArray: [number, number][] = []; const calClo20: number[] = []; for (let i = 0; i a + b) / length ); } for (let..

드디어 이사를 완료했다. Nextjs 로 이사하면서 router를 설정할 필요가 없다는 장점 외에는 아직 큰 장점을 못느끼고 있다. (이제 막 시작하는 단계라 그런 것 같다.) 이사하면서 node version을 v16 으로 해서 Apollo codegen이 작동하지 않았다. 그래서 결국 수작업으로 타입들을 만들어주었다. (추후 해결할 예정) 그리고 결과물은 잘 나오는 것을 확인할 수 있다. 이젠 채팅기능을 구현할 차례이다. 코인차트 볼린저밴드를 구현한 후 바로 진행할 것이다. 채팅기능은 Apollo Client 를 이용해 작업할 예정이다. 따라서 NestJs에서 미리 백엔드 작업을 해야겠다. https://github.com/act99/stock-chat GitHub - act99/stock-chat:..

전 글에서 코드의 문제점들을 해결한다고 언급한 바가 있다. https://bugerstory.tistory.com/39 [React] 직접 주가 캔들 차트 만들기 - 코드정리1 (SVG 연습용), (차트라이브러리 x) 오늘은 코드정리를 할 예정이다. 지금 작성한 코드의 문제점들은 1. [object1, object2....] 배열 요소를 각각의 배열로 변화시키는게 너무 많다. // array 데이터들 분류 const stockOpen = stockArray.map((item.. bugerstory.tistory.com 결과부터 말하면 700 줄이나 되던 handmade-chart.tsx 코드는 100줄로 줄일 수 있었다. 먼저 해결한 것은 데이터 배열을 분류시키는 코드를 단축시킨 것이다. 전에 코드는 /..

다음은 볼린저 밴드를 만들 차례이다. 볼린저 밴드란 존 볼린저의 주가 기술적 분석 도구이며, 이동평균선을 추세중심선으로 사용하고, 상하한 변동폭은 추세중심선의 표준편차로 계산한 밴드이다. 볼린저 밴드의 상한선: 20일 이평선 값 + ( 20일 동안의 주가 표준편차 값 ) * 2 볼린저 밴드의 하한선: 20일 이평선 값 - ( 20일 동안의 주가 표준편차 값 ) * 2 볼린저 밴드 구름대 형성 -> 상한선과 하한선 갭 => (상한선 – 하한선) / 중심선 이다. 이를 이용해 볼린저 밴드를 만들 것이다. 먼저 20일간의 주가 표준편차 값을 구해야 한다. ** 밑그림** 평균값 clo20ArrayBol = clo20Array.slice(index, (index+20)) -> 20개씩 추출 clo20ArrayB..

저번 글에서 봤듯이 차트를 확대할 때, 과거 데이터를 가져오는 문제가 있었다. https://bugerstory.tistory.com/35 [React] 직접 주가 캔들 차트 & 거래량 바 차트 만들기4 - onWheel 을 통해 데이터값을 추가시키거나 오늘은 onWheel 을 통해 데이터 값을 추가 또는 감소시키는 작업을 했다. 그 전에 만들었던 코드를 일단 정리했다. stock.tsx 파일에서 불러오는 데이터를 handmade-chart.tsx 로 옮겼으며, 안쓰는 코드들 bugerstory.tistory.com 이 문제를 수정하기 위해 slice를 사용했다. const [dataLength, setDataLength] = useState(24); const stockData = data?.gsSto..

오늘은 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..

React-Google-Chart 를 사용하던 중, 직접 차트를 만들고 싶은 충동이 생겼다. 먼저 handmade-chart.tsx 를 만들어주고 svg 를 이용해 차트 틀부터 만들어 주었다. (CSS 경우 tailwind를 사용하였다.) - handmade-chart.tsx import React from "react"; const SVG_CHART_WIDTH = 1600; const SVG_CHART_HEIGHT = 400; const SVG_VOLUME_WIDTH = 1600; const SVG_VOLUME_HEIGHT = 400; export const HandmadeChart = () => { const x0 = 50; const xAxisLength = SVG_CHART_WIDTH - x0 *..

저번에 Nestjs 와 postgresql 을 이용해 주식데이터를 localhost:4000 에 띄워놨다. https://bugerstory.tistory.com/28 [Nestjs] CSV 파일을 postgresql 테이블로 옮기고 localhost 에 띄우기 필자는 현재 주식정보를 RestAPI 로 띄운 후, React를 이용해 브라우저 상에서 주식 차트를 구현시키려고 한다. 프론트엔드 공부를 하려했지만, 주식 api를 직접 빌드해서 사용하고 싶었기 때문에 작 bugerstory.tistory.com React 를 이용해 브라우저상에 차트를 띄울 예정이며, 먼저 apollo와 apollo-toolings 를 설치했다. https://github.com/apollographql/apollo-toolin..