Template

MTV 패턴에서의 Template

Template은 Django MTV(Model-Template-View) 패턴에서 사용자에게 보여지는 UI 부분을 담당하는 컴포넌트입니다.

HTML과 Django Template Language(DTL)를 사용하여 동적인 웹 페이지를 생성합니다.

Template의 주요 특징

•

HTML 코드 안에 파이썬 변수와 로직을 삽입할 수 있습니다

•

코드 재사용을 위한 템플릿 상속 기능을 제공합니다

•

필터와 태그를 통해 데이터 출력 형식을 제어할 수 있습니다

Template 예시 코드

1. 기본 템플릿 구조

<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Site{% endblock %}</title>
</head>
<body>
    <div class="content">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>
HTML
복사

2. 템플릿 상속 예시

<!-- home.html -->
{% extends 'base.html' %}

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

{% block content %}
    <h1>Welcome, {{ user.username }}</h1>
    <ul>
    {% for item in items %}
        <li>{{ item.name }}</li>
    {% endfor %}
    </ul>
{% endblock %}
HTML
복사

3. View와 Template 연결

# views.py
from django.shortcuts import render

def home_view(request):
    context = {
        'user': request.user,
        'items': Item.objects.all()
    }
    return render(request, 'home.html', context)
Python
복사

Template 문법

기능	문법	설명
변수 출력	{{ variable }}	컨텍스트에서 전달된 변수 값을 출력
필터	{{ variable\|filter }}	변수 값을 변환하거나 포맷팅
제어문	{% if/for/while %}	조건문과 반복문을 통한 로직 처리
템플릿 태그	{% tag_name %}	템플릿 상속, 포함 등 특수 기능 수행

Django 템플릿 필터 목록

필터	설명
length	시퀀스의 길이 반환
lower	소문자로 변환
upper	대문자로 변환
capfirst	첫 글자를 대문자로 변환
title	모든 단어의 첫 글자를 대문자로 변환
truncatechars:N	문자열을 N자 이하로 잘라줌
truncatewords:N	문자열을 N단어 이하로 잘라줌
linebreaksbr	줄바꿈을 <br>로 변환
linebreaks	줄바꿈을 <p>와 <br>로 변환
striptags	HTML 태그 제거
safe	HTML을 이스케이프하지 않고 출력
default:"값"	값이 비어 있을 때 기본값 사용
default_if_none:"값"	값이 None일 때 기본값 사용
date:"형식"	날짜 포맷 지정 (Y-m-d, D d M Y 등)
time:"형식"	시간 포맷 지정
timesince	시간 차를 사람 읽기 쉬운 형식으로 표시
add:N	숫자에 N 더함
divisibleby:N	N으로 나누어 떨어지는지 확인
join:"구분자"	리스트를 문자열로 연결
yesno:"예,아니오"	불리언 값을 지정한 문자열로 변환
filesizeformat	바이트 값을 읽기 쉬운 파일 크기로 변환
pluralize	단어 뒤에 복수형을 자동으로 붙임 (s 등)

1. 변수 출력

{{ variable_name }}
HTML
복사

변수의 값을 템플릿에 출력합니다. View에서 전달된 context 딕셔너리의 키에 접근할 수 있습니다.

2. 필터

{{ variable|lower }}
{{ variable|length }}
{{ variable|date:"Y-m-d" }}
HTML
복사

파이프(|) 문자를 사용하여 변수의 출력 형식을 변경하거나 가공할 수 있습니다. 여러 필터를 체이닝하여 사용할 수 있습니다.

3. 제어문

•

if

•

for

•

while

if 문

{% if user.is_authenticated %}
    <p>환영합니다, {{ user.username }}!</p>
{% else %}
    <p>로그인이 필요합니다.</p>
{% endif %}
HTML
복사

조건에 따라 다른 내용을 출력할 수 있습니다. else와 elif도 사용 가능합니다.

for 문

{% for item in items %}
    <li>{{ item.name }}</li>
{% empty %}
    <li>항목이 없습니다.</li>
{% endfor %}
HTML
복사

리스트나 쿼리셋의 각 항목을 반복하여 출력할 수 있습니다. empty 태그로 리스트가 비어있을 때의 처리도 가능합니다.

while 문

