필터는 Django 개발에서 정말 유용한 기능입니다. Django에는 다양한 내장 필터가 제공되며, 필요에 따라 직접 커스텀 필터를 만들어 프로젝트의 어떤 템플릿 파일에서든 자유롭게 사용할 수 있습니다. 필터는 HTML에서 소문자를 대문자로 변환하는 것처럼 데이터를 원하는 형태로 가공할 때 활용됩니다.
이 글에서는 Django에서 커스텀 템플릿 필터 태그를 만드는 방법을 단계별로 알아보겠습니다.
예제: 프로젝트 기본 설정
먼저 Django 프로젝트와 앱을 생성합니다. 그다음 앱의 루트 디렉터리에 templates 폴더와 templatetags 폴더를 추가합니다. 완성된 프로젝트 구조는 아래와 같습니다.
example은 우리가 만든 앱이고, tutorial은 프로젝트 이름입니다.
settings.py의 TEMPLATES 변수가 아래와 같이 설정되어 있는지 확인합니다.
import os
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'example/templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
settings.py의 INSTALLED_APPS 목록에 "example"을 추가합니다. 이렇게 하면 templates 폴더가 인식됩니다.
templates 폴더 안에 home.html 파일을 생성합니다. 일단은 비워 두고 진행합니다.
뷰(View) 작성하기
example 앱의 views.py에 아래 코드를 추가합니다.
from django.shortcuts import render
# Create your views here.
def main(request):
return render(request,"home.html")
여기서는 main 뷰에서 메인 프론트엔드 페이지를 단순히 렌더링하고 있습니다.
URL 설정하기
프로젝트의 urls.py에 아래 코드를 추가합니다.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('',include('example.urls')),
path('admin/', admin.site.urls),
]
앱의 urls.py를 메인 URL 설정에 포함시키는 과정입니다.
이어서 example 앱의 urls.py에 아래 코드를 작성합니다.
from django.urls import path,include
from . import views
urlpatterns = [
path('', views.main,name="main")
]
기본 경로 URL을 설정하고 main 뷰를 연결하는 역할을 합니다.
커스텀 필터 만들기
templatetags 폴더 안에 __init__.py 파일을 생성하고, 필터 파일로 upperfilter.py라는 이름의 파이썬 파일을 하나 더 만듭니다. 그리고 아래 코드를 입력합니다.
from django.template import Library
register=Library()
@register.filter
def upper(value):
return value.upper()
여기서 Library를 임포트하여 인스턴스를 생성하고 등록했습니다. upper라는 함수, 즉 필터를 만들고 @register.filter 데코레이터를 사용해 등록했습니다. 각 필터는 값을 하나 이상 받으며, 몇 개의 값을 받을지 직접 정의할 수도 있습니다.
템플릿에서 필터 사용하기
이제 home.html로 돌아가 아래와 같이 작성합니다.
<!DOCTYPE html>
<html>
<head>
<title>Tut</title>
</head>
<body>
{% load upperfilter %}
<h1>{{"hi friends how are you" | upper}}</h1>
</body>
</html>
프론트엔드에서 {% %} 구문으로 우리가 만든 필터를 로드(load)한 뒤, <h1> 요소 안에서 해당 필터를 적용했습니다.
이 필터는 소문자를 대문자로 변환해 줍니다.
실행 결과
필터 적용 전
필터 적용 후
