106 lines
3.8 KiB
Markdown
106 lines
3.8 KiB
Markdown
# Jinja2: 템플릿 엔진
|
|
|
|
Jinja2는 파이썬에서 사용되는 강력하고 유연한 템플릿 엔진입니다. 특히 Flask와 같은 웹 프레임워크에서 HTML 페이지를 동적으로 생성하는 데 널리 사용됩니다. Jinja2를 사용하면 복잡한 웹 페이지를 효율적으로 관리하고, 데이터를 동적으로 렌더링할 수 있습니다.
|
|
|
|
* 간결한 문법: 파이썬과 유사한 문법을 사용하여 쉽게 학습하고 사용할 수 있습니다.
|
|
* 강력한 기능: 조건문, 반복문, 상속, 필터 등 다양한 기능을 제공하여 복잡한 템플릿을 구현할 수 있습니다.
|
|
* 안전성: 자동으로 HTML 엔티티를 이스케이프하여 XSS 공격을 방지합니다.
|
|
* 확장성: 커스텀 필터, 테스트, 글로벌 변수 등을 정의하여 기능을 확장할 수 있습니다.
|
|
|
|
## Jinja2의 기본 구조
|
|
Jinja2 템플릿은 .html 확장자를 가지는 파일로, HTML 코드와 Jinja2 특정 문법이 혼재되어 있습니다.
|
|
|
|
* 변수 출력: {{ 변수명 }}
|
|
* 조건문: {% if 조건 %} ... {% endif %}
|
|
* 반복문: {% for item in list %} ... {% endfor %}
|
|
* 주석: {# 주석 내용 #}
|
|
|
|
```jinja
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Jinja2 예제</title>
|
|
</head>
|
|
<body>
|
|
<h1>Hello, {{ name }}!</h1>
|
|
<ul>
|
|
{% for item in items %}
|
|
<li>{{ item }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</body>
|
|
</html>
|
|
```
|
|
위 템플릿에서 name과 items 변수는 파이썬 코드에서 전달된 값으로 대체됩니다.
|
|
|
|
## 주요 기능
|
|
* 상속: 기본 템플릿을 상속하여 하위 템플릿에서 재사용 가능
|
|
* 필터: 변수를 다양한 형식으로 변환하거나 필터링
|
|
* 매크로: 자주 사용하는 코드 블록을 함수처럼 정의하여 재사용
|
|
* 자동 에스케이핑: XSS 공격을 방지하기 위해 HTML 특수 문자를 자동으로 이스케이프
|
|
|
|
## Flask와 함께 사용하기
|
|
```python
|
|
from flask import Flask, render_template
|
|
|
|
app = Flask(__name__)
|
|
|
|
@app.route('/')
|
|
def index():
|
|
name = 'World'
|
|
items = ['apple', 'banana', 'orange']
|
|
return render_template('index.html', name=name, items=items)
|
|
```
|
|
|
|
## 상속
|
|
|
|
* 기본 템플릿: 모든 페이지에 공통적으로 사용되는 요소(헤더, 푸터, 네비게이션 등)를 포함하는 템플릿입니다.
|
|
* 자식 템플릿: 기본 템플릿을 상속받아 특정 페이지에 필요한 내용을 추가하거나 수정하는 템플릿입니다.
|
|
|
|
```jinja
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>{% block title %}{% endblock %}</title>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
</header>
|
|
<div class="content">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
<footer>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
|
|
{% extends "base.html" %}
|
|
|
|
{% block title %}About Us{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>About Us</h1>
|
|
<p>This is the about page.</p>
|
|
{% endblock %}
|
|
```
|
|
* `{% extends "base.html" %}`: base.html 템플릿을 상속합니다.
|
|
* `{% block title %}{% endblock %}`: title 블록을 정의하여 자식 템플릿에서 내용을 채울 수 있도록 합니다.
|
|
* `{% block content %}{% endblock %}`: content 블록을 정의하여 각 페이지의 주요 내용을 채울 수 있도록 합니다.
|
|
|
|
|
|
## include
|
|
include는 다른 템플릿 파일을 현재 템플릿에 포함시키는 지시자입니다. 마치 함수 호출처럼 다른 템플릿을 호출하여 그 내용을 현재 위치에 삽입하는 효과를 냅니다.
|
|
|
|
```jinja
|
|
{% include 'header.html' %}
|
|
```
|
|
|
|
## macro
|
|
macro는 템플릿 내에서 함수처럼 사용할 수 있는 코드 블록입니다. 특정 기능을 수행하는 코드를 한 번 정의해놓고, 필요한 곳에서 호출하여 사용할 수 있습니다.
|
|
|
|
```jinja
|
|
{% macro input(name, value='', type='text') %}
|
|
<input type="{{ type }}" name="{{ name }}" value="{{ value }}">
|
|
{% endmacro %}
|
|
```
|