JSON 개념 이해

JSON(JavaScript Object Notation)은 경량 데이터 교환 형식으로, 텍스트를 사용하여 구조화된 데이터를 표현합니다. 사람이 읽고 쓰기 쉽고, 기계가 파싱하고 생성하기에도 용이합니다. JSON은 언어 독립적이지만, JavaScript 객체 문법을 기반으로 합니다.

유효한 JSON 예시

["사과", "바나나", "체리"]
{ "이름": "홍길동", "나이": 30 }
{"과일": ["사과", "바나나"] }
[ { "이름": "김철수"}, {"이름": "이영희"} ]

유효하지 않은 JSON 예시

{ 이름: "홍길동", '나이': 30 }  // 속성명은 쌍따옴표 필수
[10, 20, 0xFF]  // 16진수 사용 불가
{ "이름": "홍길동", "취미": undefined }  // undefined 사용 불가
{ "이름": "홍길동",
  "생일": new Date('2024-01-01'),  // 날짜 객체 사용 불가
  "getName":  function() { return this.이름; }  // 함수 사용 불가
}

JSON 메서드: parse와 stringify

JavaScript에서 JSON 데이터를 다루기 위한 두 가지 핵심 메서드가 있습니다:

• JSON.parse(): JSON 문자열을 JavaScript 객체로 변환
• JSON.stringify(): JavaScript 값을 JSON 문자열로 변환

사용 예시

// parse 예시
const obj1 = JSON.parse('{"name":"Kim"}');
const obj2 = JSON.parse('{name:"Kim"}');  // 오류 발생
const obj3 = JSON.parse('[18, undefined]');  // 오류 발생

// stringify 예시
const jsonStr = JSON.stringify({"name":"Kim"});

AJAX 소개

AJAX(Asynchronous JavaScript and XML)는 JavaScript를 사용하여 서버와 비동기적으로 데이터를 교환하는 기술입니다. 이를 통해 페이지 전체를 새로 고치지 않고도 일부분만 업데이트할 수 있습니다.

동기 vs 비동기

• 동기 통신: 클라이언트가 요청을 보내고 응답을 받을 때까지 다음 요청을 보낼 수 없음
• 비동기 통신: 클라이언트가 응답을 기다리지 않고 다음 요청을 보낼 수 있음

실습: 폼 방식 vs AJAX 방식

1. 폼 방식 (동기)

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('add/', views.add),
]

# views.py
def add(request):
    if request.method == 'POST':
        num1 = int(request.POST.get("num1"))
        num2 = int(request.POST.get("num2"))
        result = num1 + num2
        return render(request, 'index.html', {'result': str(result)})
    return render(request, 'index.html')


<form action="/add/" method="post">
    {% csrf_token %}
    <input type="text" id="num1" name="num1" value="{{ num1 }}"> +
    <input type="text" id="num2" name="num2" value="{{ num2 }}"> =
    <input type="text" id="result" name="result" value="{{ result }}">
    <input type="submit" value="폼 제출" id="submitBtn">
</form>

2. AJAX 방식 (비동기)

# views.py
def ajax_add(request):
    if request.method == 'POST':
        num1 = int(request.POST.get("num1"))
        num2 = int(request.POST.get("num2"))
        result = num1 + num2
        return HttpResponse(result)  # 문자열 반환
    return render(request, 'ajax_add.html')


<input type="text" id="num1" value="{{ num1 }}"> +
<input type="text" id="num2" value="{{ num2 }}"> =
<input type="text" id="result" value="{{ result }}">
<input type="button" value="AJAX 제출" id="ajaxBtn">

<script src="/static/jquery-3.2.1.min.js"></script>
<script>
$("#ajaxBtn").on("click", function() {
    $.ajax({
        url: "/ajax_add/",
        type: "post",
        data: {
            "num1": $("#num1").val(),
            "num2": $("#num2").val(),
        },
        success: function(data) {
            $("#result").val(data);
        }
    });
});
</script>

Django에서 JSON 데이터 직렬화

내장 serializers 사용

from django.core import serializers

def get_books_json(request):
    books = Book.objects.all()[:10]
    json_data = serializers.serialize("json", books)
    return HttpResponse(json_data)

날짜/시간 객체 처리 (커스텀 직렬화)

import json
from datetime import datetime, date

class CustomJSONEncoder(json.JSONEncoder):
    def default(self, obj):
        if isinstance(obj, datetime):
            return obj.strftime("%Y-%m-%d %H:%M:%S")
        elif isinstance(obj, date):
            return obj.strftime("%Y-%m-%d")
        return super().default(obj)

def get_books_custom_json(request):
    book_list = Book.objects.values_list("title", "publish_date")
    json_data = json.dumps(list(book_list), cls=CustomJSONEncoder)
    return HttpResponse(json_data)

SweetAlert 플러그인 활용

SweetAlert는 기존 alert 창을 대체하는 예쁜 팝업 라이브러리입니다. Bootstrap-sweetalert 프로젝트를 다운로드하여 사용할 수 있습니다.