Act99 기술블로그

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

드디어 이사를 완료했다. Nextjs 로 이사하면서 router를 설정할 필요가 없다는 장점 외에는 아직 큰 장점을 못느끼고 있다. (이제 막 시작하는 단계라 그런 것 같다.) 이사하면서 node version을 v16 으로 해서 Apollo codegen이 작동하지 않았다. 그래서 결국 수작업으로 타입들을 만들어주었다. (추후 해결할 예정) 그리고 결과물은 잘 나오는 것을 확인할 수 있다. 이젠 채팅기능을 구현할 차례이다. 코인차트 볼린저밴드를 구현한 후 바로 진행할 것이다. 채팅기능은 Apollo Client 를 이용해 작업할 예정이다. 따라서 NestJs에서 미리 백엔드 작업을 해야겠다. https://github.com/act99/stock-chat GitHub - act99/stock-chat:..

사실상 이것을 만들기 위해 여태까지 달려왔다고 해도 무방하다. 최종 목표는 실시간 데이터를 불러오고 차트를 구현시키는 것이였다. 그리고 이번에 할 것은 실시간 코인차트 만들기이다. 먼저, 내가 사용할 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 를 받는다. 다음 사용 목적을 적은 후 앱을 만..

가지고 온 코인 API는 현재 코인의 시세와 거래량, 전일 변화율 등이다. 이것을 홈 화면에 하나의 표 형태로 만들어 볼 예정이다. 먼저 React-table 모듈을 설치해주었다. `npm install react-table` `npm i @types/react-table` 다음으로 home.tsx 파일에 다음과 같은 코드를 구현했다. import React from "react"; import LoadingComponent from "../components/loader"; import { CoinTable } from "../components/table/cointable"; import { useGetCryptosQuery } from "../services/cryptoApi"; type Colum..

오늘은 코인차트를 만들기 앞서 라우터 정리와 네비게이션 바를 만드려고 한다. 먼저!! 말하자면!! 라우터와 네비게이션 바를 미리 만들어놓는 것이 좋다. 레이아웃 짜는것부터 css 와 router 설정과정까지 모든 면에서 봤을 때 페이지와 컴퍼넌트를 먼저 만드는 것보다 라우터와 네비게이션 바를 먼저 만드는게 더 효율적이라고 생각한다. (css 설정도 다시 해줘야하고 골치 아픈게 많았다.) 그럼 본론부터 들어가면, css 는 tailwind css 를 이용했다. 그리고 components 폴더에 navbar 폴더를 만들어 네비게이션 바에 필요한 모든 코드를 넣어주었다.(css까지) 네비게이션 바는 잘 건들지 않을 것 같아서 이런 선택을 했다. ******** 네비게이션 바는 docs와 기타 코드문헌들을 많이..

전 글에서 코드의 문제점들을 해결한다고 언급한 바가 있다. https://bugerstory.tistory.com/39 [React] 직접 주가 캔들 차트 만들기 - 코드정리1 (SVG 연습용), (차트라이브러리 x) 오늘은 코드정리를 할 예정이다. 지금 작성한 코드의 문제점들은 1. [object1, object2....] 배열 요소를 각각의 배열로 변화시키는게 너무 많다. // array 데이터들 분류 const stockOpen = stockArray.map((item.. bugerstory.tistory.com 결과부터 말하면 700 줄이나 되던 handmade-chart.tsx 코드는 100줄로 줄일 수 있었다. 먼저 해결한 것은 데이터 배열을 분류시키는 코드를 단축시킨 것이다. 전에 코드는 /..

오늘은 코드정리를 할 예정이다. 지금 작성한 코드의 문제점들은 1. [object1, object2....] 배열 요소를 각각의 배열로 변화시키는게 너무 많다. // array 데이터들 분류 const stockOpen = stockArray.map((item) => item.open); const openArray: number[] = []; stockOpen?.forEach((open) => openArray.push(open)); const stockClose = stockArray.map((item) => item.close); const closeArray: number[] = []; stockClose?.forEach((close) => closeArray.push(close)); const ..

저번 글에서 봤듯이 차트를 확대할 때, 과거 데이터를 가져오는 문제가 있었다. 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..