[10] Flask로 API 만들기 : 서버 만들기, mongoDB, 프론트엔드와 백엔드 연결, Get 요청, Post 요청

Programming/WEB

[10] Flask로 API 만들기 : 서버 만들기, mongoDB, 프론트엔드와 백엔드 연결, Get 요청, Post 요청

알 수 없는 사용자 2023. 7. 18. 06:50

0. 학습 진도 개괄

프론트 엔드 : HTML, CSS, JS
백엔드 (서버) : app.py (Flask 서버)
데이터베이스 : mongoDB

➡️ 우리는 하나의 컴퓨터로 클라이언트 / 서버를 둘 다 만들 것 = 로컬 개발환경

1. Flask로 서버 만들기

1) 폴더 생성, 가상환경 설치

1) 파일 > 폴더 열기

2) app.py 파일 만들기

3) 가상환경 설치

터미널 > 새 터미널

python -m venv venv

2) Flask 패키지 설치하기

pip install flask

3) Flask 기초 : 실행하기

1) Flask 시작코드

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

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

app : app.py 랑 같은 파일명
port= 5000
파이썬 파일 실행 하면 아래처럼 나온다.

2) localhost:5000 주소 입력

오픈된 주소가 아니라 나만 들어가서 볼 수 있는 상

4) Flask 기초 : URL 나눠보기

@app.route('/')를 수정해서 URL을 나눌 수 있다.

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():
   return 'This is mypage!'

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

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():
   return '<button>버튼</button>'

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

5) Flask 시작 : HTML 파일 주기

1) templates 폴더 만들기

2) templates > index.html 만들기

3) app.py와 index.html 연결

➡️ html 수정하고, py파일 저장

html 파일은 백엔드 서버인 파이썬 파일이 가져다주는 것
그래서 html 수정하고 html만 저장하면 수정한 게 반영이 안됨. 꼭 python 파일 저장해야 반영됨

6) Flask : Get, Post 요청

1) GET 요청

통상적으로 데이터 조회(Read)할 때 사용
URL 뒤에 물음표를 붙여 key=value로 전달

2) POST 요청

통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 사용
예) 회원가입, 회원탈퇴, 비밀번호 수정
바로 보이지 않는 HTML로 전달

*GET 요청 코드 확인

1) HTML에 jQuery 임포트

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2) App.py(백엔드) : GET 요청 API 코드

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

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

3) HTML : GET 요청 확인 Fetch 코드

fetch("/test").then(res => res.json()).then(data => {
		console.log(data)
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>

    <script>
        fetch("/test").then(res => res.json()).then(data => {
            console.log(data)
        })
    </script>

</head>

<body>
    <h1>제목을 입력합니다</h1>
    <button>나는 버튼!</button>
</body>

</html>

4) 원리

*POST 요청 코드 확인

1) App.py(백엔드) : POST 요청 API 코드

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

2) HTML : POST 요청 확인 Fetch 코드

let formData = new FormData();
formData.append("title_give", "블랙팬서");

fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
    console.log(data)
})

3) 원리