Django 및 HTMx 입문서

4829 단어 django


Django와 내장 템플릿 언어로 웹 앱을 구축할 때 사용 사례의 80%에 충분하다고 말하고 싶습니다. 그러나 아직 남아 있는 이 작은 비율은 좀 더 역동적이어야 하고 기본 제공 템플릿 언어로는 충분하지 않습니다.

이 문제에 대한 일반적인 대응은 모든 기능을 갖춘 프런트 엔드 프레임워크를 사용하는 것입니다. 그러나 이것은 웹 앱에 엄청난 수준의 복잡성을 추가합니다. 이러한 수준의 기능을 필요로 하는 몇 가지 종류의 웹 앱이 있지만 약간의 동적 기능만 필요한 경우 이를 수행하는 더 쉽고 덜 복잡한 방법이 있습니다.

웹 앱에 약간의 동적 기능을 추가하는 가장 인기 있는 방법 중 하나는 HTMx 을 사용하는 것입니다. 이것은 HTML 확장으로 "위장된"Javascript 프레임워크입니다. 일반 HTML에 "슈퍼 파워"를 추가한다고 말할 수 있습니다. 즉, <form> 요소 없이 모든 요소가 모든 종류의 HTTP 요청(GET, POST, PUT 등)을 만들 수 있습니다. 훨씬 더 많은 일을 하지만 이것은 한 줄 설명입니다.

작동 방식



매우 간단합니다. 전체 페이지가 아닌 페이지의 특정 부분을 HTML 응답으로 대체할 수 있습니다. Django 뷰를 작성할 때 해당 뷰에서 반환하는 내용이 전체 페이지를 대체합니다. HTMx를 사용하면 교체할 페이지의 정확한 부분을 지정할 수 있습니다. 이렇게 하면 전체 페이지를 다시 로드하지 않고도 약간의 동적인 동작을 할 수 있습니다.

설정



HTMx 설치는 매우 쉽습니다. <head> 섹션에 JS 파일을 포함하기만 하면 됩니다. 최신 버전은 official documentation을 참조하십시오.

<head>
    <script src="https://unpkg.com/[email protected]"></script>
    [...]
</head>


base.html

이것이 시작하는 가장 쉽고 빠른 방법이지만 고려해야 할 사항은 스크립트 사본을 호스팅하는 것입니다. 이것이 CDN 버전을 사용하는 것보다 나은 이유는 이 게시물의 범위를 벗어나지만 이를 위한 방법valid reasons이 있습니다.

또한 HTML 기본 템플릿에 다음 특성을 추가하는 것을 고려해야 합니다. POST 요청을 수락하기 위한 Django 보기에는 보안 조치로 CSRF token이 필요합니다. 이렇게 하면 사이트에서 수행하는 모든 POST 요청에 이 토큰이 포함됩니다.

<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>


실제 예



일반적인 예는 active search 페이지의 구현입니다. HTMx를 사용하지 않으면 모든 검색에서 새 키워드에 대한 결과를 표시하기 위해 전체 페이지를 새로고침해야 합니다.

보다




class SearchView(View):

    def get(self, request):
        search_term = request.GET.get('search', None)
        if search_term:
            items = \
                Item.objects.filter(name__contains=search_term).all()
            template = 'search_results.html'
        else:
            items = Item.objects.all()
            template = 'search.html'
        return render(request=request, 
                      template_name=template,
                      context={
                          'items': items,
                      })


search_view.py

이것이 전체 페이지를 반환할지 또는 검색 결과 섹션만 반환할지 결정하기 위해 search GET 매개변수를 확인합니다. 이러한 용어가 있으면 입력한 키워드가 있는 항목만 포함하도록 항목을 필터링합니다. 그렇지 않으면 모든 항목이 반환됩니다. 마지막으로 적절한 템플릿을 선택하여 전체 페이지를 렌더링하거나 결과 섹션만 렌더링합니다(다음 하위 섹션 참조).

템플릿




<input class="input" 
       name="search" 
       type="search"
       hx-get="{% url 'search' %}"
       hx-trigger="keyup changed delay:500ms, search"
       hx-target="#search-results"
       hx-swap="innerHTML"/>

<div id="search-results">
    {% include "search_results.html" %}
</div>


search.html

{% for item in items %}
    <div>
        {{ item.name }}
    </div>
{% endfor %}


search_results.html

내부 템플릿은 모든 HTMx "마법"이 일어나는 곳입니다.

hx-get 은 GET 요청이 이루어질 URL을 지정합니다. 이것은 <input> 요소이기 때문에 텍스트 상자의 값이 이름이 search 인 요청에 GET 매개변수로 포함됩니다. hx-trigger 은 이 GET 요청이 이루어지는 시기를 지정합니다. hx-target 및 hx-swap는 웹 페이지의 섹션이 GET 요청의 결과로 대체되는 방법을 지정합니다.

이 모든 것을 결합하면 Django 기반의 동적 검색 페이지를 갖게 됩니다. 검색 표시줄에 무언가를 입력하면 전체 페이지를 새로고침하지 않고도 결과가 업데이트됩니다.

HTMx로 할 수 있는 일이 더 많으므로 official project website을 살펴보시기 바랍니다.

즐거운 코딩하세요!
matplotlib로 그리기 시작하기 : 간단한 함수 작성
JS 기본 문자열 메소드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage