[python] 웹 서버에 무한 스크롤 기능 추가하기

05 Dec 2023

python

웹 페이지에 콘텐츠를 보다 효율적으로 표시하기 위해 많은 웹 사이트가 무한 스크롤 기능을 제공하고 있습니다. 이 기능은 사용자가 스크롤을 계속 내릴 때마다 추가 콘텐츠를 동적으로 불러온다는 특징을 갖고 있습니다. 이번 블로그 포스트에서는 Python을 사용하여 웹 서버에 무한 스크롤 기능을 추가하는 방법을 알아보겠습니다.

필요한 패키지 설치하기

우선 무한 스크롤 기능을 구현하기 위해 필요한 패키지를 설치해야 합니다. Python의 대표적인 웹 프레임워크인 Flask를 사용하므로, Flask를 설치해야 합니다. 다음 명령을 사용하여 Flask를 설치해주세요.

pip install flask

Flask 애플리케이션 생성하기

무한 스크롤 기능을 구현하기 위해 Flask 애플리케이션을 생성해야 합니다. 다음 코드를 app.py 파일에 작성해주세요.

from flask import Flask, jsonify, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/load-more')
def load_more():
    # 추가 콘텐츠 로직 작성
    # 필요한 데이터를 불러와서 jsonify를 사용하여 JSON 형태로 반환해주세요.
    return jsonify(data=...)

if __name__ == '__main__':
    app.run()

위 코드를 실행하면 Flask 애플리케이션을 실행할 수 있습니다.

HTML 템플릿 작성하기

무한 스크롤을 구현하기 위해선 HTML 템플릿 파일도 작성해야 합니다. templates 폴더에 index.html 파일을 생성하고 다음 코드를 작성해주세요.

<!DOCTYPE html>
<html>
<head>
    <title>Infinite Scroll Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var page = 1;

        $(window).scroll(function() {
            if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
                page++;
                $.get('/load-more', {page: page}, function(response) {
                    // 응답 데이터를 처리하는 로직 작성
                });
            }
        });
    </script>
</head>
<body>
    <!-- 콘텐츠 영역 작성 -->
</body>
</html>

위 코드에서는 $(window).scroll 이벤트를 이용하여 사용자가 스크롤을 내릴 때마다 /load-more 엔드포인트에 요청을 보내는 로직을 작성했습니다. 추가로 필요한 데이터를 가져온 뒤, 가져온 데이터를 처리하는 로직을 구현해주어야 합니다.

추가 콘텐츠 로직 작성하기

load_more 함수에서 데이터를 가져오는 로직을 작성해야 합니다. 여기서는 단순히 예시로 JSON 형태의 데이터를 반환하도록 작성하겠습니다.

@app.route('/load-more')
def load_more():
    page = request.args.get('page', type=int)
    data = get_data(page)  # page에 해당하는 데이터를 가져오는 함수 작성
    return jsonify(data=data)

위 코드에서는 /load-more 엔드포인트로부터 page 파라미터를 받아서 해당 페이지에 해당하는 데이터를 가져오는 로직을 작성했습니다. get_data 함수는 필요에 따라 각자 구현해야 합니다.

마무리

이제 웹 서버에 무한 스크롤 기능이 추가된 모습을 확인할 수 있습니다. Flask를 사용하여 간단히 구현할 수 있는 무한 스크롤 기능은 웹 페이지의 사용자 경험을 향상시키는 데에 큰 도움을 줍니다. 추가로 데이터를 불러오는 로직을 작성하거나, 스타일링을 진행하여 더욱 완성도 있는 페이지를 만들어보세요.