Chapter 5-3 Flask와 Jinja를 활용한 사용자 관리 웹 애플리케이션

Flask

Chapter 5-3 Flask와 Jinja를 활용한 사용자 관리 웹 애플리케이션

Chansman 2025. 4. 23. 10:21

📌 Flask와 Jinja를 활용한 사용자 관리 웹 애플리케이션

이 프로젝트에서는 Flask와 Jinja 템플릿을 사용하여 간단한 사용자 관리 웹 애플리케이션을 구축합니다. 사용자를 추가, 수정, 삭제할 수 있는 기능과 목록을 확인할 수 있는 페이지를 제작합니다.

🚦 동작 원리 및 구조

Flask 웹 애플리케이션은 다음과 같은 구조를 가집니다:

URL 경로 기능 설명

/	사용자 목록 표시
/add	사용자 추가 (GET, POST)
/edit/<username>	사용자 정보 수정 (GET, POST)
/delete/<username>	사용자 삭제

데이터는 임시로 메모리에 저장된 리스트 형태로 관리됩니다.

💻 코드 예시 및 흐름 분석

app.py

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

# 사용자 데이터
users = [
    {"username": "traveler", "name": "Alex"},
    {"username": "photographer", "name": "Sam"},
    {"username": "gourmet", "name": "Chris"}
]

# 사용자 목록 페이지
@app.route('/')
def index():
    return render_template('index.html', users=users)

# 사용자 추가
@app.route('/add', methods=['GET', 'POST'])
def add_user():
    if request.method == 'POST':
        username = request.form['username']
        name = request.form['name']
        users.append({'username': username, 'name': name})
        return redirect(url_for('index'))
    return render_template('add_user.html')

# 사용자 수정
@app.route('/edit/<username>', methods=['GET', 'POST'])
def edit_user(username):
    user = next((u for u in users if u['username'] == username), None)
    if user is None:
        return redirect(url_for('index'))
    if request.method == 'POST':
        user['name'] = request.form['name']
        return redirect(url_for('index'))
    return render_template('edit_user.html', user=user)

# 사용자 삭제
@app.route('/delete/<username>')
def delete_user(username):
    global users
    users = [u for u in users if u['username'] != username]
    return redirect(url_for('index'))

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

🖥️ HTML 템플릿 구성

templates/index.html

<!DOCTYPE html>
<html>
<head>
    <title>User Management</title>
</head>
<body>
    <h1>User List</h1>
    <ul>
    {% for user in users %}
        <li>{{ user.name }} ({{ user.username }})
            <a href="/edit/{{ user.username }}">Edit</a>
            <a href="/delete/{{ user.username }}">Delete</a>
        </li>
    {% endfor %}
    </ul>
    <a href="/add">Add User</a>
</body>
</html>

templates/add_user.html

<!DOCTYPE html>
<html>
<head>
    <title>Add User</title>
</head>
<body>
    <h1>Add User</h1>
    <form method="post">
        Username: <input type="text" name="username"><br>
        Name: <input type="text" name="name"><br>
        <input type="submit" value="Add">
    </form>
    <a href="{{ url_for('index') }}">Back</a>
</body>
</html>

templates/edit_user.html

<!DOCTYPE html>
<html>
<head>
    <title>Edit User</title>
</head>
<body>
    <h1>Edit User</h1>
    <form method="post">
        Name: <input type="text" name="name" value="{{ user.name }}"><br>
        <input type="submit" value="Update">
    </form>
    <a href="{{ url_for('index') }}">Back</a>
</body>
</html>

🧪 실전 사례 및 테스트

웹 서버 실행: python app.py
브라우저에서 http://127.0.0.1:5000/ 접속하여 사용자 목록 확인
사용자 추가, 수정, 삭제 기능 동작 테스트

🧠 고급 팁 or 자주 하는 실수

✅ 사용자 데이터는 메모리에 저장되므로, 서버가 종료되면 데이터가 사라집니다. 실제 배포 시 데이터베이스를 활용해야 합니다. ✅ 사용자 추가 시 동일한 사용자 이름을 중복 등록하지 않도록 예외 처리를 추가하는 것이 좋습니다. ✅ 수정이나 삭제 시, 존재하지 않는 사용자를 처리하는 예외 로직을 추가해 안정성을 높일 수 있습니다.

✅ 마무리 요약 및 복습 포인트

Flask와 Jinja를 이용하여 사용자 관리 웹을 손쉽게 구현할 수 있습니다.
라우트와 폼 처리를 통해 사용자 추가, 수정, 삭제 기능을 명확하게 구현할 수 있습니다.
데이터의 유효성을 확인하고 오류 처리 로직을 추가하는 것이 안정적인 웹 애플리케이션 구현의 핵심입니다.