- Today
- Total
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 코인차트
- 3주차
- 차트구현
- nextjs
- 주식차트
- rtk
- 주식
- react
- 차트만들기
- 에러
- websocket
- 비전공자
- API
- graphql
- Redux
- Coin
- 채팅
- 차트
- Firebase
- nestjs
- 코인
- typeorm
- 항해99
- typescript
- Flutter
- chart
- javascript
- apollo
- error
- 리액트
Archives
Act99 기술블로그
[React] 직접 주가 캔들 차트 만들기 - 코드정리1 (SVG 연습용), (차트라이브러리 x) 본문
오늘은 코드정리를 할 예정이다.
지금 작성한 코드의 문제점들은
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 stockVolume = stockArray.map((item) => item.volume);
const volumeArray: number[] = [];
stockVolume?.forEach((volume) => volumeArray.push(volume));
const stockDate = stockArray.map((item) => item.date);
const dateArray: string[] = [];
stockDate?.forEach((date) => dateArray.push(date.toString()));
const stockHigh = stockArray.map((item) => item.high);
const highArray: number[] = [];
stockHigh?.forEach((high) => highArray.push(high));
const stockLow = stockArray.map((item) => item.low);
const lowArray: number[] = [];
stockLow?.forEach((low) => lowArray.push(low));
const stockName = stockArray.map((item) => item.code_name);
const nameArray: string[] = [];
stockName?.forEach((name) => nameArray.push(name));
const stockClo5 = stockArray.map((item) => item.clo5);
const clo5Array: number[] = [];
stockClo5?.forEach((clo5) => clo5Array.push(clo5));
const stockClo20 = stockArray.map((item) => item.clo20);
const clo20Array: number[] = [];
stockClo20?.forEach((clo20) => clo20Array.push(clo20));
const stockClo60 = stockArray.map((item) => item.clo60);
const clo60Array: number[] = [];
stockClo60?.forEach((clo60) => clo60Array.push(clo60));
이것만 40줄이 넘어간다..
목표는 10줄이내로 끊는 것이다.
Object.entites() 를 이용해 최소화 시킬 예정이다.
2. 변수와 props 들이 너무 많다.
Flutter 로 앱을 개발했을 때에도 props 들이 너무 많아서 복잡해보였다.
이를 해결하기 위해 props들을 Array 형태로 묶어서 최소화시켰는데,
React 커뮤니티를 보니 Redux를 이용하면 용이하다고 한다.
Redux 사이트 docs 를 보면서 이용할 예정이다.
3. 코드가 1개의 tsx 파일에 작성되어있다.
components 들은 components 폴더에, container 들은 containers 폴더에 분류시킬 예정이다.
4. function 함수들이 길어서 container 또는 page 코드들의 가독성이 떨어진다.
이 역시 ts 파일에 한데로 묶어서 export 할 예정이다.
일단 redux 를 실제로 사용해보면서 적용해야겠다.
yarn add redux react-redux @types/react-redux
또는 npm
'개발팁저장소 > react' 카테고리의 다른 글
[React] 직접 주가 캔들 차트 만들기 - 네비게이션 바 만들기 navbar & tabbar (0) | 2021.12.03 |
---|---|
[React] 직접 주가 캔들 차트 만들기 - 코드정리2 (0) | 2021.12.02 |
[React] 직접 주가 캔들 차트 만들기6 - 볼린저 밴드 만들기 (SVG 연습용), (차트라이브러리 x) (0) | 2021.12.01 |
[React] 직접 주가 캔들 차트 만들기5 (이동평균선 추가) (SVG 연습용) (0) | 2021.12.01 |
[React] 직접 주가 캔들 차트 & 거래량 바 차트 만들기4 - onWheel 을 통해 데이터값을 추가시키거나 감소시키기 (라이브러리 x) (SVG 연습용) (0) | 2021.12.01 |