Act99 기술블로그

이번에 할 것은 Redux & RTK 를 이용해 유저가 선택한 코인의 상태를 관리하는 Select Box를 만들 예정이다. 먼저 상태관리를 위해 Redux Toolkit 을 이용해 state 와 reducer를 만들어주었다. import { createSlice, PayloadAction } from "@reduxjs/toolkit"; export interface CoinState { value: string; } const initialState: CoinState = { value: "BTC", }; export const selectedCoinSlice = createSlice({ name: "selectedCoin", initialState, reducers: { selectedCoin: (st..

이번에는 코인 차트를 만들 차례이다. 먼저 해야할 일은 RTK Query 를 이용해 api 데이터를 가져오는 일이다. - services/cryptoApi.ts import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; const cryptoApiHeaders = { "x-rapidapi-host": "coinranking1.p.rapidapi.com", "x-rapidapi-key": process.env.REACT_APP_CRYPTO_API_KEY, }; const baseUrl = "https://coinranking1.p.rapidapi.com"; const createRequest = (url: string) => ({ u..

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