[React] 주식사이트 만들기 / React Google Chart 사용

저번에 Nestjs 와 postgresql 을 이용해 주식데이터를 localhost:4000 에 띄워놨다.

 

https://bugerstory.tistory.com/28

[Nestjs] CSV 파일을 postgresql 테이블로 옮기고 localhost 에 띄우기

 

React 를 이용해 브라우저상에 차트를 띄울 예정이며, 먼저 apollo와 apollo-toolings 를 설치했다.

https://github.com/apollographql/apollo-tooling

apollo:codegen 을 이용하려면 node 버전은 v14.18.1 이여야 하며, apollo 버전은 v2.33.9 여야한다.

(계속 오류가 나서 메뉴얼을 확인해보니 Usage 쪽에 떡하니 적혀있었다...)

 

아폴로 매뉴얼대로 apollo.config.js 파일을 만든 후, gql 태그로 쿼리문을 작성했다.

 

const STOCK_QUERY = gql`
  query frontStockQuery {
    gsStock {
      index
      date
      check_item
      code
      code_name
      d1_diff_rate
      close
      open
      high
      low
      volume
      clo5
      clo10
      clo20
      clo40
      clo60
      clo80
      clo100
      clo120
      clo5_diff_rate
      clo10_diff_rate
      clo20_diff_rate
      clo40_diff_rate
      clo60_diff_rate
      clo80_diff_rate
      clo100_diff_rate
      clo120_diff_rate
      yes_clo5
      yes_clo10
      yes_clo20
      yes_clo40
      yes_clo60
      yes_clo80
      yes_clo100
      yes_clo120
      vol5
      vol10
      vol20
      vol40
      vol60
      vol80
      vol100
      vol120
    }
  }
`;

 

위에 내용들은 내가 가져올 데이터의 컬럼명들이다.

 

그 다음 apollo:codegen 을 이용하면 type 들이 다 적혀있는 깔끔한 인터페이스 코드가 나온다.

(원래 Props로 사용할 데이터를 일일히 type 형태로 만들었는데 굳이 사용할 필요가 없었다...)

 

먼저 만들어 볼 차트는 캔들차트이며, 여기서 필요한 데이터는 주식데이터 중 날짜, 시가, 종가, 고가, 저가 데이터였다.

useQuery 를 이용해 데이터값을 가져오고, 가져온 데이터 값들을 array 형태로 변경시켜주었다.

그 코드는 다음과 같다.

 

export const Stock = () => {
  const { data, loading } = useQuery<frontStockQuery>(STOCK_QUERY, {
    variables: {},
  });

  const stockOpen = data?.gsStock.map((item) => item.open);
  const openArray: number[] = [];
  stockOpen?.forEach((open) => openArray.push(open));

  const stockClose = data?.gsStock.map((item) => item.open);
  const closeArray: number[] = [];
  stockClose?.forEach((close) => closeArray.push(close));

  const stockVolume = data?.gsStock.map((item) => item.volume);
  const volumeArray: number[] = [];
  stockVolume?.forEach((volume) => volumeArray.push(volume));

  const stockDate = data?.gsStock.map((item) => item.date);
  const dateArray: string[] = [];
  stockDate?.forEach((date) => dateArray.push(date.toString()));

  const stockHigh = data?.gsStock.map((item) => item.high);
  const highArray: number[] = [];
  stockHigh?.forEach((high) => highArray.push(high));

  const stockLow = data?.gsStock.map((item) => item.low);
  const LowArray: number[] = [];
  stockLow?.forEach((low) => LowArray.push(low));
  
  return;
  }

**** frontStockQuery 는 codegen을 사용한 결과물이다. 앞서 작성한 gql 태그 쿼리문이 아니다!!!

 

다음, 주식차트가 나올 컴퍼넌트를 작성해주었다.

내용은 다음과 같다.

 

import React from "react";

import { Chart } from "react-google-charts";

type Props = {
  openArray: number[];
  closeArray: number[];
  highArray: number[];
  lowArray: number[];
  dateArray: string[];
};

export const ChartPage: React.FC<Props> = ({
  dateArray,
  openArray,
  highArray,
  lowArray,
  closeArray,
}) => {
  const totalArray: any[] = [["day", "a", "b", "c", "d"]];
  console.log(lowArray);

  for (let i = 0; i < dateArray.length; i++) {
    totalArray.push([
      dateArray[i],
      highArray[i],
      openArray[i],
      closeArray[i],
      lowArray[i],
    ]);
  }
  console.log(totalArray);
  return (
    <>
      <div>
        <Chart
          width={"100%"}
          height={800}
          chartType="CandlestickChart"
          loader={<div>Loading Chart</div>}
          data={totalArray}
          options={{
            legend: "none",
          }}
          rootProps={{ "data-testid": "1" }}
        />
      </div>
    </>
  );
};

 

다음 다시 페이지로 돌아와 차트 코드를 불러주었다.

 

  return (
    <div>
      {!loading ? (
        <ChartPage
          openArray={openArray}
          closeArray={closeArray}
          highArray={highArray}
          lowArray={LowArray}
          dateArray={dateArray}
        />
      ) : (
        <h3>Loading...</h3>
      )}
)

 

그 결과

 

 

 

캔들차트가 완성되었다.

아무래도 데이터 배열이 잘못되어

(시가를 먼저 적어야하거나, 고가를 먼저 적으면 될 듯 하다.) 정확한 캔들차트는 안나왔다.

 

하지만 데이터를 불러와 차트만들기까지 작업했으니 주말에 수정하고 캔들차트 색상도 이쁘게 만들면 정상적인 차트가 완성될 듯 하다.