페이지네이션(Pagination)이란?

페이지네이션(Pagination)은 웹 페이지에서 긴 목록이나 결과를 여러 페이지로 나누어 표시하는 기술입니다.

주요 목적은 사용자 경험을 개선하고 페이지 로딩 시간을 줄이며, 페이지 내용을 더 쉽게 관리하는 것입니다.

일반적으로 긴 목록이나 결과를 페이지별로 나누어 표시하고, 페이지 번호 또는 이전/다음 버튼을 사용하여 사용자가 페이지 간에 이동할 수 있게 합니다.

페이지네이션을 구현하려면 프로그래밍 언어 또는 웹 프레임워크에 따라 다양한 방법이 있습니다.

예를 들어, Python 웹 프레임워크인 Flask에서는 Flask-SQLAlchemy와 함께 paginate 메서드를 사용하여 페이지네이션을 구현할 수 있습니다.

1. Flask와 Flask-SQLAlchemy를 초기화하고 데이터베이스 모델을 정의합니다.

from flask import Flask, render_template, request
from flask_sqlalchemy import SQLAlchemy

# DB 기본 코드
basedir = os.path.abspath(os.path.dirname(__file__))
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] =\
    'sqlite:///' + os.path.join(basedir, 'database.db')

db = SQLAlchemy(app)


# DB를 만들기 위한 설계도
class Item(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100))

with app.app_context():
	db.create_all()

2. Flask 뷰 함수를 작성하여 페이지를 렌더링하고 페이지네이션을 적용합니다.

@app.route('/')
def index():
    page = request.args.get('page', default=1, type=int)
    per_page = 10  # 한 페이지당 아이템 수

	# Item.query.paginate() 메서드를 사용하여 페이지네이션을 설정한다
    items = Item.query.paginate(page=page, per_page=per_page, error_out=False)

    return render_template('index.html', items=items)

1. @app.route('/') 데코레이터

• 이것은 Flask 애플리케이션에서 루트 URL(/)에 대한 요청을 처리하는 함수를 정의합니다.

2. page = request.args.get('page', default=1, type=int)

• 이 코드는 HTTP 요청의 쿼리 문자열에서 'page' 매개변수를 추출합니다. 'page' 매개변수는 현재 페이지 번호를 나타냅니다.

• request.args.get() 메서드를 사용하여 요청의 쿼리 문자열에서 매개변수를 가져옵니다.

• default=1은 'page' 매개변수가 없을 때 기본값으로 1을 사용하라는 의미입니다.

• type=int는 'page' 매개변수를 정수로 변환하라는 의미입니다.

⭐ page 매개변수

page 매개변수는 URL의 쿼리 문자열에서 추출됩니다. 이 코드는 Flask 애플리케이션에서 페이지 번호를 나타내는 page 매개변수를 가져오는 부분입니다. 페이지네이션을 구현하려면 사용자가 어떤 페이지를 요청하는지를 파악해야 하므로 페이지 번호를 추출하기 위해 URL에서 page 매개변수를 사용합니다.

