앞서 만들었던 python 파일을 웹페이지로 만들기 위해 여기 저기 알아보면서 본 단어다. Flask.... 뭔가 실마리를 찾을 수 있을 듯 하다.
1. Flask 기초
프레임워크 Flask
2. app.py 만들기
통상적으로 flask에서 기본 파일은 app.py로 만들어 준다.
3. 가상환경 만들기
가상환경 : 프로젝트별로 라이브러리를 담아 놓는 통
1) 터미널 > 새 터미널
2) python3 -m venv venv
⊞ windows : python -m venv venv
3) 터미널 닫고 다시 열어서 (venv) 확인
4. Flask 설치
pip install flask
5. 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)
6. localhost:5000
웹 브라우저 주소 칸에 localhost:5000 입력
7. localhost:5000/mypage
1) mypage 만들기
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)
2) button 만들기
@app.route('/mypage')
def mypage():
return '<button>This is mypage!</button>'
8. html 연결
1) templates 폴더 만들기
2) templates > index.html 만들기
3) render_template
import render_template
return render_template('index.html')
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
@app.route('/mypage')
def mypage():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
9. 데이터 전달 방식
GET : ?를 사용하여 전달, 통상적으로 데이터를 조회(Read) 할 때 사용한다.
POST : 눈에 안 보인다, 통상적으로 데이터 생성(Create) 변경(Update) 삭제(Delete) 할 때 사용한다.
1) GET 요청
import request, jsonify
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=5000,debug=True)위의 코드는 app.py 이다.
<!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() {
fetch("/test").then(res => res.json()).then(data => {
console.log(data)
})
}
</script>
</head>
<body>
<h1>제목을 입력합니다</h1>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>위의 코드는 index.html 이다.
2) POST 요청
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 POST!'})
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)위 코드는 app.py이다.
<!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() {
let formData = new FormData();
formData.append("title_give", "블랙팬서");
fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
console.log(data)
})
}
</script>
</head>
<body>
<h1>제목을 입력합니다</h1>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>위 코드는 index.html 이다.
10. 소감
python 파일을 브라우저에서 보고 싶어서 고민했는데 한 번에 해결 되어서 기쁘다. 5시간이나 구글링 하며 고민하던 일이었다. 이 일을 계기로 좋은 강의의 중요성에 대해 다시 한 번 깨닫게 되었다. 스파르타코딩클럽의 웹개발종합반이라는 강의를 알게 되어 운이 좋았다. 처음 국비 지원 과정으로 배울 때가 생각이 난다. 오전에는 이해하기 어려운 JVM과 Garbage collector, 메서드 영역, 스택 영역 등을 머리에 집어 넣으려고 애썼고 오후에는 아무것도 하지 않고 HTML의 CSS만 하나 하나 뜯어서 배웠다. 결과를 볼 수 없는 무한한 학습에 지쳐 한 달만에 포기하고 말았다. 한 달이나 지났건만 내가 할 수 있는 것은 HTML 문서의 배경색을 분홍색으로 바꾸는 정도였다. 이번 과정은 시작한 지 3일만에 데이터베이스로 접근할 수 있었다. 4일째에는 직접 어떻게 하면 내가 만든 것들을 브라우저에 띄워 볼 수 있을까 스스로 고민하게 만들어 주었다. K-디지털 트레이닝 과정들이 겉으로 보기에는 수강 기간이 짧아 과연 할 수 있을까 하는 생각이 많았는데 내 선입견을 완전히 버리고 코딩에 드디어 입문할 수 있는 힘을 주었다. 너무 고맙고 행복한 경험이다.