Django Templates 기초: 초보자를 위한 완벽 가이드

안녕하세요, 여러분! 오늘은 Django Templates 기초에 대해 알아볼 거예요. Django로 웹 개발을 시작하셨나요? 아니면 시작하려고 고민 중이신가요? 어떤 경우든 Django 템플릿은 꼭 알아야 할 중요한 부분이에요. 처음에는 어려워 보일 수 있지만, 걱정 마세요! 이 포스트를 통해 Django Templates 기초를 쉽고 재미있게 배워볼 거예요.

Django Templates이란?

Django Templates는 HTML 페이지를 동적으로 생성하는 도구로, Django 프레임워크에서 웹 페이지의 표현(view) 부분을 담당합니다. 단순한 HTML 문서를 넘어서, 템플릿은 데이터베이스에서 가져온 정보나 동적인 데이터와 결합하여 사용자에게 맞춤화된 콘텐츠를 제공합니다. 이를 통해 프론트엔드와 백엔드의 연결고리 역할을 수행하며, 재사용성과 유지보수성을 높이는 데 큰 기여를 합니다.

주요 특징

1. 동적 데이터 표현
   • 템플릿 언어를 사용해 Python 데이터(문자열, 리스트, 객체 등)를 HTML 페이지에 표현할 수 있습니다.
   • 예: 데이터베이스에서 가져온 사용자 이름이나 제품 목록을 페이지에 표시.
2. 템플릿 언어
   • Django는 자체적인 템플릿 태그와 필터를 제공합니다.
   • 조건문, 반복문 등과 같은 기본 프로그래밍 구조를 HTML에 통합할 수 있습니다.
   • 예: {% if user.is_authenticated %} <p>Welcome, {{ user.username }}!</p> {% else %} <p>Please log in.</p> {% endif %}
3. 재사용 가능한 구성 요소
   • 템플릿은 include와 extends를 활용해 여러 페이지에서 공통 요소(예: 헤더, 푸터)를 재사용할 수 있습니다.
   • 예: 모든 페이지에 공통적으로 적용되는 기본 레이아웃 템플릿 작성.
4. 클라이언트-서버 협업
   • 서버에서 데이터를 준비하고 템플릿을 사용해 최종 HTML을 생성한 뒤, 클라이언트(브라우저)로 전달합니다.
   • 이로 인해 클라이언트는 복잡한 로직 없이 간단한 HTML 렌더링 결과를 받을 수 있습니다.

Django Templates의 역할

• 웹 페이지 설계도: 데이터와 로직을 분리하여, 개발자가 페이지의 콘텐츠와 디자인을 직관적으로 구성할 수 있습니다.
• 프론트엔드-백엔드 협력 강화: 백엔드 개발자는 데이터와 비즈니스 로직에 집중하고, 프론트엔드 개발자는 템플릿을 통해 디자인과 사용자 경험에 더 집중할 수 있습니다.

Django Templates 기초: 기본 구조 만들기

먼저, 프로젝트 디렉토리에 아래와 비슷한 구조로 ‘templates’ 폴더를 만들어봅시다.

myproject/
    ├── myapp/
    ├── myproject/
    ├── templates/
    └── manage.py

그리고 settings.py 파일에 templates 디렉토리를 추가해야 합니다. ‘DIRS’: [BASE_DIR / ‘templates’], (많은 분들이 여기서 실수를 많이 하시는데 꼭 콤마( , ) 를 잊지 마세요!)

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        ...
    },
]

첫 번째 Template 만들기

이제 templates 폴더 안에 home.html 파일을 만들어봅시다. 아래 예시는 일반 html 파일과 다르지 않습니다. Django Templates 기초적인 내용을 알려드린다는 관점에서 작성해 보았습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>My Django Site</title>
</head>
<body>
    <h1>안녕하세요, Django 세계에 오신 것을 환영합니다!</h1>
    <p>이것은 제 첫 번째 Django template입니다.</p>
</body>
</html>

Template 사용하기

template을 사용하려면 view에서 render 함수를 사용해야 합니다. views.py 파일에 다음과 같이 작성해보세요. # 이 있는 라인은 주석(설명)이니 참고만 하시면 됩니다.

# Django의 shortcuts 모듈에서 render 함수를 가져옵니다.
# render 함수는 지정된 템플릿 파일을 렌더링하여 HTTP 응답을 반환하는 데 사용됩니다.

from django.shortcuts import render

# 뷰 함수 정의: home
# 이 함수는 URL 요청에 응답하기 위해 호출됩니다.
# - request: Django에서 자동으로 전달되는 HttpRequest 객체로, 사용자의 요청 정보를 포함합니다.

def home(request):
    # render 함수:
    # - 첫 번째 인자: request 객체를 전달합니다.
    # - 두 번째 인자: 렌더링할 템플릿 파일의 이름('home.html')을 지정합니다.
    # - 세 번째 인자(선택 사항): 템플릿에 전달할 데이터(Context) 딕셔너리를 추가로 전달할 수 있습니다.
    # - 반환 값: 렌더링된 HTML을 포함한 HttpResponse 객체를 반환합니다.

    return render(request, 'home.html')

Template에 데이터 전달하기

view에서 template으로 데이터를 전달할 수 있습니다.

# home 뷰 함수 정의
# 사용자가 특정 URL에 접근하면 이 뷰 함수가 호출됩니다.
def home(request):
    # context 딕셔너리 생성
    # - 템플릿에 전달할 데이터를 정의합니다.
    # - 여기서는 'name' 키에 '철수'라는 값을 할당했습니다.
    # - 템플릿에서 {{ name }}으로 데이터를 접근할 수 있습니다.
    context = {'name': '철수'}
    return render(request, 'home.html', context)