예를 들어, 사용자가 / 엔드포인트에 방문하면 URL에는 기본적으로 ?page=1이 포함되며, 이는 기본 페이지 번호가 1로 설정되어 있는 상황을 나타냅니다. 만약 사용자가 페이지 번호를 변경하려면 URL에 ?page=2, ?page=3, 등의 값을 전달하여 다른 페이지를 요청할 수 있습니다. 이렇게 전달된 page 매개변수를 Flask에서 request.args.get('page', defau

3. per_page = 10:

이 부분은 한 페이지당 표시할 아이템의 수를 정의합니다. 여기서는 10으로 설정되었습니다.

4. items = Item.query.paginate(page=page, per_page=per_page)

• Item.query는 SQLAlchemy 모델 Item의 데이터베이스 쿼리를 생성합니다.

• paginate() 메서드는 페이지네이션을 적용한 쿼리를 생성하고, 현재 페이지(page)와 페이지당 아이템 수(per_page)를 인수로 받습니다. 이렇게 하면 현재 페이지에 해당하는 아이템만 가져옵니다.

5. return render_template('index.html', items=items)

• render_template() 함수를 사용하여 'index.html' 템플릿을 렌더링하고, 템플릿에 items 변수를 전달합니다.

• items 변수는 페이지네이션 정보와 현재 페이지에 표시할 아이템 목록을 포함합니다.

페이지네이션을 구현한 이 코드는 특정 페이지에서 특정 수의 아이템을 표시하고, 사용자가 페이지를 변경할 수 있는 페이지네이션 컨트롤을 제공합니다. 사용자가 페이지 번호를 변경하면 해당 페이지의 아이템이 표시됩니다. 이것은 특히 데이터가 많은 경우 유용한 방법입니다.

6. error_out=False

• paginate 메서드에서 error_out=False를 설정하는 것은 선택 사항입니다. 이 설정을 사용하면 페이지가 범위를 벗어나는 경우 오류를 발생시키지 않고 대신 빈 페이지를 반환합니다.

즉, 페이지 번호가 유효하지 않은 경우 404 오류가 발생하지 않고 사용자에게 빈 페이지가 표시됩니다.

이 설정을 사용하면 페이지 번호를 처리할 때 더 많은 유연성을 가질 수 있으며 사용자에게 빈 페이지를 표시하거나 페이지가 존재하지 않는다는 메시지를 표시하는 등의 사용자 정의 처리를 수행할 수 있습니다. 그러나 이 설정을 사용할지 여부는 프로젝트의 요구 사항에 따라 다를 수 있습니다.

만약 error_out을 True로 설정하면 페이지 번호가 범위를 벗어나는 경우 404 오류가 발생하게 됩니다. 따라서 error_out 설정은 프로젝트의 필요에 따라 선택적으로 사용하면 됩니다.

3. HTML 템플릿을 작성하여 페이지네이션을 표시합니다.

<div class="pagination">
  <a href="{{ url_for('home', page=data.prev_num) }}" class="page-link">🢘</a>
        
  <span class="current">Page {{ data.page }} of {{ data.pages }}</span>
  
  <a href="{{ url_for('home', page=data.next_num) }}" class="page-link">🢚</a>
</div>

1. <div class="pagination">

➤ 이 부분은 페이지네이션을 감싸는 div 요소입니다.

2. <a href="{{ url_for('home', page=data.prev_num) }}" class="page-link">🢘</a>

➤ 이 부분은 이전 페이지로 이동하는 링크를 나타냅니다. url_for 함수를 사용하여 'home' 라우트로 이동하는 링크를 생성하고, 'page' 매개변수에 data.prev_num을 전달합니다. 이렇게 하면 이전 페이지로 이동할 수 있습니다.

3. <span class="current">Page {{ data.page }} of {{ data.pages }}</span>

➤ 현재 페이지와 전체 페이지 수를 나타내는 텍스트입니다. data.page는 현재 페이지 번호를 나타내며, data.pages는 전체 페이지 수를 나타냅니다.

4. <a href="{{ url_for('home', page=data.next_num) }}" class="page-link">🢚</a>

➤ 이 부분은 다음 페이지로 이동하는 링크를 나타냅니다. 마찬가지로 url_for 함수를 사용하여 'home' 라우트로 이동하는 링크를 생성하고, 'page' 매개변수에 data.next_num을 전달합니다. 이렇게 하면 다음 페이지로 이동할 수 있습니다.

이 코드를 통해 페이지네이션 컴포넌트를 템플릿에 추가하고, 사용자는 이전 페이지로 이동하거나 다음 페이지로 이동할 수 있습니다. 페이지네이션을 통해 큰 데이터 목록을 여러 페이지로 나누어 표시할 수 있어 사용자 경험을 개선할 수 있습니다.

---

prev_num 및 next_num

prev_num 및 next_num는 Flask-SQLAlchemy의 paginate 메서드가 반환하는 객체에서 나오는 속성입니다. 이러한 속성은 페이지네이션을 관리하고 페이지 간 이동을 쉽게 만들기 위해 사용됩니다.

paginate 메서드는 쿼리 결과를 페이지별로 나누어 주는 역할을 합니다.

그 결과로 반환되는 객체에는 현재 페이지 번호를 나타내는 page 속성, 전체 페이지 수를 나타내는 pages 속성, 이전 페이지 번호를 나타내는 prev_num 속성, 그리고 다음 페이지 번호를 나타내는 next_num 속성 등이 포함되어 있습니다.

이러한 속성을 사용하여 페이지네이션 컴포넌트를 템플릿에 쉽게 렌더링할 수 있습니다.

따라서 위의 코드에서 page=data.prev_num 및 page=data.next_num은 paginate 메서드가 반환한 페이지네이션 객체의 속성을 사용하여 이전 페이지와 다음 페이지로 이동할 수 있도록 URL을 생성하는 부분입니다.

---

Q. <a href="{{ url_for('home', page=data.prev_num) }}>html파일에서 page라는 변수를 보내줬을때 이 page 변수가 request.args.get('page', default=1, type=int)의 page매개변수로 전달되는 거야?`

네, 정확히 그렇습니다. HTML 파일에서 {{ url_for('home', page=data.prev_num) }}와 같은 코드를 사용하면 url_for 함수를 호출하여 페이지를 이동할 때 page 매개변수와 함께 URL을 생성합니다. 이렇게 생성된 URL에는 page 매개변수와 해당 페이지 번호가 포함되어 있으며, 사용자가 링크를 클릭하면 그 페이지로 이동하게 됩니다.

예를 들어, 사용자가 이전 페이지로 이동하려면 data.prev_num에 이전 페이지 번호가 설정되어 있고, 이를 url_for 함수에 전달하여 이전 페이지로 이동할 수 있습니다. 페이지 번호는 URL을 통해 Flask 애플리케이션에 전달되고, page 매개변수로 사용됩니다.

따라서 HTML에서 page 변수를 설정하고 url_for 함수를 사용하여 페이지 이동 URL을 생성하는 것은 편리한 방법입니다. 이를 통해 페이지네이션을 구현할 때 다양한 페이지로 쉽게 이동할 수 있습니다.