[Django/Devroup] 검색된 객체들을 정렬시키는 법 (feat. GET방식으로 전달된 데이터를 보존하는 법)

개발을 하다 막히는 부분이 생겼다.

<form method="GET" action="{% url 'community:post_list' %}" class="d-flex">
    <input
        class="form-control me-2"
        type="search"
        placeholder="Search"
        aria-label="Search"
        name="q"
        id="q"
    />
    <input class="btn btn-outline-success" type="submit" value="Search" id="submit" />
</form>

이렇게 폼태그로 views에 쿼리에 사용할 데이터 'q'를 전달한 후

$('#likes').click(function () {
    var ordering = "-like";
    
    $.ajax({
        type: 'GET',
        url: "{% url 'community:post_list' %}",
        data: { ordering: sessionStorage.getItem('o') }, // 좋아요순 정렬
        success: function (data) {
            $('#post_list').html(data);
        },
    });
});

ajax 통신으로 데이터(정렬에 사용됨)를 보내면 폼태그로 전달한 데이터 'q'의 값이 사라져버린다는 점이다.

이로인해 검색으로 추출된 데이터들을 특정 조건에 맞춰 정렬할 수 없다는 문제가 생겨버렸다.

이러한 문제는 GET방식으로 전달된 데이터는 전달된 당시에만 유효하기에 발생한다. (POST방식도 마찬가지)
즉, 

def post_list(request):
    query = request.GET.get('q', '')
    ordering = request.GET.get('ordering', '-date')

위 코드로 예시를 들면 'q' 전달 -> query에 q값 저장 -> ajax통신으로 'ordering' 전달 -> q값은 전달되지 않았으므로 query에는 ''값 저장, ordering에는 ordering값 저장
이 된다.

해결방법은 간단하다.

$('#submit').click(function () {
    var q = document.getElementById("q").value;

    sessionStorage.setItem('query', q);
});

$('#likes').click(function () {
    var ordering = "-like";

    sessionStorage.setItem('o', ordering);

    $.ajax({
        type: 'GET',
        url: "{% url 'community:post_list' %}",
        data: { q: sessionStorage.getItem('query'), ordering: sessionStorage.getItem('o') }, // 좋아요순 정렬
        success: function (data) {
            $('#post_list').html(data);
        },
    });
});

위와 같이 데이터 'q'를 전달하는 폼의 submit버튼을 클릭할 경우 q의 값을 세션에 저장하고 ajax통신 요청 시 q의 세션 값을 ordering과 함께 데이터에 담아 views로 전달하는 것이다.