Jinja2 템플릿 엔진
Flask 웹 프레임워크에서 사용되는 기본 템플릿 엔진으로, HTML 파일 내에서 Python 코드와 표현식을 사용할 수 있도록 해준다.
즉, HTML 파일과 같은 템플릿 파일에서 동적으로 데이터를 렌더링할 수 있게 해준다.
Flask는 render_template 함수를 통해 템플릿을 렌더링할 때, 내부적으로 templates 폴더를 참조하여 해당 템플릿 파일을 찾는다.
따라서 Flask 애플리케이션을 개발할 때, render_template 함수를 사용하여 HTML 템플릿 파일을 렌더링할 때 템플릿 파일들은 일반적으로 templates 폴더에 저장해야 한다.
Jinja2 템플릿 표현식
분기문 태그
{% if 조건문1 %}
<p>조건문1에 해당하면 실행</p>
{% elif 조건문2 %}
<p>조건문2에 해당하면 실행</p>
{% else %}
<p>조건문1, 2 모두 해당하지 않으면 실행</p>
{% endif %}### 반복문 태그
{% for item in list %}
<p>순서: {{ loop.index }} </p>
<p>{{ item }}</p>
{% endfor %}객체 태그
{{ 객체 }}
{{ 객체.속성 }}예시
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def template_test():
return render_template('expression.html', **str**="템플릿 테스트", **array**=[11,22,33,44,55])<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>expression</title>
</head>
<body>
<div class="container">
<h1>**{{str}}**</h1>
<h1>
<ul>
**{% for i in array %}
<li>{{ i }}</li>
{% endfor %}**
</ul>
</h1>
</div>
</body>
</html>표준 HTML과 템플릿 상속
표준 HTML 구조 예
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
<!-- pybo CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>Hello, pybo!</title>
</head>
<body>
(... 생략 ...)
</body>
</html>템플릿 상속
플라스크는 중복된 코드를 방지하기 위해 템플릿 상속(extends) 기능을 제공한다.
- 템플릿 파일의 기본 틀 작성
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
<!-- pybo CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>Hello, pybo!</title>
</head>
<body>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
**{% block content %}
{% endblock %}**
<!-- 기본 템플릿 안에 삽입될 내용 End -->
</body>
</html>- 템플릿 상속
**{% extends 'base.html' %}
{% block content %}**
<div class="container my-3">
<table class="table">
(... 생략 ...)
</table>
</div>
**{% endblock %}**