Act99 기술블로그

이번에는 주식사이트의 홈 화면을 구현하려고 한다. 대부분 코인거래소 홈 화면은 코인들의 표가 나타난다. (현재가, 상승 하락률 저가, 고가 등등) 이번에 데이터를 가져올 사이트는 코인랭킹 이라는 사이트이며, RTK(Redux toolkit) 을 이용해 가져올 것이다. 먼저 결과물부터 게시하면, 이런식으로 구현을 했다. 구현을 위한 코드는 아래와 같다. RTK Service 코드는 다음과 같이 구성했다. const cryptoApiHeaders = { "x-rapidapi-host": "coinranking1.p.rapidapi.com", "x-rapidapi-key": process.env.NEXT_PUBLIC_CRYPTO_API_KEY, }; const baseUrl = "https://coinrank..

가지고 온 코인 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..