Act99 기술블로그

이번에는 Redux를 이용해 유저가 선택한 코인의 상태를 관리하고, 동시에 유저가 코인 리스트를 클릭했는지, 안했는지에 대한 상태관리도 Redux로 할 예정이다. 결과물은 다음과 같다. 유저가 원하는 코인을 선택할 때, 차트와 코인 세부사항이 전부 변하게 만들었다. state 관리를 redux를 이용해 사용한 이유는 다음과 같다. 1. Page, Container, Components의 모든 요소들이 같은 state를 공유하고 있기 때문에 props 늪에 빠질 수 밖에 없다. 2. Container에서도, Components에서도 state 값을 변경시켜주어야 한다. 하지만 SetState를 props로 넘겨주기엔 코드가 복잡해지고 에러가 날 시 어디서 에러가 생겼는지 찾기 어렵다. 따라서 Redux 와..

Next Js에서 Image 클릭 시 원하는 페이지로 Link 하려는 코드를 만들 때, 이러한 오류가 발생한다. 해결방법은 간단하다. 를 감싸주면 된다. (html 렌더링 시 문제라고 한다.)

이번에 할 것은 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" ..

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

실시간 db 구축 및 연동을 위해선 websocket이 무조건적으로 필요하게 되었다. 여기서 나는 다시 한번 느낀 바가 있다. 바로 RTFM(Read the fuxx'in Manual) 바로 RTFM 을 해야한다는 것... 메뉴얼과 Docs만 잘 읽어도 어느정도 문제를 풀 수 있음에도 항상 스쳐 지나가듯이 읽는 내 자신을 반성했다. 하지만 아직 해결된 것이 아니다. NextJs Websocket 설정상에서 오류가 발생한다. (docs 그대로 설정해도 오류가 생기고, stackoverflow에서도 같은 문제가 발생한다고 한다. React와 달리 NextJs 에서는 Websocket 문제가 자주 발생한다고 하는데 아직 원인은 모르겠다. 따라서 백엔드 구성만 여기에 적어놓을 것이다.) 그럼 왜 백엔드 쪽에서 ..