웹 애플리케이션에 검색 기능을 추가하면 사용자가 원하는 것을 검색하여 쉽게 탐색할 수 있습니다. Django는 강력한 ORM 및 쿼리 도구를 사용하여 검색 기능을 구축하기 위한 기본 지원을 제공합니다. Django를 사용하면 키워드 검색, 단순 검색, 필터를 사용한 고급 검색 등 다양한 유형의 검색을 구현할 수 있습니다.

장고에서 검색 기능 구현하기

장고를 사용하면 내장된 메서드와 함수를 사용하여 다양한 유형의 검색을 구현할 수 있습니다. 사용 사례에 따라 간단한 키워드 검색 또는 고급 검색을 구현할 수 있습니다. 전자 상거래 웹사이트와 같이 복잡한 애플리케이션을 사용하는 경우 고급 검색을 구현해야 하며, 덜 복잡한 프로젝트에는 간단한 키워드 검색이 적합합니다.

이 문서에 사용된 코드는 GitHub에서 찾을 수 있으며 MIT 라이선스에 따라 무료로 사용할 수 있습니다.

Django에서 간단한 키워드 검색 구현하기

간단한 검색 기능을 만들려면 검색창을 만드는 것부터 시작해야 합니다. 탐색 모음에서 검색 창을 만들 수 있습니다. 부트스트랩 은 검색 표시줄이 있는 기성품 탐색 모음을 제공하며, 부트스트랩과 해당 구성 요소를 장고 프로젝트에 쉽게 통합할 수 있습니다. HTML 파일에 검색창을 만들고 양식 메서드를 POST로 설정한 다음 입력 필드에 다음과 같은 이름 속성을 지정하세요:

 <form class="d-flex" role="search" method="POST">
 {% csrf_token %}
 <input
    class="form-control me-2"
    type="search"
    placeholder="Search"
    name="search_query"
    required aria-label="Search"
 >
 <button class="btn btn-outline-success" type="submit">Search</button>
</form>

위 코드에서 입력 필드의 이름은 search_query입니다. 이 양식은 CSRF 공격을 방지하기 위해 Django의 CSRF 토큰을 사용합니다. 검색창을 작동시키려면 다음 단계를 따르세요.

검색을 위한 뷰 만들기

⭐ views.py 파일을 열고 models.py 파일에서 모델을 가져옵니다:

 from .models import ModelName

⭐ 검색 기능을 위한 뷰 함수 생성:

 def search_feature(request):
    # Check if the request is a post request.
    if request.method == 'POST':
        # Retrieve the search query entered by the user
        search_query = request.POST['search_query']
        # Filter your model by the search query
        posts = Model.objects.filter(fieldName__contains=search_query)
        return render(request, 'app/template_name.html', {'query':search_query, 'posts':posts})
    else:
        return render(request, 'app/template_name.html',{})

위 함수는 먼저 클라이언트가 POST 요청을 보내는지 확인합니다. 확인을 통과하면 다음과 같이 사용자의 검색 쿼리 값을 가져옵니다:

 search_query = request.POST['search_query']

request.POST[‘search_query’]에서 ‘search_query’는 검색창의 입력 필드 이름으로 바뀌어야 합니다.

이 글도 확인해 보세요:  자바스크립트에서 Intl API를 사용하는 방법

사용자의 검색 쿼리 값을 검색한 후 함수는 __contains 메서드를 사용하여 모델을 필터링합니다. __contains 메서드는 대소문자를 구분하지 않습니다. 이 메서드를 사용하려면 다음 형식을 따라야 합니다:

 fieldName__contains

예를 들어 사용자가 name이라는 모델 필드를 기준으로 검색하도록 하려면 다음과 같이 코드를 수정해야 합니다:

 name__contains=search_query

마지막으로 이 함수는 템플릿을 렌더링하고 검색 쿼리 및 필터링된 모델을 컨텍스트로 전달합니다.

그러나 양식의 메서드가 POST 요청이 아닌 경우 함수는 빈 사전이 포함된 템플릿을 렌더링하고 검색 쿼리를 처리하지 않습니다.

검색 결과 템플릿 생성

⭐ 검색 결과를 클라이언트 측에 반환할 HTML 파일을 생성합니다.

⭐ 사용자가 볼 수 있도록 검색 결과를 페이지에 출력합니다. HTML 파일의 코드는 다음과 같아야 합니다:

 {% if query %}
    <div>
        <div>
        <!-- loop through search query -->
        {% for post in posts %}
            <div>
                <!-- return search query -->
                <p>{{post.title}}</p>
            </div>
        {% endfor %}
        </div>
    </div>
{% else %}
    <!-- return a message if the user does not enter a search query -->
    <h1>Please enter a search query</h1>
{% endif %}