그리고 template에서 이 데이터를 사용할 수 있습니다

# {{ }} 은 Django 템플릿 언어에서 사용하는 변수 표현식입니다.
# 뷰 함수에서 전달한 context 딕셔너리의 name 키 값을 참조합니다.
# 예: 뷰 함수에서 context = {'name': '철수'}로 전달된 경우, {{ name }}은 '철수'로 치환됩니다.

<h1>안녕하세요, {{ name }}님!</h1>

Template 태그 사용하기

Django Templates 언어는 HTML과 동적 데이터를 결합하기 위해 템플릿 태그와 변수 표현식을 제공합니다. 다양한 태그들을 하나씩 설명하겠습니다.

1. {% if … %} / {% else %} / {% endif %}

• 조건문 태그로, 특정 조건에 따라 HTML 콘텐츠를 분기 처리할 수 있습니다.
• if 태그 안에 조건식을 작성하며, else는 조건이 충족되지 않을 때 실행되는 부분입니다.
• endif로 조건문을 종료합니다.

예제 코드

{% if user.is_authenticated %}
    <p>환영합니다, {{ user.username }}님!</p>
{% else %}
    <p>로그인해주세요.</p>
{% endif %}

작동 방식

• user.is_authenticated:
  • Django에서 제공하는 사용자 객체(user)의 속성으로, 사용자가 인증되었는지 여부를 반환합니다.
• 조건에 따라:
  • 사용자가 로그인 상태라면: <p>환영합니다, [사용자 이름]님!</p> 출력.
  • 비로그인 상태라면: <p>로그인해주세요.</p> 출력.

2. {% for … in … %} / {% endfor %}

• 반복문 태그로, 리스트나 쿼리셋과 같은 반복 가능한 객체를 순회하며 HTML 콘텐츠를 동적으로 생성합니다.
• for 태그 안에 반복할 객체를 지정하며, endfor로 반복문을 종료합니다.

예제 코드

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

작동 방식

• items
  • context 딕셔너리에서 전달된 리스트 또는 쿼리셋입니다.
• 반복 처리
  • items에 있는 각 요소(item)를 <li> 태그 안에 삽입하여 출력합니다.
• 예를 들어, context = {'items': ['사과', '바나나', '체리']}인 경우: <ul> <li>사과</li> <li>바나나</li> <li>체리</li> </ul>

3. {{ … }} (변수 표현식)

• 변수 표현식은 context에서 전달된 데이터를 출력하는 역할을 합니다.
• 중괄호({{ }}) 안에 변수 이름을 작성하면 해당 값을 템플릿에 표시합니다.

예제 코드

<p>환영합니다, {{ user.username }}님!</p>

작동 방식

• user.username
  • context에서 전달된 user 객체의 username 속성을 출력합니다.
• 예를 들어, user.username = '철수'인 경우: <p>환영합니다, 철수님!</p>

태그 요약 및 추가 설명

Django 템플릿 언어의 장점

1. 코드와 디자인 분리: HTML과 Python 코드를 분리하여 유지보수를 쉽게 만듭니다.
2. 직관적인 문법: Python 개발자가 쉽게 익힐 수 있는 직관적인 문법을 제공합니다.
3. 동적 콘텐츠 생성: 반복문과 조건문으로 유연하게 데이터를 처리하여 사용자 맞춤 콘텐츠를 제공합니다.
4. 재사용 가능성: include, extends, block 태그로 템플릿 재사용성을 극대화합니다.

Template 필터 사용하기

Django 템플릿 필터는 변수의 출력을 수정하거나 변형하는 데 사용되는 도구입니다. 파이프(|) 기호를 사용하여 변수에 적용하며, 템플릿에서 데이터를 간단하고 직관적으로 조작할 수 있게 해줍니다.

예제 설명

django복사편집<p>제목: {{ title|upper }}</p>
<p>내용: {{ content|truncatewords:30 }}</p>

1. {{ title|upper }}:
   • title 변수의 문자열을 모두 대문자로 변환합니다.
   • 예: title = "Hello World"라면 결과는 HELLO WORLD입니다.
2. {{ content|truncatewords:30 }}:
   • content 변수의 문자열을 단어 기준으로 최대 30단어로 자릅니다.
   • 긴 텍스트를 요약하거나 표시 공간을 제한할 때 유용합니다.
   • 예: content = "This is a long text with many words..."라면 결과는 This is a long text with...입니다.

정적 파일 다루기

CSS, JavaScript, 이미지 같은 정적 파일을 다루려면 {% load static %} 태그를 사용합니다:

{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<img src="{% static 'images/logo.png' %}" alt="로고">

URL 처리하기

template에서 URL을 하드코딩하는 대신 {% url %} 태그를 사용하세요:

<a href="{% url 'home' %}">홈으로</a>

이렇게 하면 URL 설정이 변경되어도 template을 수정할 필요가 없습니다.

마무리

이상으로 Django templates 기초에 대해 알아보았습니다. templates를 활용하면 동적이고 유연한 웹 페이지를 쉽게 만들 수 있습니다. 다음 단계로는 template 상속을 배워보시면 좋겠습니다. template 상속을 사용하면 코드 중복을 줄이고 웹사이트의 구조를 더욱 체계적으로 관리할 수 있습니다.

Django templates는 처음에는 복잡해 보일 수 있지만, 조금만 연습하면 금방 익숙해질 거예요. 계속 실습하면서 templates의 다양한 기능을 탐험해보세요. 화이팅!

참고로, Django의 핵심 기능을 전체적으로 보시고 싶으면, Django MTV 패턴 마스터하기: Models, Views, Templates, Forms 완벽 가이드 포스트를 확인해 보시기 바랍니다.