이번 편에서는 Django와 HTMX를 사용하여 JSON 데이터를 반환하고 클라이언트에서 이를 처리하는 방법을 알아보겠습니다. JSON 방식은 데이터를 중심으로 한 유연하고 확장성이 높은 동적 웹 애플리케이션 개발에 적합합니다.

1. JSON 반환 방식이란?

JSON 반환 방식은 서버에서 데이터만 반환하고, 클라이언트가 이를 파싱해 동적으로 처리하는 방식입니다. Django는 JsonResponse 클래스를 제공하며, 이를 활용하면 간단히 JSON 데이터를 반환할 수 있습니다.

2. JSON 반환 방식의 장점

• 데이터 중심: 서버는 데이터를 반환하고, 클라이언트는 이를 활용해 필요한 UI를 생성.
• 유연성: 클라이언트에서 다양한 로직을 자유롭게 처리 가능.
• 코드 관리 용이: 복잡한 UI보다 데이터 처리에 집중할 수 있어 유지보수가 쉬움.

3. JSON 데이터를 활용한 예제

다음은 JSON 데이터를 활용하여 회원가입 에러 메시지를 처리하는 간단한 예제입니다.

HTML

<form hx-post="/signup/" hx-trigger="submit" hx-target="#form-messages">
    {% csrf_token %}
    <input type="text" name="username" placeholder="아이디">
    <input type="password" name="password" placeholder="비밀번호">
    <input type="password" name="password2" placeholder="비밀번호 확인">
    <button type="submit">회원가입</button>
</form>
<div id="form-messages"></div>

<script>
    document.body.addEventListener('htmx:afterRequest', function(event) {
        if (event.detail.xhr.status === 200) {
            const response = JSON.parse(event.detail.xhr.responseText);
            const resultDiv = document.querySelector('#form-messages');
            if (response.success) {
                resultDiv.innerHTML = `<p style="color: green;">${response.message}</p>`;
            } else {
                resultDiv.innerHTML = response.errors.map(err => `<p style="color: red;">${err}</p>`).join('');
            }
        }
    });
</script>

Django 뷰

from django.http import JsonResponse

def signup_view(request):
    if request.method == "POST":
        username = request.POST.get("username", "").strip()
        password = request.POST.get("password", "")
        password2 = request.POST.get("password2", "")

        errors = []
        if not username:
            errors.append("아이디를 입력하세요!")
        if password != password2:
            errors.append("비밀번호가 일치하지 않습니다!")

        if errors:
            return JsonResponse({"success": False, "errors": errors})

        return JsonResponse({"success": True, "message": "회원가입이 완료되었습니다!"})

4. JSON 응답 방식의 단점

• JavaScript 필요: JSON 응답을 파싱하고 이를 UI에 반영하는 코드를 작성해야 합니다.
• HTMX 철학에서 약간 벗어남: HTMX는 JavaScript 사용을 최소화하려는 도구이므로, JSON 방식은 추가적인 클라이언트 로직이 필요합니다.

5. JSON 응답 방식의 활용 사례

JSON 방식은 다음과 같은 상황에서 유용합니다:

• 데이터 중심의 API 응답
• 복잡한 상태 관리 및 조건부 UI 업데이트
• 동적인 데이터 처리 및 그래프 렌더링

이번 화를 마치며

이번 글에서는 Django와 HTMX를 활용해 JSON 데이터를 반환하고 클라이언트에서 이를 처리하는 방법을 알아보았습니다. JSON 방식은 데이터 중심의 웹 애플리케이션 개발에 적합하며, 유연성과 확장성이 뛰어납니다. 다음 프로젝트에서 활용해 보세요! 😊