Flask 시작하기

Flask는 파이썬으로 구동되는 웹 어플리케이션 프레임워크이다. Django 프레임워크보다 가벼워서 스케일이 작은 서버부터 큰 서버까지 만들 수 있다. 내가 필요한 건 파이썬 함수에서 계산된 값이 HTML로 리턴되는 것이었는데, Flask에서는 쉽게 할 수 있었다.

개발 환경은 PyCharm IDE를 사용했다. 파이썬 개발뿐만 아니라 HTML, CSS, JS 편집까지 할 수 있고 패키지 설치, 디버깅이 간편했기 때문이다.

우선 파이참에서 프로젝트를 만든다.

main.py

1
2
3
4
5
6
7
8
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)

main.py 파일을 프로젝트 폴더에 넣고 index.html을 만들어 [프로젝트 폴더/templates] 폴더 내에 위치시킨다.

f11

파일 배치가 완료된 모습이다.

이제 main.py을 파이참에서 실행하면 0.0.0.0:5000 또는 localhost:5000로 브라우저에서 접속할 수 있다. Flask에서 html을 jinja로 파이썬과 연동시켜 주었기때문에 실행 시 자동으로 index.html로 연결된다.

파이썬에서 HTML 파일로 값을 넘기는 법을 알아보자.

Flask와 웹 연동하기

Python 값을 웹(HTML)에서 받기

파이썬에서 작성된 함수에서 발생된 리턴 값을 웹(HTML)에서 받아보자.
main.py에서 적당한 함수를 작성한다.

1
2
3
4
@app.route('/')
def main_page():
    result = 1 + 1
    return render_template('index.html', calc_result = result)

render_template을 통해 index.html에 result 값을 넘겨줄 수 있다. html에서는? calc_result로 받는다. html에서 작성된 calc_result 값에 result 값이 들어가면서 index.html로 리다이렉트 되는것이다.

index.html

1
2
3
4
5
6
7
8
9
<html>
<head>
<title> 1+1 페이지 </title>
</head>
<body>
1+1은 {{ calc_result }}입니다!
</body>
</head>
</html>

{{ 변수 이름 }} 으로 작성하면 플라스크에서 값을 넘겨줄 수 있다. 이제 main.py을 실행하면 {{ calc_result }}는 2로 렌더링되어 브라우저에 표시될 것이다.

이제 HTML에서 값을 넘기는 법을 알았으니 JavaScript에서 받아보자.

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

자바스크립트를 index.html의 body 태그 내에 선언하고 var로 출력할 값을 선언 후 {{ 변수이름|tojson }} 으로 작성하면 플라스크에서 자바스크립트로 값을 넘겨줄 수 있다.

위 코드는 span 태그 내의 내용을 자바스크립트에서 innerHTML을 사용하여 res값으로 바꿔준다. 위 html에서 값을 받은 페이지와 실행 결과는 같지만 활용은 무궁무진할 것이다.

Flask 파일 업로드 구현

플라스크 내에서 웹을 이용한 기능들은 정말 많다. 이 중에서 내가 개발 중인 프로젝트에 필요한 주요 기능은 파일 업로드 기능이다.

main.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

이 코드는 단순히 파일 업로드뿐만 아니라 확장자를 검사할 수 있다. ALLOWED_EXTENSIONS에 허용할 확장자명을 선언하고 이미지 파일일 경우 uploads 폴더에 파일을 저장하고, 아닐 경우 html에서 선언한 {{ data }}에 경고 메시지를 리턴하며 index.html로 리다이렉트한다.

마치며

Flask에 대해서 어느정도 알아보았다.
Flask는 가볍지만 필요로 하는 기능들을 import해서 얼마든지 사용할 수 있다. Python과 웹을 어느정도 다룰 줄 안다면 Flask는 접하기 쉬울 것이라 생각한다. 나는 파이썬 opencv 라이브러리를 통해 이미지 분석 기능을 제공하는 웹 서비스를 만들어 도커로 서버에서 서비스했는데, 파이썬을 웹에서 서비스하니 이미지 분석 등의 파이썬 고유의 라이브러리를 사용할 수 있는 등의 이점이 정말 많았다.