[Flask] Flask 웹 어플리케이션 만들기, 처음부터 끝까지
Flask 시작하기
Flask는 파이썬으로 구동되는 웹 어플리케이션 프레임워크이다. Django 프레임워크보다 가벼워서 스케일이 작은 서버부터 큰 서버까지 만들 수 있다. 내가 필요한 건 파이썬 함수에서 계산된 값이 HTML로 리턴되는 것이었는데, Flask에서는 쉽게 할 수 있었다.개발 환경은 파이참(PyCharm) IDE를 사용했다. 파이썬 개발뿐만 아니라 HTML, CSS, JS 편집까지 할 수 있고 패키지 설치, 디버깅이 간편했기 때문이다.
우선 파이참에서 프로젝트를 만든다.
main.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def main_page():
return render_template('index.html')
if __name__ == '__main__':
# 서버 실행
app.run(host='0.0.0.0', debug=True)
| cs |
main.py 파일을 프로젝트 폴더에 넣고 index.html을 만들어 [프로젝트 폴더/templates] 폴더 내에 위치시킨다.
파일 배치가 완료된 모습이다.
이제 main.py을 파이참에서 실행하면 0.0.0.0:5000 또는 localhost:5000로 브라우저에서 접속할 수 있다. Flask에서 html을 jinja로 파이썬과 연동시켜 주었기때문에 실행 시 자동으로 index.html로 연결된다.
파이썬에서 HTML 파일로 값을 넘기는 법을 알아보자.
Flask와 웹 연동하기 (파이썬 리턴 값을 웹에서 받기)
Python 값을 HTML에서 받기
파이썬에서 작성된 함수에서 발생된 리턴 값을 웹(HTML)에서 받아보자.
main.py에서 적당한 함수를 작성한다.
@app.route('/')
def main_page():
result = 1 + 1
return render_template('index.html', calc_result = result)
| cs |
render_template을 통해 index.html에 result 값을 넘겨줄 수 있다. html에서는? calc_result로 받는다. html에서 작성된 calc_result 값에 result 값이 들어가면서 index.html로 리다이렉트 되는것이다.
index.html
<html>
<head>
<title> 1+1 페이지 </title>
</head>
<body>
1+1은 {{ calc_result }}입니다!
</body>
</head>
</html>
| cs |
{{ 변수 이름 }} 으로 작성하면 플라스크에서 값을 넘겨줄 수 있다. 이제 main.py을 실행하면 {{ calc_result }}는 2로 렌더링되어 브라우저에 표시될 것이다.
이제 HTML에서 값을 넘기는 법을 알았으니 JavaScript에서 받아보자.
index.html
<html>
<head>
<title> 1+1 페이지 </title>
</head>
<body onload = "view_result();">
1+1은 <span id="res"></span>입니다!
<script>
var res = {{ calc_result|tojson }}
function view_result(){
document.getElementById('res').innerHTML = res;
}
</script>
</body>
</head>
</html>
| cs |
자바스크립트를 index.html의 body 태그 내에 선언하고 var로 출력할 값을 선언 후 {{ 변수이름|tojson }} 으로 작성하면 플라스크에서 자바스크립트로 값을 넘겨줄 수 있다.
위 코드는 span 태그 내의 내용을 자바스크립트에서 innerHTML을 사용하여 res값으로 바꿔준다. 위 html에서 값을 받은 페이지와 실행 결과는 같지만 활용은 무궁무진할 것이다.
Flask - 파일 업로드 구현
플라스크 내에서 웹을 이용한 기능들은 정말 많다. 이 중에서 내가 개발 중인 프로젝트에 필요한 주요 기능은 파일 업로드 기능이다.
main.py
from werkzeug import secure_filename
from flask import Flask, render_template, request, redirect
ALLOWED_EXTENSIONS = set(['jpg', 'jpeg', 'png', 'gif', 'bmp', 'JPG', 'JPEG', 'PNG', 'GIF', 'BMP'])
app = Flask(__name__)
@app.route('/fileUpload', methods=['GET', 'POST'])
def upload_file():
if request.method == 'POST':
file = request.files['file']
#확장자 이미지파일인 경우
if file and allowed_file(file.filename):
file.save('uploads/' + secure_filename(file.filename)
return redirect(url_for('main_page'))
#확장자 이미지파일 아닐 경우
return render_template('index.html', data="이미지 파일만 업로드하세요.")
def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
| cs |
이 코드는 단순히 파일 업로드뿐만 아니라 확장자를 검사할 수 있다. ALLOWED_EXTENSIONS에 허용할 확장자명을 선언하고 이미지 파일일 경우 uploads 폴더에 파일을 저장하고, 아닐 경우 html에서 선언한 {{ data }}에 경고 메시지를 리턴하며 index.html로 리다이렉트한다.
-
Flask에 대해서 어느정도 알아보았다.
Flask는 가볍지만 필요로 하는 기능들을 import해서 얼마든지 사용할 수 있다. Python과 웹을 다룰 줄 안다면 Flask는 쉬울 것이다. 필자는 파이썬 opencv 라이브러리를 통해 이미지 분석 기능을 제공하는 웹 서비스를 만들어 도커로 서버에서 서비스 할 예정이다. 진행 사항은 추후 업로드하겠다.
![[Flask] Flask 웹 어플리케이션 만들기, 처음부터 끝까지](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvFaZc4hV-9dMQxR2BgjgDRj_iWiDi-6irSrot9f0u_c6ZgF_Q1Sc4RZ0yazBJ_dw-qz4DZZh7AD7i1frN49uvDxJBHbB3V9SK_RKfnXKNS8klHfDkv4uwl3GBwCwARwm0aUNXpF9wTag8/s72-c/%25ED%258C%258C%25EC%259D%25B4%25EC%25B0%25B8%25ED%258F%25B4%25EB%258D%2594.JPG)
댓글 없음: