1. Server Side Rendering
- 서버에서 페이지를 그려 client로 보낸 후 화면에 표시 (↔ client-side rendering)
- 서버 쪽에서 template HTML에 데이터 끼워넣어 완성된 형태의 HTML 보내주는 방법
- Rendering? template의 동적파트 (변수)를 입력값으로 바꿔 최종 응답값을 return
2. Jinja2
- python Flask package 중의 하나로 Flask에서 rendering에서 rendering을 위해 Jinja2 Template Engine을 사용
- 서버에서 받아온 데이터를 효과적으로 보여주며 비교적 간단하게 표현을 할 수 있음 (조건문, if문 등)
기본 문법
- 변수 : {{ }}
- if, for문 : {% %}
- 주석 : {# #}
- 상속 설정 : 서버에서 렌더링시 base template이 아닌 child template을 지정
코드 예시
Base Template
<!-- base template -->
{% block content %}{% endblock %}
<!-- Official Document -->
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyright 2008 by <a href="http://domain.invalid/">you</a>.
{% endblock %}
</div>
</body>
</html>
Child Template
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome to my awesome homepage.
</p>
{% endblock %}[ 출처 ]
https://jinja.palletsprojects.com/en/3.1.x/templates/
Template Designer Documentation — Jinja Documentation (3.1.x)
Template Designer Documentation This document describes the syntax and semantics of the template engine and will be most useful as reference to those creating Jinja templates. As the template engine is very flexible, the configuration from the application
jinja.palletsprojects.com
https://ddaaadd.tistory.com/276
jinja2란
Jinja2의 정의 Jinja2는 파이썬에서 가장 많이 사용되는 템플릿 엔진 중 하나입니다. Django의 템플릿 시스템에서 영감을 얻었지만 템플릿 작상자에게 더 강력한 도구 세트를 제공하는 표현 언어로
ddaaadd.tistory.com
https://salguworld.tistory.com/31
Python Flask Jinja2 템플릿 사용하기
파이썬 관련 포스팅 목록 더보기 [Python] Flask 엔드포인트 설정하기(Endpoint) [Python] Flask 웹 서버 구축하기 - 2(Linux Ubuntu 16.04 Flask Web Server) [Python] Flask 웹 서버 구축하기..
salguworld.tistory.com
'Review > SW Jungle' 카테고리의 다른 글
| [WEEK01] 배열과 자료구조 (python) (0) | 2022.09.25 |
|---|---|
| [WEEK01] 파이썬 개념 (0) | 2022.09.25 |
| [WEEK01] 특별한 과제 (0) | 2022.09.24 |
| [WEEK00~WEEK01] 쿠키, 세션, JWT (0) | 2022.09.21 |
| [WEEK00] 정글 5기 시작 및 오리엔테이션 & 발제 (0) | 2022.09.19 |
