Jinja를 이용해서 동적으로 html 생성하기

Jinja를 이용해서 동적으로 html 생성하기

Python
Jinja
Web
DevOps
Jinja를 이용해서 동적으로 html 생성하기
Author

gabriel yang

Published

October 9, 2024


Jinja를 사용하는 이유와 소개

Jinja는 Python에서 자주 사용되는 템플릿 엔진으로, HTML, XML, YAML과 같은 문서에서 동적 콘텐츠를 쉽게 렌더링할 수 있게 해줍니다. 특히 Flask와 같은 웹 프레임워크와 함께 사용되어 웹 애플리케이션에서 동적 페이지를 생성할 때 유용합니다.

Jinja의 주요 특징은 다음과 같습니다:

  1. 동적 콘텐츠 렌더링: Jinja는 변수, 조건문, 반복문 등을 사용하여 HTML 페이지에서 동적으로 콘텐츠를 생성할 수 있습니다.
  2. 템플릿 상속: HTML 문서에서 재사용 가능한 구조를 정의할 수 있으며, 이를 상속받아 페이지마다 다른 부분만 변경할 수 있습니다.
  3. 안전한 템플릿 엔진: Jinja는 기본적으로 HTML 이스케이프를 지원하여 XSS(교차 사이트 스크립팅) 공격을 방지합니다.
  4. 유연성과 확장성: 다양한 필터와 함수가 내장되어 있어, 데이터를 변형하거나 처리하는 데 유용합니다.

Jinja의 기본 사용법

Jinja는 주로 템플릿 파일과 Python 데이터를 결합하여 HTML 문서를 생성합니다. Jinja의 문법은 사용하기 쉽고, 매우 직관적입니다.

Jinja 템플릿 파일과 Python 파일의 구조: 프로젝트 설정 가이드

Jinja는 Python에서 HTML 파일을 동적으로 생성하는 강력한 템플릿 엔진입니다. 웹 애플리케이션을 개발할 때, Jinja 템플릿과 Python 파일을 올바르게 구조화하는 것이 중요합니다. 이 글에서는 Jinja 템플릿과 Python 파일의 기본적인 디렉토리 구조와 그 위치에 대해 설명하고, 이 구조가 어떻게 상호작용하는지 알아보겠습니다.

프로젝트 구조

웹 애플리케이션에서 Jinja 템플릿 파일을 Python 코드와 함께 사용할 때는 아래와 같은 디렉토리 구조를 사용하는 것이 일반적입니다.

project_root/
│
├── app/
│   ├── views.py
│   └── other_python_files.py
│
├── templates/
│   ├── index.html
│   └── other_templates.html
│
└── main.py

디렉토리 설명

  • project_root/: 프로젝트의 최상위 디렉토리로, 전체 애플리케이션이 포함되는 디렉토리입니다.
  • app/: Python 파일이 포함된 디렉토리입니다. 이 디렉토리 안에는 애플리케이션의 로직을 담당하는 모듈, 라우팅과 같은 중요한 파일들이 포함됩니다.
    • views.py: Flask와 같은 웹 프레임워크를 사용할 경우, 이 파일에서 HTTP 요청을 처리하고 적절한 템플릿을 렌더링하는 함수들이 작성됩니다.
  • templates/: Jinja 템플릿 파일들이 저장되는 디렉토리입니다. Flask는 기본적으로 이 templates/ 디렉토리를 찾아 HTML 파일을 로드합니다.
    • index.html: 메인 페이지를 위한 템플릿 파일입니다.
  • main.py: 프로젝트의 진입점 파일입니다. Flask와 같은 웹 프레임워크를 사용하여 웹 서버를 시작하고, 필요한 라우팅과 템플릿 렌더링을 관리하는 코드가 포함됩니다.

Jinja 템플릿과 Python 파일의 상호작용

이제 Jinja 템플릿과 Python 파일이 어떻게 서로 연결되는지 살펴보겠습니다. 일반적으로 Python 파일에서 Jinja 템플릿을 렌더링하여 사용자에게 HTML 페이지를 반환합니다.

1. 템플릿 HTML 파일 (templates/index.html)

<!-- templates/index.html -->
<!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>Welcome to {{ title }}!</h1>
    <p>This is a simple page rendered using Jinja and Python.</p>
</body>
</html>

위 HTML 파일은 Jinja 템플릿으로, Python

예제 1: 간단한 HTML 템플릿 렌더링

Jinja 템플릿은 Python의 데이터를 삽입하여 HTML을 렌더링할 수 있습니다. 아래는 Jinja 템플릿을 사용하는 간단한 예제입니다.

1. Jinja 설치

먼저 Jinja2를 설치해야 합니다.

pip install Jinja2

2. 템플릿 작성

template.html 파일에 Jinja 템플릿을 작성합니다.

<!-- template.html -->
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <h1>{{ heading }}</h1>
    <ul>
      {% for item in items %}
        <li>{{ item }}</li>
      {% endfor %}
    </ul>
  </body>
</html>

이 템플릿 파일에서 {{ }}는 변수를 출력하는 구문이며, {% %}는 Jinja의 제어 흐름 (조건문, 반복문 등)을 나타냅니다.

3. Python 코드에서 템플릿 렌더링

이제 Python 코드에서 위 템플릿을 렌더링해 보겠습니다.

from jinja2 import Environment, FileSystemLoader

# Jinja 환경 설정 (템플릿 파일이 위치한 폴더 지정)
env = Environment(loader=FileSystemLoader('templates'))

# 템플릿 파일 로드
template = env.get_template('template.html')

# 템플릿에 전달할 데이터
data = {
    'title': 'Jinja Template Example',
    'heading': 'My Item List',
    'items': ['Apple', 'Banana', 'Cherry']
}

# 템플릿 렌더링
rendered_html = template.render(data)

# 렌더링된 HTML 출력
print(rendered_html)

결과: 위 코드를 실행하면 다음과 같은 HTML 문서가 생성됩니다.

<html>
  <head>
    <title>Jinja Template Example</title>
  </head>
  <body>
    <h1>My Item List</h1>
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Cherry</li>
    </ul>
  </body>
</html>

Jinja의 주요 기능

1. 변수 출력

Jinja 템플릿에서 변수는 {{ variable_name }} 형태로 사용됩니다.

<p>Hello, {{ name }}!</p>

위와 같은 템플릿은 name이라는 변수를 받아서 출력합니다.

2. 조건문

Jinja는 if 문을 사용하여 조건부 로직을 처리할 수 있습니다.

{% if is_logged_in %}
  <p>Welcome back, {{ user_name }}!</p>
{% else %}
  <p>Please log in.</p>
{% endif %}

3. 반복문

리스트와 같은 데이터를 반복하여 HTML을 생성할 수 있습니다.

<ul>
  {% for item in items %}
    <li>{{ item }}</li>
  {% endfor %}
</ul>

4. 필터

Jinja는 변수에 필터를 적용하여 데이터를 변형할 수 있습니다. 예를 들어, capitalize 필터는 문자열의 첫 글자를 대문자로 변환합니다.

<p>{{ name | capitalize }}</p>

이 외에도 upper, lower, length와 같은 다양한 필터가 제공됩니다.

5. 템플릿 상속

Jinja의 강력한 기능 중 하나는 템플릿 상속입니다. 공통 레이아웃을 가진 기본 템플릿을 정의하고, 페이지별로 상속받아 재사용할 수 있습니다.

기본 템플릿 (base.html)

<html>
  <head>
    <title>{% block title %}Default Title{% endblock %}</title>
  </head>
  <body>
    <header>
      <h1>Website Header</h1>
    </header>

    <main>
      {% block content %}{% endblock %}
    </main>

    <footer>
      <p>Website Footer</p>
    </footer>
  </body>
</html>

상속된 템플릿 (home.html)

{% extends 'base.html' %}

{% block title %}Home Page{% endblock %}

{% block content %}
  <p>Welcome to the homepage!</p>
{% endblock %}

상속받은 템플릿에서 block을 정의하여 상위 템플릿의 구조를 유지하면서, 개별 페이지의 내용만 수정할 수 있습니다.

Jinja를 사용하는 이유

  1. 코드와 템플릿의 분리: Jinja를 사용하면, 비즈니스 로직과 UI 코드를 분리할 수 있어 유지보수와 확장이 쉬워집니다.
  2. 간결한 문법: HTML과 템플릿 로직을 직관적으로 처리할 수 있는 간결한 문법을 제공합니다.
  3. 재사용성: 템플릿 상속을 통해 재사용 가능한 구조를 만들 수 있어, 중복된 코드를 줄이고 코드의 가독성을 높입니다.
  4. 확장 가능성: 사용자 정의 필터와 함수로 템플릿 엔진을 확장하여 다양한 용도로 활용할 수 있습니다.

결론

Jinja는 Python 웹 애플리케이션 개발에서 동적 웹 페이지를 생성할 때 매우 유용한 템플릿 엔진입니다. 간단한 문법과 강력한 기능을 통해 코드와 템플릿을 효율적으로 분리할 수 있으며, 확장성 높은 애플리케이션을 구축하는 데 도움을 줍니다.