3-15 검색, 정렬 기능 추가하기 searchForm 질문

현재 질문 목록의 페이징 수정하기를 하고 있습니다만
자바스크립트에서 페이징과 검색어를 캐치해서 제출하는데

(1) 왜 form 자체에 value를 가지고, view에서 kw, page 객체를 보내는지 궁금합니다.

자바스크립트에서 페이지 번호를 클릭하거나, 검색 '찾기'를 클릭했을 경우,
index view에서 로직이 처리된 후, question_list.html로 랜더링됩니다.

랜더링 되는 그때, searchForm의 value값으로 kw, page가 오면 그걸 어디에 쓰는건지 이해가 잘안갑니다.
url에서 직접 엔터를 쳐서 요청을 보낼 경우 이때는 url에 쓰여진 쿼리 스트링들로 처리할테고
다시 페이지 번호나 검색 찾기를 눌렀을 경우, searchForm에 있는 kw,page 객체로 받은 값이 아닌, 검색창에 쓰여진 kw의 값이
searchForm의 #kw로 전달되어 검색하고 page값 또한 index view에서 받은 page객체의 값이 아니라 page= 1로 고정된다고 봤는데요.

idex view에서 전달받은 kw, page 객체를 searchForm의 value로 받아서 쓰는 경우가 있는지, 있다면 어떤 경우에 사용하는지
알고 싶습니다. 이해가 부족해서 죄송합니다;
--> 글쓴이로 검색한 후, 여러개의 글쓴이라는 단어를 가진 목록이 나왔을때, 거기서 다시 최신순으로 정렬한다고 하면 글쓴이라는 검색어가 유지되면서 최신순으로 정렬하는, 이전 조건인 글쓴이로 검색한 것이 유지되면서
정렬조건도 같이 적용되는 걸로 이해하면 될까요?

(2) 그리고 뒤로가기를 했을시, 아래와 같이 처음에 #이 붙고, 그다음에 #이 없는 형태의 URL이 나옵니다.
페이지를 뒤로 가려고하면 즉 2번의 뒤로가기를 눌러야하는데 이는 어떻게 해결해야하나요?
http://127.0.0.1:8000/?kw=&page=6# <- 처음 뒤로가기를 눌렀을때 나오는 URL
http://127.0.0.1:8000/?kw=&page=6 <- 위의 처음 뒤로가기를 누른 다음에 다시 뒤로가기를 누르면 나오는 URL.
결과적으로 같은 페이지가 2번 나옴.

<탬플릿 form>

<form id="searchForm" method="get" action="{% url 'index' %}">
    <input type="hidden" id="kw" name="kw" value="{{ kw|default_if_none:'' }}"> # value의 kw 값은 왜 필요한가요?
    <input type="hidden" id="page" name="page" value="{{ page }}">  # value의 page 값은 왜 필요한가요?
</form>

<탬플릿 검색 찾기 버튼>

        <div class="col-4 input-group">
            <input type="text" class="form-control kw" value="{{ kw|default_if_none:'' }}">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button" id="btn_search">찾기</button>
            </div>
        </div>

<탬플릿 자바스크립트>

{% block script %}
<script type='text/javascript'>
$(document).ready(function(){
    $(".page-link").on('click', function() {
        $("#page").val($(this).data("page"));
        $("#searchForm").submit();
    });

    $("#btn_search").on('click', function() {
        $("#kw").val($(".kw").val());
        $("#page").val(1);  // 검색버튼을 클릭할 경우 1페이지부터 조회한다.
        $("#searchForm").submit();
    });
});
</script>
{% endblock %}

 context = {'question_list': page_obj, 'page': page, 'kw': kw}  # page와 kw가 추가되었다.

HJ 102

M 2021년 7월 27일 1:56 오후

목록으로
1개의 답변이 있습니다. 1 / 1 Page

searchForm의 항목들이 value가 필요한 이유는 그 항목들이 조합이 되어 현재 페이지의 목록을 출력하기 때문입니다.

한번 검색 후 페이지 이동을 할 경우에 검색에 사용되었던 검색어와 정렬조건도 유지되어야 합니다. 이런 이유로 이전의 값들을 저장하기 위해 searchForm의 value가 필요합니다.

두 번째 질문은 잘 이해가 안가네요. get 방식으로 2번의 서로 다른 URL이 호출될 경우 2번 뒤로가기를 하면 처음의 URL로 돌아갈 수 있습니다.

박응용

2021년 7월 27일 4:14 오후

답변 감사합니다. 두번째 질문은 웹브라우저에서 뒤로가기를 하면 만약에 현재 페이지가 page=8이라고하면, 한번 뒤로 가기를 했을 경우 page=6# 으로, 뒤에 #이 붙어서 나옵니다. 그 그상태에서 한번더 뒤로가기를 하면 page=6으로, #이 없는 URL이 나오는데요.( 원래는 한번 뒤로가기를 하면 page=6, 한번 더 뒤로가기를 하면 page=6이 아닌, 이전 페이지인 page=4라던가 해서 한번 뒤로가기를 했을때 다른페이지, 또 다시 뒤로가기를 했을때 다른페이지가 나오는 걸 생각했는데 뭔가 잘못된 것인지 #이 붙어서 한번, #이 없는 상태로 한번더 같은 페이지를 보여줍니다. 해결 방법이 있을까요? - HJ님, 2021년 7월 27일 4:43 오후 추천 , 대댓글
@HJ님 1, 2, 3 페이지로 이동 했다가 두번 뒤로가기 하면 1페이지로 갈겁니다. #이 붙는 조작을 하신건 아닌지요.. - 박응용님, 2021년 7월 27일 5:47 오후 추천 , 대댓글
@박응용님 a 태그의 href="#"가 문제였던것 같습니다. 뒤에 onclick="return false"를 붙이니까 #이 안나오네요. - HJ님, 2021년 7월 27일 7:15 오후 추천 , 대댓글
@HJ님 아, 그러네요.. # 대신 return false나 javascript:void(0) 등을 써야하네요... 책도 수정해야 겠습니다. ^^ - 박응용님, 2021년 7월 27일 9:50 오후 추천 , 대댓글