Python/Python Flask

Flask Jinja2 템플릿 상속으로 템플릿 구조화하기

임베디드 친구 2025. 8. 31. 13:57
728x90
반응형

Flask Jinja2 템플릿 상속으로 템플릿 구조화하기

웹 애플리케이션을 개발할 때, 코드와 템플릿의 재사용성은 유지보수와 개발 생산성을 높이는 중요한 요소입니다. Flask는 Jinja2 템플릿 엔진을 사용하며, 이를 통해 강력한 템플릿 상속 기능을 제공합니다. 이번 포스팅에서는 Jinja2 템플릿 상속을 활용해 템플릿을 구조화하고 재사용성을 높이는 방법을 배워보겠습니다.

템플릿 상속이란?

Jinja2의 템플릿 상속은 기본 템플릿(base template)을 정의하고, 이를 상속받아 특정 페이지에 필요한 내용을 확장하거나 변경할 수 있도록 하는 기능입니다. 이 방식은 HTML 코드를 중복해서 작성할 필요를 줄이고, 템플릿 구조를 명확히 하며, 유지보수를 용이하게 만듭니다.

템플릿 상속의 기본 구조

  1. 기본 템플릿 정의: 공통 레이아웃을 정의하는 파일입니다. 예를 들어, 헤더, 네비게이션 바, 푸터와 같은 요소를 포함합니다.
  2. 블록 정의: 기본 템플릿에서 확장 가능하거나 변경 가능한 영역을 block으로 정의합니다.
  3. 확장 템플릿 생성: 기본 템플릿을 상속받아 필요한 내용을 덮어씁니다.

예제: Jinja2 템플릿 상속 구현

1. 기본 템플릿 생성

templates/base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}기본 제목{% endblock %}</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <header>
        <h1>웹 애플리케이션</h1>
        <nav>
            <ul>
                <li><a href="/">홈</a></li>
                <li><a href="/about">소개</a></li>
                <li><a href="/contact">연락처</a></li>
            </ul>
        </nav>
    </header>

    <main>
        {% block content %}
        <p>기본 콘텐츠 영역입니다.</p>
        {% endblock %}
    </main>

    <footer>
        <p>&copy; 2025 웹 애플리케이션</p>
    </footer>
</body>
</html>

2. 확장 템플릿 생성

templates/home.html:

{% extends "base.html" %}

{% block title %}홈{% endblock %}

{% block content %}
<h2>홈페이지에 오신 것을 환영합니다!</h2>
<p>여기는 홈페이지 콘텐츠가 들어갈 자리입니다.</p>
{% endblock %}

templates/about.html:

{% extends "base.html" %}

{% block title %}소개{% endblock %}

{% block content %}
<h2>소개</h2>
<p>이 웹 애플리케이션에 대한 소개 페이지입니다.</p>
{% endblock %}

3. Flask 애플리케이션에서 템플릿 렌더링

app.py:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/about')
def about():
    return render_template('about.html')

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

코드 분석

  1. base.html에서 <title><main>의 콘텐츠는 block 태그로 정의되어 있습니다. 이는 해당 블록이 확장 템플릿에서 덮어써질 수 있음을 의미합니다.
  2. home.htmlabout.html은 각각 base.html을 상속받고, titlecontent 블록의 내용을 덮어써서 자신만의 콘텐츠를 제공합니다.
  3. Flask의 render_template 함수를 통해 해당 템플릿을 렌더링합니다.

템플릿 상속의 장점

  • 코드 중복 감소: 공통 레이아웃을 한 곳에서 관리하므로 중복된 HTML 코드 작성이 줄어듭니다.
  • 유지보수 용이성: 레이아웃 변경이 필요할 경우, 기본 템플릿만 수정하면 모든 관련 템플릿에 변경 사항이 반영됩니다.
  • 구조적 설계: 템플릿 상속을 사용하면 파일 간의 역할과 구조가 명확해집니다.

추가 기능: 블록 중첩

Jinja2는 블록을 중첩할 수 있습니다. 예를 들어, 콘텐츠 내에서 또 다른 블록을 정의할 수도 있습니다.

base.html 수정:

<main>
    {% block content %}
        <div>
            {% block inner_content %}
            기본 내부 콘텐츠
            {% endblock %}
        </div>
    {% endblock %}
</main>

home.html 수정:

{% block content %}
<div>
    <h2>홈페이지 내부 콘텐츠</h2>
    {% block inner_content %}
    <p>홈페이지의 추가 정보</p>
    {% endblock %}
</div>
{% endblock %}

이렇게 하면 기본 콘텐츠 구조를 유지하면서도 세부 내용을 커스터마이징할 수 있습니다.

결론

Jinja2 템플릿 상속은 Flask 애플리케이션 개발에서 효율성을 높이는 핵심 기능입니다. 이번 포스팅에서는 기본적인 템플릿 상속 구조와 사용법을 살펴보았습니다. 이를 활용하면 템플릿 재사용성을 극대화하고 유지보수를 간소화할 수 있습니다. 앞으로 템플릿을 설계할 때 이러한 구조화를 적극적으로 활용해 보세요!

반응형