서버 만들기
프레임워크: 어느정도 만들어져 있는 꾸러미(라이브러리와 비슷)
Flask: 서버를 만들기 위한 프레임워크(파이썬 서버 프레임워크)
- 원하는 폴더 이동
- app.py 생성(백엔드 파일 / 프론트엔드: html)
- 터미널 열기
- 가상환경 만들기
가상환경: 프로젝트별로 라이브러리 담아두는 통
$ python -m venv venv터미널을 닫고 다시 열었을 때
$ source c:/Users/22yej/Desktop/sparta/projects/01.prac/venv/Scripts/activate
(venv) 이렇게 나오면 가상환경 만들어진거
- 라이브러리 생성
$ pip install 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)실행화면
브라우저로 localhost:5000 페이지를 열면
이런 화면이 나온다.
현재는 나한테만 열고 나만 보임
/mypage를 추가한 후
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is my Home!'
@app.route('/mypage')
def mypage():
return 'This is mypage!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)localhost:5000/mypage 페이지를 열면
위처럼 나온다.
localhost:5000은 우리은행 용산지점, mypage는 입출금 창구로 생각하면 된다.
버튼만들기
@app.route('/mypage')
def mypage():
return '<button>버튼입니다</button>'
html파일 연동
- html파일 생성
<!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>
function hey(){
alert('안녕!')
}
</script>
</head>
<body>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>- import render_template
from flask import Flask, render_template- return값을 render_template('index.html')로 바꿔주기
@app.route('/mypage')
def mypage():
return render_template('index.html')출력화면
나는 버튼! 누르기
/mypage 내놓으라고 하면 연동시켜놓은 index.html을 내주는 것
데이터 전달 방식
get 요청
- 데이터를 URL로 전달해주는 것
- 통상적으로 데이터 조회를 요청할 때 사용
- 영화 목록 조회 등
- 데이터 전달: URL 뒤 물음표를 붙여서 key=value로 전달
post 요청
- 데이터를 바로 보이지 않는 HTML로 전달
- 데이터 생성, 변경, 삭제를 요청할 때 사용
- 회원가입, 회원탈퇴, 비밀번호 수정 등
get 요청
get 요청 방식은 서버에 전달할 때 데이터를 URL에 포함시켜서 요청하는 방식으로 전송할 수 있는 데이터의 양이 제한된다.(4KB)
API를 만들고 사용하기 위해 필요한 기능 import
- request
- jsonify
from flask import Flask, render_template, request, jsonifyindex.html에서 app.py의 데이터를 가져오도록 수정
app.py
@app.route('/test', methods=['GET'])
def test_get():
title_receive = request.args.get('title_give')
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 GET!'})index.html
<script>
function hey(){
fetch("/test").then(res => res.json()).then(data => {
console.log(data)
})
}
</script>app.py에 있는 게 html에 data로 들어가서 아래처럼 console창에 출력된다.
post 요청
post 방식은 서버에 전달할 때 데이터를 Request Body에 포함시키는 방식으로 데이터 전송량의 제한이 없다.
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 POST!'})title_give라는 데이터가 들어오면 그 데이터를 itle_receive로 받아서 print하고 데이터를 내려줘라
index.html 코드
function hey() {
let formData = new FormData();
formData.append("title_give", "블랙팬서");
fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
console.log(data)
})
}formDate를 만들어서 formData에 데이터를 실어서 보낸다.
- index.html(프론트엔드)내 hey()에서 쌓인 데이터를 /test로 보냄(fetch가 데이터를 보내는 역할)
2.app.py(백엔드)에서 받고
- POST의 /test에서 title_give가 있는지 찾는다.
fetch에 담겨온 데이터 안에 title_give('블랙팬서') 있으므로app.py내 title_receive는 '블랙팬서'가 된다.
그리고 title_receive 출력(print) 후 내려준다.(jsonify)
내리는 데이터는 index.html내 fetch의 결과 data에 담긴다.
터미널창에 Debugger PIN이 출력된 상태로 커서가 깜빡이지 않는다면 현재 실행중인 것으로 control+C로 꺼줄 것
