[NextJs & Flask] 코인사이트 만들기 1 (Crawling & Save data with MongoDB)

이번에 할 것은 Python Requests를 이용해 코인 데이터를 Crawling한 후 MongoDB에 저장시키고

NextJS Project로 데이터를 보내는 작업을 할 것이다.

 

먼저, Server 폴더와 Client 폴더를 만들어주었다.

다음 Server 폴더에 가상환경 (venv) 설정을 해주었다.

다음 pip3 를 이용해

Flask, Requests, Flask_cors(CORS 문제 해결을 위해), pymongo 를 설치해주었다.

 

먼저한 일은 코인 데이터를 수집하는 일이였다.

테스트용으로 비트코인 데이터를 수집한 후, mongoDB에 넣어주었다.

 

- init_db.py

import requests

from pymongo import MongoClient

client = MongoClient('localhost', 27017)
db = client.dbcoin

def get_url():
    url = 'https://min-api.cryptocompare.com/data/v2/histoday?fsym=BTC&tsym=USD&limit=1000'
    response = requests.get(url)
    jsonData = response.json()
    data = jsonData["Data"]["Data"]
    index = 0
    for item in data:
        time = item["time"]
        open = item["open"]
        close = item["close"]
        high = item["high"]
        low = item["low"]
        index = index + 1
        doc = {
            'time': time,
            'open': open,
            'close': close,
            'high': high,
            'low': low
        }
        db.btcdb.insert_one(doc)
        print(str(index) + "번째 데이터 수집 완료")

db.btcdb.drop()
get_url()

 

결과는

 

 

데이터가 잘 수집되었다.

 

다음 해준 일은 db를 json 형태로 변환해 api에 쏴주는 작업이다.

 

-app.py

from flask import Flask, render_template, jsonify, request
from flask_cors import CORS, cross_origin
from pymongo import MongoClient

app = Flask(__name__)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

client = MongoClient('localhost', 27017)
db = client.dbcoin

@app.route('/api/btc')
@cross_origin()
def btc():
    btc_state = list(db.btcdb.find({}, {'_id': False}))
    return jsonify({'btc_state': btc_state})


if __name__ == '__main__':
    app.run(port=5000, debug=True)

 

결과물

 

 

여기서 가장 중요한 작업은 cors 문제를 해결한 것이다.

cors 문제를 백엔드에서 작업하지 않으면 프론트쪽에서 아주.. 곤란해진다.

(next.config.js의 rewrite를 이용해 CORS문제를 해결하려 했지만 제대로 작동하지 않는다.)

 

다음 프론트 쪽에서 data를 fetch 하고 콘솔로 찍어보았다.

 

-index.tsx

 

import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import { useEffect, useState } from "react";
import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  const [data, setData] = useState([{}]);

  useEffect(() => {
    fetch("http://localhost:5000/api/btc")
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        console.log(data);
      });
  }, []);

  return <div></div>;
};

export default Home;

 

결과물

 

 

정상적으로 작동되었다.

 

이젠 먼저 프론트작업을 할 예정이다.