Jinja2는 Python Flask에 내장된 서버사이드 템플릿엔진이다.
클라이언트에서 요청한 정보를 서버 측에서 HTML 코드로 보내주기 때문에 편리하다.
간단한 예시를 들어보자.
['일번', '이번', '삼번', '사번'] 을 li로 렌더링 하는 코드를 작성해보았다.
먼저, jinja를 사용하지 않고 flask 서버에서 리스트를 전달해서 client <li>로 렌더해주는 코드다.
# app.py
from flask import Flask, render_template, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/data', methods=['GET'])
def get_data():
info_list = ['일번', '이번', '삼번', '사번']
return jsonify({'info': info_list})
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<ul id="listId"></ul>
<script>
async function getData() {
const data = await fetch('/data', {
method: "GET"
}).then((res) => res.json());
return data;
}
async function printList() {
const list = document.getElementById("listId");
const {info: infoAry} = await getData();
for (let info of infoAry) {
const item = document.createElement("li");
item.innerText = info;
list.appendChild(item);
}
}
printList();
</script>
</body>
</html>
이번에는 jinja2를 사용해서 렌더링했다.
# app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
info_list = ['일번', '이번', '삼번', '사번']
return render_template('index.html', items=info_list)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<ul id="listId">
{% for item in items %}
<li>{{item}}</li>
{% endfor %}
</ul>
</body>
</html>