1. 페이지네이션

대량의 데이터를 여러 페이지로 나누어 표시하는 기술입니다.

이 기술은 웹 애플리케이션에서 많은 양의 정보를 한 번에 보여주는 대신 페이지 단위로 나누어 보여줌으로써 사용자 경험을 향상시키고 성능을 최적화합니다.

본 글에서는 Flask-SQLAlchemy의 SQLAlchemy에서 제공하는 paginate()를 이용하여 페이지네이션을 구현합니다.

이 함수는 쿼리 결과를 여러 페이지로 나누어 반환하며, 페이지 크기와 현재 페이지 번호를 기반으로 해당 페이지에 속하는 결과를 가져올 수 있습니다.

💡 본 글은 예제 코드를 이용하여 설명합니다.

2. 데이터 추출

flask/source/my_app/views/board.py을 살펴봅니다.

게시판과 같은 기능을 구현하고 데이터를 추가하여 페이지네이션을 구현해봅니다.

paginate()는 내부적으로 쿼리의 결과를 limit과 offset을 이용합니다.

page라는 인자는 현재 페이지 번호이며, offset에 영향이 있으며,

per_page는 한 페이지에 출력할 데이터 개수이고 limit에 영향이 있습니다.

PER_PAGE = 10
MAX_PAGE = 10

# 코드 생략

posts = posts.order_by(
	Post.created.desc()
).paginate(
	page=page,
	per_page=PER_PAGE,
	error_out=False
)

3. 페이지 번호

flask/source/my_app/templates/board/board.html는 페이지 번호에 대한 HTML 코드입니다.

posts.page는 현재 페이지 번호를 뜻하며, posts.pages는 총 페이지 수를 뜻합니다.

start_page부터 end_page까지 순회하면서 현재 페이지 번호와 일치하면

active 클래스를 부여하여 현재 페이지 번호를 표시해줍니다.

<nav aria-label="Page navigation example" class="d-flex justify-content-center">
    <ul class="pagination">
        {% if posts.page != 1 %}
        <li class="page-item">
            <a class="page-link" href="{{ url_for('board.main', p=1) }}">&laquo;</a>
        </li>
        {% else %}
        <li class="page-item disabled">
            <a class="page-link">&laquo;</a>
        </li>
        {% endif %}

        <li class="page-item {% if prev_page == 0 %}disabled{% endif %}">
            <a class="page-link" href="{% if prev_page != 0 %}{{ url_for('board.main', p=prev_page) }}{% endif %}">&lt;</a>
        </li>

        {% for page_num in range(start_page, end_page + 1) %}
        <li class="page-item {% if posts.page == page_num %}active{% endif %}">
            <a class="page-link" href="{{ url_for('board.main', p=page_num) }}">{{ page_num }}</a>
        </li>
        {% endfor %}

        <li class="page-item {% if next_page == 0 %}disabled{% endif %}">
            <a class="page-link" href="{% if next_page != 0 %}{{ url_for('board.main', p=next_page) }}{% endif %}">&gt;</a>
        </li>
        
        {% if posts.page != posts.pages and end_page != 1 %}
        <li class="page-item">
            <a class="page-link" href="{{ url_for('board.main', p=posts.pages) }}">&raquo;</a>
        </li>
        {% else %}
        <li class="page-item disabled">
            <a class="page-link">&raquo;</a>
        </li>
        {% endif %}
    </ul>
</nav>

맨 처음으로, 이전으로, 다음으로, 맨 뒤로 등 필요한 기능들을 선택적으로 적용하여 페이지네이션을 구현하면 됩니다.