안녕하세요! 그레이 해커 월횽입니다. 오늘은 Flask와 프론트엔드를 연동하여 완성도 높은 웹 애플리케이션을 구축하는 방법을 알아보겠습니다. 이 강의에서는 백엔드와 프론트엔드를 효율적으로 연결하고, 사용자 경험을 극대화하는 방법에 대해 다룹니다. 주로 Flask와 JavaScript (특히 Fetch API)를 활용하여 데이터를 주고받는 방식을 소개하고, 데이터 동기화와 사용자 인터페이스의 일관성을 유지하는 기법을 알아보겠습니다.
1. 백엔드와 프론트엔드 간의 통신 방법 이해
Flask와 프론트엔드는 주로 HTTP 요청과 JSON 데이터로 통신합니다. 백엔드는 클라이언트의 요청을 처리하고, 결과 데이터를 JSON 형식으로 응답합니다. 이를 통해 프론트엔드가 실시간 데이터를 받아 화면에 표시할 수 있습니다.
2. Fetch API를 활용한 데이터 통신
JavaScript의 Fetch API를 사용하면 비동기적으로 백엔드와 데이터를 주고받을 수 있습니다. 기본적인 데이터 요청 예제는 다음과 같습니다.
// 데이터 요청 함수
async function fetchData() {
try {
const response = await fetch('/api/data');
const data = await response.json();
console.log("Data received:", data);
} catch (error) {
console.error("Error fetching data:", error);
}
}
3. Flask에서 API 엔드포인트 구성
Flask에 프론트엔드가 데이터를 요청할 수 있는 API 엔드포인트를 구성합니다. 예를 들어, 사용자 정보를 제공하는 /api/user 엔드포인트를 만들어 보겠습니다.
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/user', methods=['GET'])
def get_user():
user_data = {"username": "월횽", "level": "초급 해커"}
return jsonify(user_data)
4. 프론트엔드에서 API 데이터 표시
JavaScript로 받은 데이터를 HTML 요소에 반영하여 사용자가 볼 수 있도록 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Flask 연동 웹 애플리케이션</title>
<script>
async function fetchUserData() {
try {
const response = await fetch('/api/user');
const userData = await response.json();
document.getElementById('username').innerText = userData.username;
document.getElementById('level').innerText = userData.level;
} catch (error) {
console.error("Error fetching user data:", error);
}
}
document.addEventListener('DOMContentLoaded', fetchUserData);
</script>
</head>
<body>
<h1>사용자 정보</h1>
<p>이름: <span id="username"></span></p>
<p>레벨: <span id="level"></span></p>
</body>
</html>
5. 데이터 전송 - 사용자 입력 처리
프론트엔드에서 사용자가 입력한 데이터를 백엔드로 전송하여 처리하는 방법도 필요합니다. 예를 들어, 사용자가 입력한 정보를 저장하는 /api/save 엔드포인트를 생성해 보겠습니다.
@app.route('/api/save', methods=['POST'])
def save_data():
data = request.get_json()
# 받은 데이터를 처리 (예: 데이터베이스에 저장)
return jsonify({"status": "success", "message": "데이터가 저장되었습니다."})
프론트엔드에서는 fetch를 사용하여 POST 요청을 보냅니다.
async function saveUserData(userData) {
try {
const response = await fetch('/api/save', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(userData),
});
const result = await response.json();
console.log(result.message);
} catch (error) {
console.error("Error saving user data:", error);
}
}
6. UI 개선을 위한 CSS 프레임워크 사용
Flask와 프론트엔드의 연동이 잘 되면, Bootstrap과 같은 CSS 프레임워크를 활용해 UI를 개선할 수 있습니다. 예제 페이지에 스타일을 추가하여 사용자가 쉽게 인터페이스를 사용할 수 있도록 돕습니다.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<h1 class="mt-5">사용자 정보</h1>
<div class="card p-3">
<p><strong>이름:</strong> <span id="username"></span></p>
<p><strong>레벨:</strong> <span id="level"></span></p>
</div>
</div>
7. 실시간 알림을 추가하여 인터랙티브 기능 강화
Flask-SocketIO와 같은 도구로 실시간 알림 기능을 추가하면, 사용자와의 상호작용을 보다 강화할 수 있습니다.
이번 강의를 통해 Flask와 프론트엔드를 연동해 보았습니다. 다음 시간에는 Flask로 만든 애플리케이션을 배포하고 최적화하는 방법을 알아보겠습니다!
- 이전 수업 목록
'프로그래밍 > Python' 카테고리의 다른 글
| [Python 강의] 32강 - Flask 기반 RESTful API 구축과 활용 (0) | 2024.11.12 |
|---|---|
| [Python 강의] 31강 - Flask로 만든 애플리케이션을 배포하고 최적화하는 방법 (1) | 2024.11.11 |
| [Python 강의] 29강 - Flask와 비동기 작업을 활용한 실시간 알림 시스템 구축 (0) | 2024.11.07 |
| [Python 강의] 28강 - Flask를 이용한 비동기 작업 처리 (0) | 2024.11.06 |
| [Python 강의] 27강 - Flask 애플리케이션을 위한 보안 최적화 (0) | 2024.11.05 |