Act99 기술블로그

이번에는 코인 정보 슬라이드를 만들어주었다. 시간초의 경우 setInterval & useEffect & useRef 로 만들지 않고 useInterval hook 을 이용해서 만들었다. 결과물은 아래와 같다. 내용을 딱히 넣을 것이 없어서 Description 데이터를 800자만 불러왔다. 데이터가 html tag 까지 갖고 있어, dangerouslySetInnerHTML 을 이용했다. 코드는 다음과 같다. - homeSlider.tsx import { useEffect, useState } from "react"; import CoinSliderCard from "../../components/slider/coinSliderCard"; import useInterval from "../../hook..

내가 가지고 오는 코인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..

오늘은 코인차트를 만들기 앞서 라우터 정리와 네비게이션 바를 만드려고 한다. 먼저!! 말하자면!! 라우터와 네비게이션 바를 미리 만들어놓는 것이 좋다. 레이아웃 짜는것부터 css 와 router 설정과정까지 모든 면에서 봤을 때 페이지와 컴퍼넌트를 먼저 만드는 것보다 라우터와 네비게이션 바를 먼저 만드는게 더 효율적이라고 생각한다. (css 설정도 다시 해줘야하고 골치 아픈게 많았다.) 그럼 본론부터 들어가면, css 는 tailwind css 를 이용했다. 그리고 components 폴더에 navbar 폴더를 만들어 네비게이션 바에 필요한 모든 코드를 넣어주었다.(css까지) 네비게이션 바는 잘 건들지 않을 것 같아서 이런 선택을 했다. ******** 네비게이션 바는 docs와 기타 코드문헌들을 많이..

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

먼저 오늘 한 결과물은 이렇다. 저번 시간에는 차트구현까지는 했으나, 데이터 값 대비 차트 구현이 정확하지 않았으며, 화면 리사이즈를 할 때 오류가 생겼다. (몇개의 데이터만 변화) 따라서 유지보수에도 편하고, 화면 리사이즈 시 자연스럽게 변하며, 차트를 좀 더 정밀하게 구현할 필요가 있었다. 먼저, 화면 리사이즈부터 다루었다. ReactHook 을 이용해 사이즈 변화상태마다 width, height 값을 구할 예정이다. (tailwindCSS 를 사용하면 편하지만, 정확한 width 값과 height 값이 필요했으며, Hook 연습도 필요했기 때문에 직접 구현했다.) Hook Docs를 보면 useWindowSize 를 이용하는 코드가 나와있다. (공부를 목적으로 하면 직접 타이핑하면서 작성할 것을 추..

필자는 현재 주식정보를 RestAPI 로 띄운 후, React를 이용해 브라우저 상에서 주식 차트를 구현시키려고 한다. 프론트엔드 공부를 하려했지만, 주식 api를 직접 빌드해서 사용하고 싶었기 때문에 작업을 시작했다. DB 관리는 postgresql 로 할 예정이며, Graphql 과 Typeorm, Nestjs 를 이용할 예정이다. (Nestjs를 배울 때 이 방식으로 배웠기 때문이기도 하며, Nestjs Doc을 보면 Typeorm과 Graphql 사용을 권장한다고 적혀있다.) ** postgresql 테이블에 CSV파일을 import 하고 nestjs와 연결하려면 Table을 직접 만드는게 아니라 Nestjs 를 이용해 table을 만들어주어야한다. ** (테이블을 미리 만들어놓고하다가 연동이 안..