Revision Ver-1

손쉽게 서버와의 강력한 비동기 통신 구현

HTMX는 Django와 같은 서버 중심의 웹 개발 프레임워크에서 JavaScript의 복잡성 없이도 강력한 비동기 기능을 구현할 수 있게 해줍니다. 이번 편에서는 HTMX가 Ajax 요청을 처리하는 내부 원리와 실제 Django 뷰와의 통신 방식을 구체적인 예제를 통해 알아보겠습니다.

htmx의 ajax 통신 개념도

HTMX의 핵심: HTML이 곧 메시지입니다

기본적인 Ajax 통신(예: axios, fetch)은 서버로부터 JSON 데이터를 받고, 이를 자바스크립트가 해석해서 화면을 다시 그리는 과정을 거칩니다. 하지만 HTMX는 'Hypermedia as the Engine of Application State(HATEOAS)' 원칙을 따릅니다. 즉, 서버가 데이터(JSON) 대신 완성된 HTML 조각을 보내고, HTMX는 이를 지정된 위치에 '교체'만 합니다.

HTMX의 Ajax 통신 4단계

이벤트 발생: 사용자가 HTML 요소(버튼 등)와 상호작용합니다.
Ajax 요청: HTMX가 브라우저의 fetch API를 호출하여 서버에 요청을 보냅니다.
HTML 응답: 서버는 로직을 처리한 후, 전체 페이지가 아닌 필요한 부분의 HTML 조각만 반환합니다.
DOM 교체(Swap): HTMX가 응답받은 HTML을 hx-target으로 지정된 요소에 즉시 삽입합니다.

실전 예제: "좋아요" 버튼 구현하기

단순히 숫자를 바꾸는 것을 넘어, 서버와 어떻게 HTML 조각을 주고받는지 살펴보겠습니다.

1. 프론트엔드 (Template)

hx-post로 요청을 보내고, 서버가 주는 응답으로 #like-section 전체를 갈아 끼우는 방식입니다.

<div id="like-section">
    <button hx-post="/like/" 
            hx-target="#like-section" 
            hx-swap="outerHTML">
        ❤️ 좋아요 ({{ likes_count }})
    </button>
</div>

이 예제처럼 hx-target과 hx-swap이 HTML 태그 안에 명시되어 있으면, 나중에 코드를 다시 읽을 때 "이 버튼을 누르면 어디가 어떻게 바뀌는지"를 자바스크립트 파일을 뒤지지 않고도 바로 알 수 있습니다. 개인적인 느낌으로는 코드를 보려면 백엔드의 View함수를 뒤져봐야 하는 것은 조금 불편할 수는 있지만, 위 예제처럼 html 태그안에 hx- 코드가 심어져 있으므로 인라인 JavaScript 보다는 Locality of Behavior측면에서 나은 것인가? 싶기도 합니다.

2. 백엔드 (Django View)

여기서 중요한 점은 JsonResponse가 아니라 render를 사용한다는 것입니다.

from django.shortcuts import render

def like_post(request):
    # 좋아요 로직 처리 (예: DB 업데이트)
    new_count = 10 

    # 전체 페이지가 아닌, 버튼 부분만 포함된 작은 템플릿 조각을 반환합니다.
    return render(request, 'partials/_like_button.html', {
        'likes_count': new_count
    })

3. 응답용 부분 템플릿

서버가 클라이언트에게 전달할 'HTML 조각'입니다. hx-swap="outerHTML" 설정을 했으므로, 기존의 #like-section 전체를 이 내용이 대체하게 됩니다.

<!-- partials/_like_button.html -->
<div id="like-section">
    <button hx-post="/like/" 
            hx-target="#like-section" 
            hx-swap="outerHTML"
            class="btn-liked">
        ❤️ 좋아요 ({{ likes_count }})
    </button>
</div>

왜 이렇게 하나요? (원리의 이해)

기존 방식에서는 JsonResponse({'likes': 10})를 받은 후, 자바스크립트에서 document.getElementById('count').innerText = data.likes와 같은 코드를 작성해야 했습니다.

하지만 HTMX방식은: 1. 로직의 파편화 방지: "좋아요가 눌렸을 때 화면이 어떻게 변해야 하는가"에 대한 정의를 서버(Django 템플릿)가 관리합니다. 2. 데이터-뷰 동기화: 서버에서 보낸 HTML이 그대로 화면에 박히기 때문에, 클라이언트 측에서 데이터를 가공할 때 발생하는 실수가 사라집니다.

이번 화를 마치며

HTMX를 사용한다는 것은 단순히 코드를 줄이는 것이 아니라, 웹의 본연의 기능인 'Hypermedia(HTML)'를 최대한 활용하는 방식으로 회귀하는 것입니다. 이를 통해 개발자는 자바스크립트 상태 관리의 지옥에서 벗어나 서버 로직에 더 집중할 수 있게 됩니다.

관련글 읽기 :