Act99 기술블로그

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

내가 가지고 오는 코인API 데이터에는 이평선에 대한 정보가 없다. 따라서 이평선을 구현하는 함수가 필요하다. Functions 폴더에 ave-cal.ts 파일을 만들어준다. (평균을 구하는 함수) 그리고 다음처럼 구현했다. const aveCal = (close: number[], length: number) => { const cloXArray: [number, number][] = []; const calClo20: number[] = []; for (let i = 0; i a + b) / length ); } for (let..

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

오늘은 코인 API 를 가져와 실시간 데이터를 가져오는 작업을 할 예정이다. 결론부터 얘기하면 Redux에 대해 더 공부할 필요성을 느꼈다. (Redux 사용하기 위한 빌드가 꽤 난해하다고 생각했기때문. 또한 docs를 봐도 잘 이해가 되지 않는다. 다만 튜토리얼을 진행하고 직접 사용해보면서 내가 느꼈던 *Props 처리하는데 너무 많은 코드들이 들어간다* 라는 점을 해결하는 툴이라는 것.. ) 그리고 이번에 사용한 것은 Redux toolkit 중에서 RTK Query 이다. 코인 데이터를 가져오기 위해 Rapid API 에서 api-key 와 url 을 제공받았다. https://rapidapi.com/Coinranking/api/coinranking1 Coinranking API Documentat..