hy30nq's blog

Flask Jinja2 템플릿 엔진 사용법 가이드 본문

Web/web dev

Flask Jinja2 템플릿 엔진 사용법 가이드

hy30nq 2024. 6. 15. 14:45
728x90

안녕하세요! 오늘은 Flask에서 사용하는 Jinja2 템플릿 엔진에 대해 알아볼게요. Jinja2는 웹 페이지를 동적으로 생성할 수 있게 도와주는 템플릿 엔진이에요. 웹 개발을 더욱 효율적으로 할 수 있도록 도와준답니다.

1. 템플릿 디렉토리 구조

Flask에서는 템플릿 파일들을 templates라는 디렉터리에 저장해요. 이 디렉터리 안에 HTML 파일들을 넣어서 사용할 수 있답니다.

2. 기본 사용법

템플릿에서는 변수를 출력할 때 {{ var }}를 사용해요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Jinja2 Example</title>
</head>
<body>
    <h1>안녕하세요, {{ name }}!</h1>
</body>
</html>

3. 변수와 제어문

템플릿 내에서는 제어문도 사용할 수 있어요. 예를 들어 조건문은 이렇게 작성할 수 있답니다.

{% if name %}
    <h1>안녕하세요, {{ name }}님!</h1>
{% else %}
    <h1>안녕하세요, 손님!</h1>
{% endif %}

4. 템플릿 필터

필터를 사용하면 변수를 더욱 편리하게 조작할 수 있어요. Jinja2에서는 다양한 필터를 제공한답니다. 몇 가지 주요 필터를 소개할게요.

  • safe : HTML 태그를 이스케이프 하지 않음
  • capitalize : 문자열의 첫 글자를 대문자로 변환
  • lower : 문자열을 소문자로 변환
  • upper : 문자열을 대문자로 변환
  • title : 각 단어의 첫 글자를 대문자로 변환
  • trim : 문자열 앞뒤의 공백을 제거
  • striptags : HTML 태그를 제거
  • truncate : 문자열을 특정 길이로 줄임
  • date : datetime 객체를 문자열로 포맷

예시를 통해 필터 사용법을 알아볼까요?

<p>{{ user_name | safe }}</p>          <!-- "<b>John</b>" -> "<b>John</b>" -->
<p>{{ user_name | capitalize }}</p>    <!-- "john" -> "John" -->
<p>{{ user_name | lower }}</p>         <!-- "JOHN" -> "john" -->
<p>{{ user_name | upper }}</p>         <!-- "john" -> "JOHN" -->
<p>{{ user_name | title }}</p>         <!-- "john doe" -> "John Doe" -->
<p>{{ user_name | trim }}</p>          <!-- "   john   " -> "john" -->
<p>{{ user_name | striptags }}</p>     <!-- "<b>john</b>" -> "john" -->
<p>{{ user_name | truncate(5) }}</p>   <!-- "johnathan" -> "jo..." -->
<p>{{ user_birthday | date('Y-m-d') }}</p> <!-- datetime 객체 -> "2023-06-15" -->

5. 반복문

리스트와 같은 자료형을 템플릿에서 반복문으로 처리할 수 있어요.

<ul>
    {% for fruit in fruits %}
        <li>{{ fruit }}</li>
    {% endfor %}
</ul>

6. 매크로

매크로는 파이썬의 함수와 비슷하게 사용할 수 있는 기능이에요. 반복되는 코드를 줄여서 템플릿을 깔끔하게 관리할 수 있답니다.

{% macro input(name, value='', type='text') %}
    <input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}

<form>
    {{ input('username') }}
    {{ input('email', type='email') }}
</form>

이제 Flask와 Jinja2 템플릿 엔진을 활용해 동적인 웹 페이지를 쉽게 만들 수 있을 거예요. 실제로 Flask 코드와 함께 사용한 예제를 볼까요?

from flask import Flask, render_template
from datetime import datetime

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', name='홍길동', fruits=['사과', '바나나', '체리'], user_birthday=datetime.now())

if __name__ == '__main__':
    app.run(debug=True)

index.html 템플릿 파일을 templates 디렉토리에 넣고 위의 코드를 실행해보세요. 웹 브라우저에서 http://127.0.0.1:5000/ 을 열면 동적으로 생성된 웹 페이지를 확인할 수 있답니다.

 

728x90
저작자표시 비영리 변경금지

'Web > web dev' 카테고리의 다른 글

Flask로 정적 파일 제공하기: 이미지 파일 제공 예시  (0) 2024.06.17
Flask 템플릿 상속으로 효율적인 웹 페이지 만들기  (0) 2024.06.17
Flask에서 make_response() 함수 사용하기: 예시와 함께 알아보기  (0) 2024.06.14
Flask에서 `jsonify()`를 사용하는 이유와 예시  (0) 2024.06.14
Flask에서 요청 처리하는 방법  (0) 2024.06.14
'Web/web dev' Related Articles more