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

이번에는 코인 정보 슬라이드를 만들어주었다. 시간초의 경우 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..

이번의 결과물은 이렇다. 이번에는 코인 거래량 대비 최고, 최저 / 전일대비 최고 상승, 하락률 정보 카드를 만들 것이다. 먼저, 거래량 데이터는 적게는 수백만 많게는 수십억 단위이기 때문에 단위 변경이 필요하다. ES2020 부터는 number 값을 원하는대로 변경시켜주는 (가령, 거리단위, 화폐단위 등등 나라별도 가능) 기능이 생겼다. 바로 Intl.NumberFormat 이다. 사용법은 단순하다. const MilBilCal = (value: number) => { let formatter = Intl.NumberFormat("en", { notation: "compact" }); return formatter.format(value); }; export default MilBilCal; "en" ..

전송되는 데이터를 정제하지 않고 바로 분류하거나 사용하면 이런 에러가 발생한다. - 예시 정제할 데이터 data => change 내림차순으로 정제 type CoinHotProps = { data: any; }; const CoinHot: React.FC = ({ data }) => { console.log( data.sort( (a: any, b: any) => parseFloat(a.change) - parseFloat(b.change) ) ); Unhandled Runtime Error TypeError: Cannot assign to read only property '0' of object '[object Array]' 해결방법은 데이터를 정제해주어야한다. (for&push or map&push..

이번에는 주식사이트의 홈 화면을 구현하려고 한다. 대부분 코인거래소 홈 화면은 코인들의 표가 나타난다. (현재가, 상승 하락률 저가, 고가 등등) 이번에 데이터를 가져올 사이트는 코인랭킹 이라는 사이트이며, 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..

반응형 웹사이트 구현을 위해 useWindowSize라는 hooks를 만들어 구현했지만, 콘솔창에 이런 에러가 발생했다. 그래서 디테일하게 찾아보니 분석을 해보니 width 와 height params 문제이며, useWindowSize 를 이용했을 때 너비와 높이의 initialValue가 NaN으로 잡혔다가 refresh가 되면서 value가 생성된다. 하지만 차트를 구성하는 svg 는 width, height에 반응하기 때문에 변경하기 어렵다. 따라 이 한줄로 일단 에러를 멈출 순 있었다. let SVG_CHART_WIDTH = typeof width === "number" ? (width > 768 ? 768 : width * 1) : 0; 에러는 멈췄지만 refresh를 계속하면 콘솔에 에러가 ..

실시간 채팅구현을 Apollo client useQuery 를 이용해 만들 방법을 생각하다가 apollo client docs 에서 polling 과 refetch 개념을 찾았다. https://www.apollographql.com/docs/react/data/queries/ Queries Fetch data with the useQuery hook www.apollographql.com polling의 경우 타이머 설정 후 타이머 설정 시간마다 실시간으로 refetch를 해주는 기능으로, 쉽게 말해 settimeout 같은 느낌으로 데이터 refetch를 시켜준다. 코드는 다음과 같다. const { data } = useQuery(GET_CHAT, { variables: {}, pollInterva..

저번주 토요일? 부터 지금까지 아폴로 클라이언트 웹 소켓(using GraphQL) 문제가 풀리지 않고 있다. github 커뮤니티나 stackoverflow 에서는 Nextjs SSR 과정에서 발생하는 문제라고 하는 등 다양한 의견이 나오고 있는데, 무슨 짓을 해도 문제가 풀리지 않고 있다. 일단 다음단계로 넘어가고 차근차근 문제를 알아봐야겠다. Error: Unable to find native implementation, or alternative implementation for WebSocket! 문제