{% with value=5 %}
{% while value > 0 %}
    <p>카운트다운: {{ value }}</p>
    {% with value=value|add:"-1" %}
{% endwhile %}
{% endwith %}
HTML
복사

조건이 참인 동안 반복하여 출력합니다. Django 기본 템플릿 태그에는 없으며, 커스텀 템플릿 태그로 구현해야 합니다.

4. 템플릿 태그

{% extends "base.html" %}
{% include "navbar.html" %}
{% url 'view-name' arg1 arg2 %}
{% csrf_token %}
{% load static %}
HTML
복사

템플릿의 구조를 제어하고 특별한 기능을 수행하는 태그들입니다. 템플릿 상속, 다른 템플릿 포함, URL 생성, 보안 토큰 생성, 정적 파일 로드 등의 기능을 제공합니다.

모범 사례

•

템플릿 파일은 앱 디렉토리 내의 templates 폴더에 저장

•

재사용 가능한 컴포넌트는 별도의 템플릿 파일로 분리

•

복잡한 로직은 view에서 처리하고 템플릿은 출력에 집중

•

템플릿 상속을 활용하여 코드 중복 최소화

이러한 Template 시스템을 통해 Django는 효율적이고 유지보수가 용이한 프론트엔드 개발을 지원합니다.

Template을 활용한 레이아웃 재사용

Django Template 시스템을 사용하여 header, content, footer와 같은 공통 레이아웃을 효율적으로 재사용할 수 있습니다.

1. 기본 레이아웃 템플릿 생성

<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <header>
        {% block header %}
        <!-- 공통 헤더 내용 -->
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
        {% endblock %}
    </header>

    <main>
        {% block content %}
        <!-- 각 페이지별 컨텐츠가 들어갈 자리 -->
        {% endblock %}
    </main>

    <footer>
        {% block footer %}
        <!-- 공통 푸터 내용 -->
        <p>&copy; 2025 My Website</p>
        {% endblock %}
    </footer>
</body>
</html>
HTML
복사

2. 레이아웃 상속 예시

<!-- templates/home.html -->
{% extends "base.html" %}

{% block title %}홈페이지{% endblock %}

{% block content %}
    <h1>환영합니다!</h1>
    <p>이 곳에 페이지별 고유한 컨텐츠가 들어갑니다.</p>
{% endblock %}
HTML
복사

이러한 구조를 통해 header와 footer는 모든 페이지에서 공통으로 사용하면서, content 영역만 페이지별로 다르게 구성할 수 있습니다. 또한 필요한 경우 각 블록을 개별적으로 오버라이드할 수 있습니다.

레이아웃 재사용의 장점

•

코드 중복을 최소화하여 유지보수가 용이

•

사이트 전체의 일관된 디자인 유지 가능

•

공통 요소 수정 시 한 곳만 변경하면 전체 적용

•

각 페이지별 커스터마이징 유연성 제공

humanize

Django의 humanize는 숫자나 날짜를 사람이 읽기 쉬운 자연어 형태로 표시해주는 템플릿 필터 모음입니다. 아래는 humanize를 활성화하고 사용하는 방법, 그리고 필터 정리표입니다.

1. humanize 사용 준비

1단계. 앱 설정:

INSTALLED_APPS에 'django.contrib.humanize' 추가:

INSTALLED_APPS = [
    ...
    'django.contrib.humanize',
]
Python
복사

2단계. 템플릿에서 로드:

템플릿 상단에 필터 로딩 선언:

{% load humanize %}
Plain Text
복사

2. humanize 필터 정리표

필터	설명
intcomma	천 단위 콤마 추가 (1000000 → 1,000,000)
intword	숫자를 단위로 변환 (1000000 → 1.0 million)
apnumber	1~9를 영어 철자로 표시 (1 → one)
naturalday	오늘, 어제, 날짜로 표현
naturaltime	지금 기준 상대적 시간 (3 minutes ago)
ordinal	서수로 표시 (1 → 1st, 2 → 2nd)
naturaldate	날짜를 자연어로 (장고 4.0+)
floatformat	소수점 자리수 제한 (`{{ value

사용 예시

{% load humanize %}

<p>조회수: {{ post.views|intcomma }}</p>
<p>업로드: {{ post.created_at|naturaltime }}</p>
<p>용량: {{ file.size|intword }}</p>
<p>서수: {{ forloop.counter|ordinal }}</p>
Plain Text
복사