React하면 아시다시피 frontend 라이브러리라고 하는데요.. React에서 Database의 내용을 가져오려면 어떻게 해야할까요? 오늘 실습은 이 질문에서 시작했습니다. PHP, JSP, Django 등 여러가지 backend 를 이용하여 Database를 접속할 수 있을텐데요. 저는 가장 간단할 것으로 예상되는 apache, php, mysql의 조합을 이용하여 php API를 구성하는 방법으로 구성해볼까 합니다.
그래서 필요한 것은 간단한 php API. 아래 코드를 test.php라는 파일로 작성하여 아파치 루트 다큐먼트 경로(예: C:\xampp\htdocs)에 저장합니다. (Database는 사전에 적당한 값으로 구성하셔야합니다.)
이 파일은 localhost의 TestDB에 접속하여 members테이블의 모든 row를 추출해냅니다. 그리고
결과를 $row에 저장하고, 이를 다시
배열형태로 $list_array에 할당합니다.
다시한번 json형태로 인코딩하여 $result_array에 할당합니다.
echo 함수는 이 파일의 결과값으로 $result_array를 출력하게 합니다.
Backend에서의 동작은 구현했습니다. 80번 포트에서요. 이번에는 개발환경인 3000 포트에서 구동하는 React App을 구성할 차례인데요, 포트가 달라지면 쿠키라던지 데이터 전달에 제한을 받게되어 원래대로라면 여러가지 다른 방법을 시도해야 한다고 합니다. 그래서 proxy라는 걸 이용하는데요. package.json파일에 아래 한줄만 추가해주면 됩니다.
"proxy": "http://127.0.0.1:80",
위 코드를 package.json 내부 적당한 위치에 아래와 같이 넣어줍니다. 그러면 localhost의 접근 시도에 대해 proxy 주소로 자동으로 넘겨주고, 추후 구성할 React 앱에서도 라우팅 부분을 간소화할 수 있습니다.
App.js
아래와 같이 Hello라는 텍스트와 클릭 가능한 단순 버튼을 추가하겠습니다. 버튼은 클릭시 test.php를 실행하여 DB정보를 json형태로 가져오게 합니다. 보시는 바와 같이 원래대로라면 fetch('http://127.0.0.1:80/test.php')와 같이 작성해야하나 훨씬 간소하게 구성된 것을 볼 수 있습니다.
이전 포스팅에서 설치한 XAMPP를 이용하여 MySQL을 실행하고 진행하겠습니다. XAMPP에서 Apache와 MySQL을 Start 해 줍니다. (Apache를 실행해야 MySQL 서버가 실행됩니다.)
다음으로 커맨드 창을 열고 비밀번호를 설정해 줍니다.
그리고서 XAMPP 컨트롤 창의 MySQL의 Admin 버튼을 누르거나 직접 URL을 입력하여 phpmyadmin사이트로 이동합니다. (로그인이 안될 수 있습니다. 이때는 설정파일(config.inc.php)을 열어 password 부분을 1234로 바꿔줍니다. 아래 수정할 파일 경로와 수정 부분 참조하세요)
이제 DB를 생성하겠습니다. '새로운'을 클릭하여 DB를 생성창을 열고, testDB라고 DB 이름을 부여한 후, 인코딩 방식을 아래와 같이 설정해주고(default), 만들기를 클릭해줍니다.
삽입 창에서 적당히 데이터를 입력해 줍니다.
이렇게 기본적인 테스트 테이블 및 데이터를 생성하였습니다.
2. Flask APP 구성
Flask App의 구성은이렇게 생겼습니다. 아래의 구성에 따라 파일들을 생성해 줍니다. 폴더구조 내부의 파일들은 차근차근 생성해 갈 예정이므로 폴더 트리를 먼저 구성해 줍시다.
다음으로는 Flask 와 MySQL DB연동을 위한 pymysql 모듈을 설치합니다.
pip install Flask
pip install pymysql
그리고 이제부터 내부 파일들을 구성하도록 하겠습니다.
(1) start_app.py:
프로그램 시작점입니다. 내부에서 app을 import 하는 것만으로도 __init__.py를 자동으로 구동하게 됩니다.
from app import app
app.run(host='0.0.0.0') # 127.0.0.1
(2) __init__.py :
본격적인 Flask 앱입니다. 주로 라우팅 관련 설정을 다루고 있습니다. 아직은 '/' 루트로 연결 요청에 대해 'home.html'로 연결하는 1개의 라우팅밖에 없습니다.
from flask import Flask, render_template
from app import mod_dbconn
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
if __name__=='__main__':
app.run(debug=True)
from app import app
from flask import Flask, render_template
from app import mod_dbconn
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
# 여기부터 추가
@app.route('/db')
def select():
db_class = mod_dbconn.Database()
sql = "SELECT id, name \
FROM testDB.members"
row = db_class.executeAll(sql)
print(row)
return render_template('db.html', resultData=row[0])
# 여기까지 추가
if __name__=='__main__':
app.run(debug=True)
from app import app
데이터 흐름으로 보자면...이렇게 되겠네요^^. 즉 '/db' 접속 요청이 들어오면 해당 라우터를 찾아 select()함수를 실행시키는데, 우선 Database로부터 sql에 해당하는 data를 받아서 row에 저장시키고, 이를 resultData라는 변수에 할당하여 db.html로 함께 넘겨줍니다.
