React - Flask - Mysql 연동

1.  프로젝트 생성

react 

C:\react>npx create-react-app data-app
C:\react>npm start

Flask 

C:\react>mkdir server

C:\react>pip install Flask

DB

 workbench 사용하여 database를 만든 후

table을 생성했습니다.

create database testConnection;
use testConnection;
CREATE TABLE `testTable` (
    `id` int unsigned AUTO_INCREMENT NOT NULL ,
    `name` int unsigned  NOT NULL ,
    `age` varchar(30)  NOT NULL ,
     PRIMARY KEY (
        `id`
    )
);


데이터 삽입
INSERT INTO testTable(id,name,age) values(2,'233',26);
INSERT INTO testTable(id,name,age) values(1,'121',26);

---

App.js

import './App.css';
import { useEffect, useState } from 'react';
import axios from 'axios';

function App() {

  const [data, setData] = useState([])

  useEffect(() => {
    axios.get('/data')
    .then(res => {
        setData(res.data)
        console.log(res.data)
    }).catch(error => console.log(error));
  }, []);

  return (
    <>
      <h1> testTable data 가져오기 </h1>
    </>
  );
}

export default App;

사용하는모듈 설치

npm install axios 

 

package.json 

"proxy": "http://localhost:5000", 추가

 

server.py

from flask import Flask, jsonify, request
import pymysql
import json, datetime

app = Flask(__name__)

# 데이터 베이스 연결
def getCon():
  return pymysql.connect(host="localhost", 
                     user="root", password="1234", 
                     db="testConnection",
                     charset="utf8",
                     cursorclass=pymysql.cursors.DictCursor)

def json_default(value):
  if isinstance(value, datetime.date):
    return value.strftime('%Y-%m-%d')
  raise TypeError('not JSON serializable') 

# testConnection DB / testTable Table 가져오기
@app.route('/data', methods=['GET'])
def getData():
    print("1111111111111111")
    con = getCon()
    cursor = con.cursor()
    sql = 'SELECT * FROM testTable'
    cursor.execute(sql)
    
    data = cursor.fetchall()
    print(data)
    cursor.close()
    
    # 반환할 때 json형식으로 반환
    return json.dumps(data, default=json_default)

if __name__ == "__main__" :
    app.run(debug=True)

**

import json 

: python이 기본적으로 지원하는 데이터 타입인 list와 dictionary 구조를 유지한 채 json 형식으로 바꿔주고, json문자열을 해독해서 python 데이터타입으로 바꿔주는 모듈

** 

def json_default(value)

: json.dumps 에 데이터를 넣는 경우 json 이 알지못하는 타입이 포함되어있을때 json string으로 변환해주는 함수를 선언

 대표적인 예로는 날짜/시간 형태의 데이터로 인해

TypeError: Object of type date is not JSON serializable 에러가 발생할수 있다.