1. Jinja template이란?
Jinja template은 Flask 함수 내에서 받은 값을 html 내부에 출력합니다.
flask_app
├── __init__.py
└── templates
└── index.html
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html') templates: Flask는 별도의 설정을 하지 않아도 templates 폴더 내부의 html을 render 해야할 대상으로 지정합니다. templates 파일 내부에 어플리케이션에서 구현할 html을 만듭니다.render_template('index.html'): 라우트 함수의 리턴 값으로 render_template('{html 파일}')을 넣으면 해당 html 파일을 클라이언트에 넘겨줍니다.
2. Flask의 기능들
1) Flask에서 Jinja로 변수 넘기기
html을 클라이언트에 넘겨주는 것까지 확인했습니다. 그럼 클라이언트가 요청하는 정보를 출력하기 위해서는 어떻게 해야할까요? 상황 별로 html을 준비해서 출력할 수는 없을 것 같습니다.
이 상황을 Flask에서 Jinja에 클라이언트가 요청하는 변수를 넘겨줌으로써 해결할 수 있습니다.
@app.route('/')
def index():
name = 'ggpark'
age = 30
return render_template('index.html', name=name, age=age)- index 템플릿에 name과 age 변수를 넘깁니다.
- html 파일은 위 변수를 아래와 같이 받습니다.
<body>
<h2>Your name is {{ name }} </h2>
<h2>Your age is {{ age }} </h2>
</body>- Flask는 위 html을 클라이언트에 출력합니다.
2) if 구문 사용하기
Jinja에서도 if문 for문을 사용할 수 있습니다. html 안에 아래와 같은 형태로 사용합니다.
{% if 조건문1 %}
<p>조건문1에 해당하면 실행</p>
{% elif 조건문2 %}
<p>조건문2에 해당하면 실행</p>
{% else %}
<p>조건문1,2에 해당하지 않으면 실행</p>
{% endif %}- 파이썬에서 사용하는 조건문과 같은 형식입니다.
- 마지막에
{% endif %}로 닫아주어야 작동합니다.
3) for 반복문 사용하기
for 구문은 데이터베이스에서 리스트, 딕셔너리를 받았을 때 유용하게 사용할 수 있습니다.
{% for item in item_list %}
<p>순서: {{ loop.index }} </p>
<p>{{ item }}</p>
{% endfor %}- Flask에서 item_list를 전달받아서 for문을 실행합니다.
- loop는 jinja에서 제공하는 편의 기능입니다.
- loop.index : 반복 순서, 1부터 1씩 증가
- loop.index0 : 반복 순서 0부터 1씩 증가
- loop.first : 반복 순서가 처음일 경우 True 아니면 False
- loop.last : 반복 순서가 마지막일 경우 True 아니면 False
4) Jinja 상속
jinja 상속은 반복적으로 사용되는 부분들을 하나로 묶어서 다른 html에 넘겨주는 기능입니다. 상속 기능을 사용하면 웹 어플리케이션에 네비게이션 바를 일일이 html에 넣을 필요가 없고, HTML 구조를 변경하거나 CSS 파일이 추가됐을 때도 모든 html을 변경하지 않아도 됩니다. 상속해주는 부모 템플릿만 수정하면 자식 템플릿에도 자동으로 반영됩니다.
# base.html
<!DOCTYPE html>
<html lang="en">
<head>
<title> My Webpage </title>
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
</body>
</html>- body 엘리먼트에 {% block content %}{% endblock %} 템플릿 태그를 넣었습니다. 이 부분이 base.html을 상속받은 파일이 구현할 영역입니다.
- base.html을 상속받는 방법은 아래와 같습니다.
# child.htmld
{% extends 'base.html' %}
{% block content %}
<h1>Index</h1>
<p class="paragraph">
Welcome to my homepage.
</p>
{% endblock %}- base.html 템플릿을 상속받기 위해
{% extends 'base.html' %}태그를 사용합니다. {% block content %}{% endblock %}사이에 클라이언트에 넘길 콘텐츠를 작성합니다. html 구조를 갖춘 base.html을 상속받았기 때문에 child.html은 자동으로 html 구조를 갖추게 됩니다.- base.html 코드 전체를 상속받고, {% block %}{% endblock %}만 따로 블록처럼 끼워넣는 구조입니다.
- {% block %}은 여러개를 사용할 수 있습니다. 그래서 block 별로 이름을 지어줍니다. {% block head %}, {% block contents %}와 같이 이름을 지어줄 수 있습니다.
- 예를 들어, 부모의 'head' 블록 내용을 가져오고 싶을 때에는 다음과 같이 사용합니다.
# base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<title> My Webpage </title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
</body>
</html>- 먼저 상속할 부분에 {% block head %}{% endblock %}을 설정합니다.
# child.htmld
{% extends 'base.html' %}
{% block head %}
{{ super() }}
{% endblock %}}
{% block content %}
<h1>Index</h1>
<p class="paragraph">
Welcome to my homepage.
</p>
{% endblock %}- 상속받을 block을 넣고, {{ supuer() }} 태그로 내용을 상속받습니다.
-