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..

사실상 이것을 만들기 위해 여태까지 달려왔다고 해도 무방하다. 최종 목표는 실시간 데이터를 불러오고 차트를 구현시키는 것이였다. 그리고 이번에 할 것은 실시간 코인차트 만들기이다. 먼저, 내가 사용할 CryptoAPI (코인 시세 API) 사이트는 CryptoCompare 사이트이다. https://www.cryptocompare.com/ Cryptocurrency Prices, Portfolio, Forum, Rankings Track cryptocurrency markets with live prices, charts, free portfolio, news and more. www.cryptocompare.com 회원가입을 해준 후, 무료 API-Key 를 받는다. 다음 사용 목적을 적은 후 앱을 만..

오늘은 코인 API 를 가져와 실시간 데이터를 가져오는 작업을 할 예정이다. 결론부터 얘기하면 Redux에 대해 더 공부할 필요성을 느꼈다. (Redux 사용하기 위한 빌드가 꽤 난해하다고 생각했기때문. 또한 docs를 봐도 잘 이해가 되지 않는다. 다만 튜토리얼을 진행하고 직접 사용해보면서 내가 느꼈던 *Props 처리하는데 너무 많은 코드들이 들어간다* 라는 점을 해결하는 툴이라는 것.. ) 그리고 이번에 사용한 것은 Redux toolkit 중에서 RTK Query 이다. 코인 데이터를 가져오기 위해 Rapid API 에서 api-key 와 url 을 제공받았다. https://rapidapi.com/Coinranking/api/coinranking1 Coinranking API Documentat..