FastAPI로 업비트 차트 React로 JSON 형식 데이터 가져오기

결과화면

 

---

1. FastAPI - chart.py

from fastapi import APIRouter

import requests


router = APIRouter(
    prefix="/chart",
    tags=["chart"],
    responses={404: {"description": "Not found"}},
)


@router.get("/candle")
def get_upbit_candle():
    url = "https://api.upbit.com/v1/candles/minutes/5?market=KRW-BTC&count=5"
    headers = {"accept": "application/json"}
    response = requests.get(url, headers=headers)
    data = response.json()
    return data

FastAPI에서 router를 만들어서, /chart로 시작하는 모든 URL을 처리했다.

/chart/candle 요청이 오면 Upbit API로 요청 보내서 캔들 데이터를 가져온다. 가져온 JSON 데이터를 그대로 React에 리턴.

React → FastAPI → Upbit → FastAPI → React

 

chart.py

해당 파일에서 count만 변경해주면, 그 숫자에 맞는 캔들을 생성할 수 있다.

앞의 minutes는 현재 5분으로 되어있는데, 이것도 변경이 가능하다.

 

2. FastAPI - app.py

from fastapi.middleware.cors import CORSMiddleware
from fastapi import FastAPI
from controller.chart import router as chart_router

app = FastAPI()


app.include_router(chart_router)

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

1. FastAPI 객체를 생성했다. 

app = FastAPI( )

→ 서버 시작

 

2. chart 라우터 불러오기

app.include_router(chart_router)

→ /chart/... 경로가 작동하게 연결

 

3. CORS 허용

React에서 FastAPI로 요청하면 보안 때문에 막힌다.

그래서 React(3000) → API(8000) 요청 허용

allow_origins=["*"]

→ 아무나 접근할 수 있게 허용

 

3. React - CandleChart.js

import React, { useState, useEffect } from "react";
import axios from "axios";


function CandleChart() {
    const [candle, setCandle] = useState([]);

    useEffect(() => {
        axios
            .get("http://localhost:8000/chart/candle")   // ← 직접 호출
            .then(res => setCandle(res.data))
            .catch(err => console.log(err));
    }, []);

    return (
        <div>
            <h1>차트</h1>
            <pre>{JSON.stringify(candle, null, 2)}</pre>
        </div>
    );
}

export default CandleChart;

React 화면이 처음 로드되면 useEffect 실행.

axios로 FastAPI 주소에 요청

FastAPI가 Upbit 데이터를 가져와서 반환

candle 상태에 그 JSON을 저장

 

4. React - App.js

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import CandleChart from "./component/CandleChart";

function App() {

  return (
    <Router>
      <div style={{ padding: "3rem" }}>
        <Routes>
          <Route path="/" element={<div><CandleChart /></div>} />
        </Routes>
      </div>
    </Router>

  );
}

export default App;

이렇게 까지 하고, 서버를 실행 시키게 되면

 

이렇게 실시간 비트코인 가격이 나타나는 것을 확인 할 수 있다. 이제 이 데이터들을 잘 꾸며보자.

 

< 다음 글 >

https://bright-landscape.tistory.com/460

JSON데이터를 ApexCharts로 데이터 변환하여 캔들 형식 만들기

 

이제 해당 데이터들을 React에서 잘 그려보자.