HTMX는 Django와 자연스럽게 통합될 수 있는 도구로, 간단한 설정만으로도 동적인 웹 애플리케이션을 구축할 수 있습니다. 이번 편에서는 Django와 HTMX를 통합하기 위한 전체적인 준비 작업과 설정 방법을 살펴보겠습니다.

Integration of Django and HTMX for dynamic web development

1. HTMX를 Django에 통합하기 위한 준비 작업

Django에서 HTMX를 사용하려면 다음 단계를 따르세요:

1.1 HTMX JavaScript 라이브러리 로드

HTML 템플릿 파일의 <head> 태그 안에 CDN 링크를 추가합니다.

<script src="https://unpkg.com/htmx.org"></script>

1.2 Django에서 HTMX 속성 활용하기

HTMX는 HTTP 요청을 간단히 처리하기 위해 다양한 속성을 제공합니다.

  • hx-get: GET 요청을 보내기 위한 속성
  • hx-post: POST 요청을 보내기 위한 속성
  • hx-target: 서버 응답 데이터를 삽입할 HTML 요소 지정

HTML 코드 예

<div id="content">
    <button hx-get="/get-data/" hx-target="#result">데이터 가져오기</button>
    <button hx-post="/submit/" hx-target="#result">데이터 전송</button>
</div>
<div id="result">결과가 여기에 표시됩니다.</div>

2. Django 뷰와 HTMX 요청 처리

2.1 GET 요청 처리

from django.http import HttpResponse

def get_data(request):
    if request.method == "GET":
        return HttpResponse("<p>GET 요청 처리 완료!</p>")

2.2 POST 요청 처리

from django.http import HttpResponse

def submit_data(request):
    if request.method == "POST":
        return HttpResponse("<p>POST 요청 처리 완료!</p>")

2.3 URL 매핑

from django.urls import path
from .views import get_data, submit_data

urlpatterns = [
    path('get-data/', get_data, name='get_data'),
    path('submit/', submit_data, name='submit_data'),
]

3. HTMX 통합 시 주의할 점

3.1 CSRF 토큰 처리

Django는 CSRF 보호를 기본으로 활성화하므로 POST 요청 시 CSRF 토큰이 필요합니다. HTMX에서 POST 요청을 처리하기 위해 다음 두 가지 방식 중 하나를 선택하세요:

1. HTML <meta> 태그와 JavaScript 스크립트 사용
<meta name="csrf-token" content="{{ csrf_token }}">
<script>
    document.body.addEventListener('htmx:configRequest', function (event) {
        event.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]').content;
    });
</script>
2. HTML <form> 태그 내부에 {% csrf_token %} 삽입
<form hx-post="/submit/" hx-target="#result">
    {% csrf_token %}
    <input type="text" name="name" placeholder="이름을 입력하세요">
    <button type="submit">제출</button>
</form>
<div id="result"></div>

CSRF 토큰 처리에 대한 자세한 내용은 다음 편에서 다룹니다.

3.2 HTMX 요청 구분

Django 4.2 이상에서는 request.htmx 속성을 사용하여 HTMX 요청을 구분할 수 있습니다.

from django.shortcuts import render

def my_view(request):
    if request.htmx:  # HTMX 요청
        return render(request, 'partials/snippet.html')
    return render(request, 'index.html')  # 전체 페이지

4. HTMX와 Django 통합의 전체 흐름

4.1 완성된 HTML 예제

<!DOCTYPE html>
<html>
<head>
    <title>HTMX Demo</title>
    <script src="https://unpkg.com/htmx.org"></script>
    <meta name="csrf-token" content="{{ csrf_token }}">
    <script>
        document.body.addEventListener('htmx:configRequest', function (event) {
            event.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]').content;
        });
    </script>
</head>
<body>
    <div id="content">
        <button hx-get="/get-data/" hx-target="#result">GET 요청</button>
        <button hx-post="/submit/" hx-target="#result">POST 요청</button>
    </div>
    <div id="result">결과가 여기에 표시됩니다.</div>
</body>
</html>

이번 화를 마치며

이번 편에서는 Django와 HTMX를 통합하기 위해 필요한 준비 작업과 설정 방법을 살펴보았습니다. 다음 편에서는 CSRF 토큰 처리 방법을 중심으로, Django와 HTMX의 보안 통합에 대해 자세히 다뤄보겠습니다. 기대해 주세요! 😊