개발 일지 20 - 랭킹 (조회수) 구현

index.html 메인파일이름이다.

 

이곳은 어제 나누어둔데로 content영역과 sidebar영역으로 나누어져있다. 

 

sidebar 아래에 조회수 랭킹 5순위를 실시간으로 나열을 해주는 코드를 구현하고자 했다.

 

 

{% for post in rank %}
<li>
    <a href="{% url 'post_detail' post.id %}">{{ post.title }}</a>
    <span>조회수: {{ post.views }}</span>
</li>
{% endfor %}

 

ranking_list.html을 만들어주었다. 간단히 rank 값만 받아오면 리스트 형식으로 5순위를 알려줄 것이다.

 

첨에는 post_detail을 사용을 하면 될 것이라고 생각을 했다. 짧은 생각이었던게 post_deatil은 말 그대로 게시물을 클릭하고 게시물 안에서 사용될 값을 보내줄때 사용을 하는 곳이었다.

 

ranking_update라는 새로운 함수를 만들었다. url도 연결했다. 

 

def ranking_update(request):
    ranking = Post_information.objects.order_by('-views')[:5]
    return render(request, 'book/ranking_list.html', {'rank': ranking})
    
#url.py 연결
path('ranking_update/', views.ranking_update, name='ranking_update'),

 

index파일이 아니라 새로 만들어준 ranking_list로 값을 보내주었다. 

 

이제 이 함수가 실행이 되어야 했다. 버튼을 눌러서 함수를 실행시키는 것도 아니고 새로고침을 한다고 해서 함수가 실행되지 않았다.

 

---

 

그때, 사용한 것이 자바스크립트이다.

 

 <script>
                function updateRanking() {
                    $.ajax({
                        url: "{% url 'ranking_update' %}",  // AJAX 요청을 처리할 URL
                        type: "GET",
                        success: function(data) {
                            $('.ranking-container ul').html(data);  // 받은 HTML로 랭킹 리스트를 갱신
                        }
                    });
                } 
                
                $(document).ready(function() {
                    updateRanking();  // 페이지 로드 시 첫 업데이트
                    // 이후 10초마다 업데이트
                    setInterval(updateRanking, 100000);
                });
               
 </script>

 

난 계속해서 실시간 정보가 업데이트 되게끔 구현을 하고 싶었고 그러기 위해서는 ajax를 사용을 해야 했다.

 

AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 서버와 비동기적으로 데이터를 주고받을 수 있게 해주는 기술이다. (아마 전전 글에 동기와 비동기에 대해 간단히 설명한게 있을 것이다.)

 

updateRanking이라는 함수를 만들어서 ranking_update라는 이름의 URL을 가져온다. url.py에서 가져오는 것이다.

 jQuery를 사용하여 .ranking-container ul 선택자로 지정된 HTML 요소의 내용을 data로 업데이트한다.

 

<div class="ranking-container">
       <h3>실시간 인기글</h3>
       <ul>
             {% include 'book/ranking_list.html' %}
        </ul>
</div>

 

 

 페이지가 로드될 때 updateRanking 함수를 호출하여 초기 랭킹 정보를 가져와 준다.  마지막으로 몇 초마다 업데이트가 될 것인지 setinterval 함수를 사용하여 설정해준다.

 

 

이렇게 코드를 구현을 했을때 실행이 되지 않았다. 

찾은 해결책은 아래 코드를 추가해주는 것이다.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

jQuery 라이브러리를 웹 페이지에 포함시키는 역할이다.

 

jQuery는 JavaScript 라이브러리로, HTML 문서의 탐색, 이벤트 처리, 애니메이션, AJAX 요청 등을 간편하게 처리할 수 있도록 도와준다.

 

이곳에서 사용된 개념이

DOM (Document Object Model)이다. 프로그래밍 언어가 웹 페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스로 동작하고 주로 자바스크립트에서 웹 페이지의 요소를 선택, 수정, 추가 또는 제거할 때 사용된다. 고 한다. 

(아래 글을 보고 공부했다. 문제가 될 시 삭제하겠습니다. )

 

[웹 개발 기초 자바스크립트] 7. DOM이란?