Jinja2를 사용하여 html page를 렌더링하는 법을 간단하게 다뤄보자
Jinja란?
파이썬에서 가장 많이 사용되는 템플릿 엔진 중 하나이다.
템플릿 엔진 : 서버에서 받아온 데이터를 효과적으로 보여주는 중간 매체, 간략한 표현을 통해 효과적으로 데이터 가공
Jinja2 기본 문법
| {{...}} | 변수나 표현식을 선언할 때 쓴다 |
| {%...%} | if나 for문 같은 제어문을 작성할 때 쓴다. |
| {#...#} | 주석을 쓸 때 사용한다. |
Jinja2 제어 구조
< if 문 >
{% if <조건> %}
<실행코드>
{% elif <조건> %}
<실행코드>
{% else %}
<실행코드>
{% endif %}파이썬에서는 들여쓰기로 if문의 끝이 자동 판별 되지만 Jinja에서는 반드시 끝임을 선언해주어야 한다.
< for 문 >
{% for <개별요소 변수> in <리스트> %}
<실행코드>
{% endfor %}for문도 if문과 마찬가지로 끝을 선언해주아야 한다.
< block / extends, 템플릿 상속 >
flask 템플릿은 계층 구조이기 때문에 하나의 웹사이트는 일반적으로 동일한 테마를 갖는다. 여기에 있어서 페이지마다 매번 html 파일을 만들게 된다면 구성요소를 변경할 때 모든 파일을 일일이 수정해야 한다는 번거로움이 있다. Jinja2 템플릿은 동일 구성요소를 base.html로 구성하고 나머지 페이지들은 이를 상속 받아서 사용하게 함으로써 수정이 용이하게 한다. 아래 예제에서 살펴보자
예제
프로젝트 폴더 구조
Flask 구조와 동일하게 작성
app.py
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
@app.route('/')
def main():
return render_template('layout.html')
@app.route('/child')
def child():
return render_template('layout_child.html')
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)layout.html이 베이스 템플릿으로 부모 역할을 한다. /child로 들어갔을 때 자식에서 상속받은 것을 확인하도록 child 페이지를 만들어 주었다.
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Parent{% endblock %}</title>
</head>
<body>
This is Jinfa rendering extends html
{% block content %}
<h2>Hi! I'm Parent page</h2>
{% endblock %}
</body>
</html>방법은 간단하다 상속했을 때 자식쪽에서 수정 가능하게 하려는 부분은 { % block <블록 이름> %}{ % endblock %}으로 감싸주면 된다. 여기서는 title과 h2부분을 바꿀 수 있도록 블록을 만들어 놨다.
layout_child.html
{% extends "layout.html" %}
{% block title %}Child{% endblock %}
{% block content %}
<h2>Hi! I'm Child page</h2>
{% endblock %}상속받은 페이지 구성이 매우 간단한 것을 볼 수 있다. {% extends "layout.html" %}를 선언하면 layout.html을 상속받겠다는 것이고 블록을 사용하여 블록 안의 내용을 바꿀 수 있다.
결과
부모 페이지(layout.html)
자식 페이지(layout_chile.html)
자식 페이지를 보면 부모 페이지의 내용을 그대로 상속 받아 블록 안의 내용인 h2에 해당하는 내용만 바뀐 것을 알 수 있다.
'기타 공부들' 카테고리의 다른 글
| API(Application Programming Interface)란? (0) | 2021.11.07 |
|---|---|
| JWT(Json Web Token)란? (0) | 2021.11.07 |
| [Flask] Flask란? Flask 예제 (0) | 2021.11.03 |
| [Python Flask] 플라스크와 AJAX로 DB에 이미지 업로드, 다운로드 (0) | 2021.11.03 |
| [JavaScript] 로컬 디렉토리 이미지 Base64로 인코딩하기 (0) | 2021.11.03 |