Act99 기술블로그

이 글은 회고록입니다. 항해99 3주차 주특기 기본주차의 2일차가 되었다. Redux 상태관리와 DB 연결 , useEffect를 통한 렌더링을 완료시킨 상황이다. 오늘의 결과물을 대략 이렇다. 현재 상태관리하는 것은 날짜 데이터, 다이어리 데이터, 기분을 나타내는 하트 데이터 총 3가지이다. DB 역시 이 데이터로만 구성되어있다. 캘린더 클릭 시 날짜의 State가 RootState 에 저장되며, 다른 날짜를 클릭 시 데이터가 dispatch된다. 글쓰기 컴퍼넌트는 모달을 이용했다. 하트를 클릭하거나 일기를 작성할 때 역시 State 가 RootState에 저장되며, State는 event의 value가 변화될 때마다 변한다. 그리고 저장버튼을 클릭 시 홈 화면으로 넘어가고, 해당 데이터가 보인다. 하..

이 글은 회고록입니다. 항해99 3주차가 시작되었다. 다시 팀이 바뀌었으며, 새로운 마음으로 주특기를 배우는 주이다. 이번주 과제는 이렇다. - 한 주의 기분 상태가 어떤지 별점으로 나타내는 페이지 만들기 나는 더 나아가 캘린더를 누를 시 누른 날짜의 일기와 기분을 나타내고 한 주의 일기를 요약한 데이터를 Accordion 형식으로 나타내는 캘린더 사이트를 만들 예정이다. 현재까지 구현한 것은 이렇다. 캘린더를 클릭 시 => Redux 상태관리를 통해 클릭한 날짜 State를 관리한다. 이유는 부모 Props를 자식 컴퍼넌트에게 전달하는 방식은 과거 너무 많이 사용했으며, Redux 사용 방식에 더 친숙해지기 위해서도 있으며, 한 페이지에 컨테이너와 컴퍼넌트들로 구성할 예정인데, 컨테이너 Prop을 자식..

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

이번에는 코인 차트를 만들 차례이다. 먼저 해야할 일은 RTK Query 를 이용해 api 데이터를 가져오는 일이다. - services/cryptoApi.ts import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; const cryptoApiHeaders = { "x-rapidapi-host": "coinranking1.p.rapidapi.com", "x-rapidapi-key": process.env.REACT_APP_CRYPTO_API_KEY, }; const baseUrl = "https://coinranking1.p.rapidapi.com"; const createRequest = (url: string) => ({ u..

가지고 온 코인 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..

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

오늘은 코인차트를 만들기 앞서 라우터 정리와 네비게이션 바를 만드려고 한다. 먼저!! 말하자면!! 라우터와 네비게이션 바를 미리 만들어놓는 것이 좋다. 레이아웃 짜는것부터 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줄로 줄일 수 있었다. 먼저 해결한 것은 데이터 배열을 분류시키는 코드를 단축시킨 것이다. 전에 코드는 /..