Colin's Blog
[파이썬] 웹 프레임워크를 이용한 실시간 데이터 대시보드

이 글에서는 파이썬을 사용하여 실시간 데이터 대시보드를 구축하는 방법을 다룹니다. 실시간 데이터 대시보드는 실시간으로 업데이트되는 데이터를 시각적으로 확인할 수 있는 웹 인터페이스를 제공하는 도구입니다. 웹 프레임워크를 이용하면 데이터를 쉽게 시각화하고 웹에서 실시간으로 확인할 수 있습니다.

웹 프레임워크 선택

우리는 이 예시에서 Flask 웹 프레임워크를 사용할 것입니다. Flask는 파이썬으로 작성된 경량 웹 프레임워크로, 간단한 구성과 확장성 높은 기능들을 제공합니다.

Flask를 설치하려면 다음 명령어를 실행하세요:

$ pip install flask

실시간 데이터 수집

먼저, 실시간 데이터를 수집하는 부분을 구현해야 합니다. 이 예시에서는 간단한 예시로서 랜덤한 숫자를 생성하는 함수를 사용하겠습니다.

import random

def generate_data():
    return random.randint(1, 100)

위의 코드는 1부터 100 사이의 난수를 반환하는 generate_data() 함수를 정의합니다. 이 함수는 실제로 데이터를 수집해야 하는 경우에 해당하는 로직을 포함해야 합니다.

Flask 앱 설정

다음으로, Flask 애플리케이션을 설정해야 합니다.

from flask import Flask, render_template
import time

app = Flask(__name__)

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

@app.route('/data')
def get_data():
    while True:
        data = generate_data()
        time.sleep(1)  # 1초마다 데이터 업데이트
        yield f"data: {data}\n\n"

위의 코드는 Flask 애플리케이션을 설정하는 부분입니다. @app.route('/') 데코레이터는 기본 경로(‘/’)에 접근하면 dashboard.html 템플릿을 렌더링하도록 설정합니다. /data 경로는 서버 사이드 이벤트를 사용하여 실시간 데이터를 전송합니다.

대시보드 템플릿

대시보드를 표시할 HTML 파일을 생성하겠습니다. 이 예시에서는 <div> 요소를 사용하여 데이터를 표시하고, 자바스크립트를 사용하여 실시간 데이터 업데이트를 처리하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-time Dashboard</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Real-time Dashboard</h1>
    <div id="data"></div>

    <script>
        var eventSource = new EventSource("/data");

        eventSource.onmessage = function(event) {
            var data = event.data;
            $("#data").text("Data: " + data);
        };
    </script>
</body>
</html>

위의 코드는 대시보드 템플릿을 정의하는 부분입니다. <div> 요소를 사용하여 데이터를 표시하고, 자바스크립트를 사용하여 실시간 데이터 업데이트를 처리합니다. /data 경로를 통해 데이터를 수신합니다.

애플리케이션 실행

마지막으로, Flask 애플리케이션을 실행해보겠습니다.

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

위의 코드를 실행하여 애플리케이션을 실행합니다. debug=True 옵션은 개발 중 디버그 모드를 활성화합니다.

실행된 애플리케이션을 브라우저에서 확인하면, 실시간으로 업데이트되는 데이터를 확인할 수 있는 대시보드를 볼 수 있습니다.

이제 웹 프레임워크를 이용하여 실시간 데이터 대시보드를 구축하는 방법에 대해 알아보았습니다. 데이터 수집 로직과 대시보드 템플릿을 실제 프로젝트에 맞게 수정하여 사용할 수 있습니다.

© 2018 Colin. All rights reserved.