Act99 기술블로그

오늘은 코인차트를 만들기 앞서 라우터 정리와 네비게이션 바를 만드려고 한다. 먼저!! 말하자면!! 라우터와 네비게이션 바를 미리 만들어놓는 것이 좋다. 레이아웃 짜는것부터 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 ..

다음은 볼린저 밴드를 만들 차례이다. 볼린저 밴드란 존 볼린저의 주가 기술적 분석 도구이며, 이동평균선을 추세중심선으로 사용하고, 상하한 변동폭은 추세중심선의 표준편차로 계산한 밴드이다. 볼린저 밴드의 상한선: 20일 이평선 값 + ( 20일 동안의 주가 표준편차 값 ) * 2 볼린저 밴드의 하한선: 20일 이평선 값 - ( 20일 동안의 주가 표준편차 값 ) * 2 볼린저 밴드 구름대 형성 -> 상한선과 하한선 갭 => (상한선 – 하한선) / 중심선 이다. 이를 이용해 볼린저 밴드를 만들 것이다. 먼저 20일간의 주가 표준편차 값을 구해야 한다. ** 밑그림** 평균값 clo20ArrayBol = clo20Array.slice(index, (index+20)) -> 20개씩 추출 clo20ArrayB..

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

오늘은 onWheel 을 통해 데이터 값을 추가 또는 감소시키는 작업을 했다. 그 전에 만들었던 코드를 일단 정리했다. stock.tsx 파일에서 불러오는 데이터를 handmade-chart.tsx 로 옮겼으며, 안쓰는 코드들을 다 삭제시켰다. 중복 코드 정리와 코드축소화 작업, 컴포넌트 별 분류 작업은 오늘 할 작업을 마친 후 작업할 예정이다. 먼저, onWheel 로 불러올 데이터 량을 핸들링 할 필요가 있었다. const stockData = data?.gsStock.map((item) => item); const stockArray: any[] = []; stockData?.forEach((item) => stockArray.push(item)); console.log(stockArray); co..

먼저 오늘 한 결과물은 이렇다. 저번 시간에는 차트구현까지는 했으나, 데이터 값 대비 차트 구현이 정확하지 않았으며, 화면 리사이즈를 할 때 오류가 생겼다. (몇개의 데이터만 변화) 따라서 유지보수에도 편하고, 화면 리사이즈 시 자연스럽게 변하며, 차트를 좀 더 정밀하게 구현할 필요가 있었다. 먼저, 화면 리사이즈부터 다루었다. ReactHook 을 이용해 사이즈 변화상태마다 width, height 값을 구할 예정이다. (tailwindCSS 를 사용하면 편하지만, 정확한 width 값과 height 값이 필요했으며, Hook 연습도 필요했기 때문에 직접 구현했다.) Hook Docs를 보면 useWindowSize 를 이용하는 코드가 나와있다. (공부를 목적으로 하면 직접 타이핑하면서 작성할 것을 추..

이번에는 캔들 차트를 만들 차례이다. 기본틀은 거래량 차트 만들기와 같으며, 캔들차트 구현이라는 점에서 다르다. https://bugerstory.tistory.com/32 [React] 직접 주가 캔들 차트 & 거래량 바 차트 만들기 (라이브러리 x) (SVG 연습용) React-Google-Chart 를 사용하던 중, 직접 차트를 만들고 싶은 충동이 생겼다. 먼저 handmade-chart.tsx 를 만들어주고 svg 를 이용해 차트 틀부터 만들어 주었다. (CSS 경우 tailwind를 사용하였다.) - handmade-.. bugerstory.tistory.com 해야 할 일 1. 데이터 불러오기 2. 금액 최소값과 최대값을 구한 후, 7개의 구분선으로 나누기. 3. 시가와 종가 데이터로 바 차트..