TypeScript 3

[React, TypeScript] 실시간 시세표 일정 시간만 border 노출하기

문제 기존에 만들었던 시세표 내 border 노출은 1개 값 기준으로 되어 있었기 때문에, rabbitMq를 통해 갑자기 여러건의 시세 변경 건이 들어온다면 바뀐 시세의 border가 잠깐 보이고 빛보다 빠르게 사라지는 문제 즉, 현재 시세가 바뀌는 종목이 표시는 되나, 다른 종목에서 시세가 바뀌면 표시칸이 바로 바뀜 현재 시세칸의 border가 바로 바뀌는게 아니라 일정 시간을 두고 차례대로 없어져야함 해결방법 1. 들어온 데이터들의 종목코드를 array에 담았다가, setTimeOut으로 일정 시간 뒤에 삭제하는 방식(push & shift) const [queue, setQueue] = React.useState([]); React.useEffect( () => { // 전달 받은 시세 데이터의 종..

React 2023.09.08

[React, TypeScript] Object is possibly 'null'

문제 const candleSeriesApiRef = React.useRef(null); ... ... ... candleSeriesApiRef.current.update(currentBar); //'candleSeriesApiRef.current' is possibly 'null'. 해결방법 if문 if(candleSeriesApiRef.current){ candleSeriesApiRef.current.update(currentBar); } if문으로 null을 걸러냄 ! 사용(non-null assertion operator) candleSeriesApiRef.current!.update(currentBar); typescript 내에서 ! 사용은 해당 value가 null 이나 undefined이 ..

React 2023.09.07

[React, TypeScript] TradingView lightweight-charts 사용

사용 목적 매매 페이지를 만들고 나서 실시간 캔들 차트를 구현해보고자 사용 설계 순서 1. 화면 첫 진입시 차트의 초기 데이터를 생성 해준다(redis or DB) 2. 실시간 차트는 기존 매매 페이지처럼 rabbitMq의 queue를 통해 받는다 코드 작성(샘플용) 큐 연결 관련해서는 자세한 코드는 생략하고 subscribe 부분만 기재 import { createChart, IChartApi, ISeriesApi, LineData, CrosshairMode, ColorType } from 'lightweight-charts'; const marketRefSubscriptionRef = React.useRef(null) const [marketQueData, setMarketQueData] = Reac..

React 2023.09.07