티스토리 뷰

저는 웹강의를 얼마전 끝냈는데요, 해당 강의 종료시점에 한것이 AWS에 페이지 하나 올려서 확인하는 거였습니다.

그런데 이것으로는 아쉬운감이 있어서 이때까지 강의에서 만들어본 페이지를 모두 보여줄수 있는 페이지를 만들기로 하고

방법을 찿아서 했던 것들을 정리하겠습니다.

 

flask 프로젝트에서 .py 파일 분리하기 (Blueprint)

mars
fandiary
두 App을 하나로 모을 collection 프로젝트

두개의 간단한 flask app을 어떻게 하나의 app.py에서 관리할 수 있을까가 고민이였습니다.

예를들면 위 이미지 처럼 collection 프로젝트의 app.pymars, fandiary app통합하고 싶었습니다.

여기서 사용할 수 있던 flask module중 하나인 Blueprint 였습니다.

# fandiary.bp.py
from flask import Blueprint

# Blueprint 객체가 flask app 의 서브 모듈로 동작
fandiary_bp = Blueprint('fandiary_bp', __name__)	

# Blueprint.rout 함수 데코레이터
@fandiary_bp.route('/fandiary')	
def test():
    return "This is blueprint"
# app.py
from flask import Flask, render_template, request
from fandiary_bp import fandiary_bp	# Blueprint 객체 임포트

app = Flask(__name__)
app.register_blueprint(fandiary_bp)	# Flask app에 Blueprint 객체 등록

위 코드 예시처럼 서브모듈인 fandiary.pyBlueprint 객체app.py에서 import하여 등록하고 있습니다.

이러면 Flask app이 Blueprint 기능까지 확장되죠. 위 예시에서는 /fandiary GET 요청을 처리할 수 있는 Blueprint 객체를 등록하였으니 해당 요청이 정상적으로 처리되겠죠.

이렇게 되면 여러 sub.py 파일의 Blueprint를 app.py에서 등록만 시켜주면 파일분리를 하여

하나의 app으로 관리할 수 있습니다.

공통 HTML 사용(Jinja)

여러 sub.py 파일을 하나의 app.py로 통합한뒤에 남은 과제는 "여러 HTML이 어떻게

공통적인 HTML을 공유할 수 있을까?" 입니다.

페이지 예시

예를들면, 위 이미지 처럼 Navigation Bar는 모든 페이지에서 공통적으로 나와야 하는데, 어떻게 Navigaiton Bar는 그대로 두고 밑에 메인 섹션만 바뀌어야 하는 상황이었습니다.

이 방법을 찿아본 결과 python에 template langauge인 Jinja를 사용하는 것이었습니다.

(Jinja는 Jinja2를 가르키는 용어로 씁니다)

<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block title %} {% endblock %} <!-- blcok 정의 1 -->
</head>
<body>
    <div class="content">
        {% block content %} {% endblock %} <!-- blcok 정의 2 -->
    </div>
</body>
</html>
<!-- sub.html -->
{% extends 'base.html' %}	<!-- base.html 상속 -->

<!-- 부모 html에 정의된 block을 구현한다. -->
{% block title %} <title>giri</title> {% endblock %} <!-- blcok 정의 1 -->

{% block content %}	<!-- block 정의 2 -->
    <h1>hi</h1>
    <h1>Hello World!</h1>
    <h2>Welcome to FlaskApp!</h2>
{% endblock %}

base.html에서 정의된 블럭을 sub.html에서 구현한 block으로 교체할 수 있습니다.

이런 방식으로 공통 HTML을 공유하여 페이지 개발이 가능해지는 겁니다.

Jinja문법을 보니 과거에 사용해봤던 JSP와 JSTL이 생각나네요..ㅎㅎ

 

결론

Blueprint를 통해 Flask App을 여러 .py 파일로 분리하여 규모가 큰 프로젝트에도 적용이 가능하도록 모듈화를 시켰습니다.

또한 Jinja를 통해 공통적인 HTML(ex. Navigation Bar)등을 모든 페이지에서 공유하여 사용할 수 있었습니다.

이로서 flask로 실 프로젝트에서 사용할 만한 페이지를 구현했다는거에 보람이 좀 느껴지네요.

저는 Vue.js, node js를 주로 사용할 계획이지만 이렇게 다른 언어로 구현을 해보는 시간은

프로그래밍 본질에 대한 고찰을 할 수 있는 기회인 것 같애요 ㅎ

읽어주셔서 감사합니다.

참고자료

https://realpython.com/flask-blueprint/

 

Use a Flask Blueprint to Architect Your Applications – Real Python

In this tutorial, you'll learn how to use a Flask Blueprint to help you structure your application by grouping its functionality into reusable components. You'll learn what Blueprints are, how they work, and how you can use them to organize your code.

realpython.com

https://jinja.palletsprojects.com/en/3.1.x/templates/

 

Template Designer Documentation — Jinja Documentation (3.1.x)

Template Designer Documentation This document describes the syntax and semantics of the template engine and will be most useful as reference to those creating Jinja templates. As the template engine is very flexible, the configuration from the application

jinja.palletsprojects.com

 

댓글