위의 HTML 템플릿은 사용자가 검색창에 검색어를 입력했는지 확인합니다. 사용자가 검색어를 입력하면 for 루프가 검색 결과를 반복하여 사용자에게 반환합니다. 검색어가 없는 경우 사용자에게 검색어를 입력하라는 메시지가 표시됩니다. 검색 쿼리가 없을 수 있는 경우는 사용자가 검색창을 채우지 않고 URL로 바로 이동하는 경우, 즉 사용자가 브라우저에 mywebsite.com/search와 같은 URL을 직접 입력하는 경우입니다. HTML 파일에서 Django의 템플릿 상속을 사용해야 합니다.

⭐ 검색 결과가 없는 경우 오류 메시지를 반환하도록 HTML 코드를 수정하세요.

 {% if query %}
    <div>
        <div>
        <!-- check if there is a result in the database-->
        {% if posts %}
            <!-- loop through search query if there is a result -->
            {% for post in posts %}
                <div>
                    <!-- return search query -->
                    <p>{{post.title}}</p>
                </div>
            {% endfor %}
            <!-- return a message if there are no results found. -->
        {% else %}
            <h3>No search results found</h3>
        {% endif %}
        </div>
    </div>
{% else %}
    <h1>Please enter a search query</h1>
{% endif %}

새로운 HTML 템플릿은 더 나은 사용자 경험을 제공합니다. 데이터베이스에서 검색 결과를 사용할 수 있는지 확인하는 조건문을 도입했습니다. 검색 결과가 있으면 검색 결과를 표시하고 그렇지 않으면 사용자에게 오류 메시지를 보냅니다.

이 글도 확인해 보세요:  JES를 활용한 흥미로운 사운드 처리 기법 3가지

URL 패턴 구성

⭐ 이 작업을 수행하지 않은 경우 앱 디렉터리에 urls.py 파일을 생성하세요.

⭐ urls.py 파일에서 검색 페이지에 대한 URL 패턴을 생성합니다:

 from django.urls import path
from . import views

urlpatterns = [
    path('search/', views.search_feature, name='search-view'),
]

위의 프로그램은 먼저 경로 함수와 앱과 관련된 뷰 파일을 가져옵니다. 그런 다음 검색 페이지에 대해 search-view라는 이름의 경로를 만듭니다.

⭐ 검색창에 양식 액션을 추가합니다. 작업 URL은 검색 보기 전용 URL 경로를 가리켜야 합니다. 이 경우 양식은 검색 보기를 가리킵니다.

 <form class="d-flex" role="search" method="POST" action="{% url 'search-view' %}">
   <input
       class="form-control me-2"
       type="search"
       placeholder="Search for something"
       name="search_query"
       required aria-label="Search"
   >
   <button class="btn btn-outline-success" type="submit">Search</button>
</form>

검색 URL 경로를 가리키는 양식 액션이 없으면 검색 기능이 작동하지 않습니다. 검색 URL 경로는 검색 기능의 로직을 처리하는 Django 보기를 가리켜야 한다는 점을 기억하세요.

여러 모델 필드에 대한 검색 기능 만들기

웹 앱의 사용자 경험을 개선하려는 경우 사용자가 모델에서 둘 이상의 필드로 검색할 수 있도록 할 수 있습니다. 예를 들어 블로그 앱에서 사용자가 게시물 제목이나 작성자 이름을 기준으로 검색하도록 할 수 있습니다.

이 기능을 구현하려면 Django에서 제공하는 Q 객체를 사용해야 합니다.다음과 같이 views.py 파일에서 Q 객체를 임포트해야 합니다:

 from django.db.models import Q

Q를 가져온 후 뷰 함수를 다음과 같이 수정해야 합니다:

 def search_post(request):
    if request.method == 'POST':
        search_query = request.POST['search_query']
        posts = Post.objects.filter(Q(title__icontains=search_query) | Q(author__icontains=search_query))
        return render(request, 'app/template_name.html', {'query':search_query, 'posts':posts})
    else:
        return render(request, 'app/template_name.html',{})

위 프로그램에서 posts 변수는 게시물 제목 또는 작성자 이름을 기준으로 모델을 필터링합니다. 이 함수는 OR 연산자(이 경우 파이프 기호)를 사용하여 필터를 수행합니다.

검색 기능으로 사용자 환경 개선

웹 애플리케이션의 검색 기능은 사용자 환경과 전반적인 사용성을 효과적으로 개선합니다. Django를 사용하면 기본 제공 기능을 활용하기만 하면 검색 기능이 작동하여 개발자와 사용자에게 상당한 이점을 제공합니다.

By 김민수

안드로이드, 서버 개발을 시작으로 여러 분야를 넘나들고 있는 풀스택(Full-stack) 개발자입니다. 오픈소스 기술과 혁신에 큰 관심을 가지고 있고, 보다 많은 사람이 기술을 통해 꿈꾸던 일을 실현하도록 돕기를 희망하고 있습니다.