[Flask] 초간단! HTML과 Jinja2
2024. 1. 30. 21:34ㆍBE/Flask
728x90
본 포스팅에서는 Python 기반의 템플릿 엔진으로, 주로 웹 애플리케이션의 프론트엔드와 백엔드 사이에서 동적인 컨텐츠를 생성하는 데 사용되는 Jinja2에 대해 알아보겠습니다.
중요한 키워드인 "템플릿 엔진" 에 대해 알아보겠습니다.
"템플릿 엔진"을 chatGPT에게 물어보면 아래와 같이 대답합니다.
템플릿 엔진은 동적인 콘텐츠를 생성하기 위한 마크업 언어와 로직을 조합한 도구입니다. 주로 웹 개발에서 사용되며, 정적인 HTML 코드 내에 동적인 데이터를 삽입하고 제어할 수 있게 도와줍니다. 템플릿 엔진은 서버 측에서 실행되어 클라이언트에게 동적인 HTML을 전송하는 데 사용됩니다.즉, HTML과 같이 정적인 웹페이지에서 동적인 데이터를 삽입하고 제어할 수 있게 해주는 역할을 수행한다는 것을 알 수 있습니다. 통상적으로 Flask는 jinja2 템플릿 엔진을 많이 사용합니다. Flask에서 jinja2를 이용해서 클라이언트(HTML 웹페이지)와 통신하는 간단한 예제를 알아보겠습니다.먼저 아래와 같이 Flask 서버를 정의합니다. 홈페이지로 라우팅하게되면, "template.html"을 이용하여 웹페이지에 보여주고, "title", "greeting", "items"라는 변수를 전달합니다.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
title = 'Jinja2 Example'
greeting = 'Hello, World!'
items = ['Item 1', 'Item 2', 'Item 3']
return render_template('template.html', title=title, greeting=greeting, items=items)
if __name__ == '__main__':
app.run(debug=True)아래와 같이 Flask서버로부터 전달받은 데이터를 웹페이지에서 사용하게 되는데, 중괄호({{ }})를 사용하여 변수를 받아올 수 있고, 백틱(`{% %}`)을 사용하여 제어문과 반복문을 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
<h1>{{ greeting }}</h1>
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
</body>
</html>'BE > Flask' 카테고리의 다른 글
| [Flask] 초간단! HTML과 Flask 통신 - 3 (1) | 2024.02.04 |
|---|---|
| [Flask] 초간단! HTML과 Flask 통신 - 2 (2) | 2024.01.29 |
| [Flask] 초간단! HTML과 Flask 통신 - 1 (1) | 2024.01.29 |