Act99 기술블로그

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

사실상 이것을 만들기 위해 여태까지 달려왔다고 해도 무방하다. 최종 목표는 실시간 데이터를 불러오고 차트를 구현시키는 것이였다. 그리고 이번에 할 것은 실시간 코인차트 만들기이다. 먼저, 내가 사용할 CryptoAPI (코인 시세 API) 사이트는 CryptoCompare 사이트이다. https://www.cryptocompare.com/ Cryptocurrency Prices, Portfolio, Forum, Rankings Track cryptocurrency markets with live prices, charts, free portfolio, news and more. www.cryptocompare.com 회원가입을 해준 후, 무료 API-Key 를 받는다. 다음 사용 목적을 적은 후 앱을 만..

저번 글에서 봤듯이 차트를 확대할 때, 과거 데이터를 가져오는 문제가 있었다. https://bugerstory.tistory.com/35 [React] 직접 주가 캔들 차트 & 거래량 바 차트 만들기4 - onWheel 을 통해 데이터값을 추가시키거나 오늘은 onWheel 을 통해 데이터 값을 추가 또는 감소시키는 작업을 했다. 그 전에 만들었던 코드를 일단 정리했다. stock.tsx 파일에서 불러오는 데이터를 handmade-chart.tsx 로 옮겼으며, 안쓰는 코드들 bugerstory.tistory.com 이 문제를 수정하기 위해 slice를 사용했다. const [dataLength, setDataLength] = useState(24); const stockData = data?.gsSto..