웹 페이지에서 사용자의 행동에 따라 동적으로 상호작용하는 기능을 구현하기 위해서는 이벤트 처리가 필요합니다. 이번 포스트에서는 Python과 Flask 프레임워크를 사용하여 웹 페이지에서 이벤트를 처리하는 방법을 알아보겠습니다.
Flask 소개
Flask는 파이썬 웹 프레임워크로, 간결하면서도 유연한 구조를 가지고 있습니다. 이번 예제에서는 Flask를 사용하여 웹 페이지를 구축하고, 이벤트를 처리하는 방법을 알아보겠습니다.
핵심 개념
웹 페이지에서 이벤트를 처리하는 핵심 개념은 JavaScript를 사용하는 것입니다. JavaScript를 사용하여 웹 페이지의 요소에 이벤트 리스너를 등록하고, 해당 이벤트가 발생했을 때 특정 동작을 수행하도록 할 수 있습니다.
예제 코드
아래는 Flask를 사용하여 간단한 웹 페이지를 구축하고, 클릭 이벤트를 처리하는 예제 코드입니다. 코드를 실행하면 웹 페이지가 열리고 버튼을 클릭할 때마다 클릭 횟수가 증가합니다.
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/click', methods=['POST'])
def on_click():
click_count = request.json.get('click_count', 0)
click_count += 1
return jsonify(click_count=click_count)
if __name__ == '__main__':
app.run(debug=True)
웹 페이지 템플릿
웹 페이지의 디자인과 레이아웃을 정의하기 위해 HTML 템플릿을 사용합니다. 아래는 index.html 파일의 내용입니다.
<!DOCTYPE html>
<html>
<head>
<title>Click Counter</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Click Counter</h1>
<p>Click Count: <span id="click-count">0</span></p>
<button id="click-button">Click Me</button>
<script>
$(document).ready(function() {
var clickCount = 0;
$('#click-button').click(function() {
clickCount += 1;
$.ajax({
url: '/click',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({
click_count: clickCount
}),
success: function(response) {
$('#click-count').text(response.click_count);
}
});
});
});
</script>
</body>
</html>
코드 실행하기
위의 코드를 실행하기 위해서는 Flask 및 jQuery 라이브러리가 설치되어 있어야 합니다. 아래의 명령어를 사용하여 필요한 패키지를 설치할 수 있습니다.
$ pip install flask
위의 코드를 app.py라는 이름으로 저장한 후, 아래의 명령어를 실행하여 웹 서버를 실행합니다.
$ python app.py
웹 브라우저에서 http://localhost:5000을 열면 웹 페이지가 나타나며, 버튼을 클릭할 때 마다 클릭 횟수가 증가하는 것을 확인할 수 있습니다.
결론
이번 포스트에서는 Python과 Flask를 사용하여 웹 페이지에서 이벤트를 처리하는 방법을 알아보았습니다. 웹 페이지의 사용자의 동작에 반응하여 동적인 기능을 구현할 수 있으므로, 이벤트 처리는 웹 개발에서 중요한 요소입니다. 이를 통해 보다 인터랙티브하고 흥미로운 웹 애플리케이션을 개발할 수 있습니다.
참고자료: