Flask와 Jinja 템플릿을 사용한 사용자 목록 웹 페이지 만들기
이번 프로젝트에서는 Flask 애플리케이션을 설정하고 Jinja 템플릿을 활용하여 사용자 목록을 웹 페이지에 표시하는 방법을 익힐 수 있습니다. 아래는 이를 위한 단계별 안내입니다.
1. Flask 애플리케이션 설정
먼저 app.py 파일을 만들어 Flask 애플리케이션을 설정합니다. 애플리케이션은 루트 URL ('/')에 접속했을 때 사용자 목록을 보여주는 뷰 함수를 만듭니다.
app.py 파일 내용:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
# 사용자 데이터 정의
users = [
{"username": "traveler", "name": "Alex"},
{"username": "photographer", "name": "Sam"},
{"username": "gourmet", "name": "Chris"}
]
# 사용자 목록을 템플릿으로 전달
return render_template('index.html', users=users)
if __name__ == '__main__':
app.run(debug=True)- Flask: Flask 애플리케이션을 생성하는데 사용됩니다.
- render_template: 템플릿을 렌더링하는 데 사용됩니다.
- @app.route('/'): 루트 URL에 대해 뷰 함수를 정의합니다. 사용자가 웹 브라우저에서 / 경로로 접속할 때 호출됩니다.
- users: 표시할 사용자 데이터를 정의합니다.
2. 사용자 데이터 정의
애플리케이션에서는 사용자의 username과 name을 포함한 간단한 목록을 정의합니다. 위 코드에서 이미 정의한 사용자 데이터는 다음과 같습니다:
users = [
{"username": "traveler", "name": "Alex"},
{"username": "photographer", "name": "Sam"},
{"username": "gourmet", "name": "Chris"}
]이 데이터는 웹 페이지에서 각 사용자의 name과 username을 표시하는 데 사용됩니다.
3. Jinja 템플릿 작성
templates 폴더 안에 index.html 파일을 만들고, Jinja 템플릿을 사용하여 사용자 목록을 HTML로 렌더링합니다. index.html은 Flask 애플리케이션에서 사용자 데이터를 동적으로 표시하는 HTML 페이지입니다.
templates/index.html 파일 내용:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User List</title>
</head>
<body>
<h1>User List</h1>
<ul>
{% for user in users %}
<li>{{ user.name }} ({{ user.username }})</li>
{% else %}
<li>No users found.</li>
{% endfor %}
</ul>
</body>
</html>- Jinja 템플릿 문법:
- {{ ... }}: 데이터를 HTML로 출력하는 데 사용됩니다. user.name과 user.username이 출력됩니다.
- {% for user in users %} ... {% endfor %}: users 리스트의 각 항목에 대해 반복문을 실행합니다. 각 사용자에 대해 name과 username을 출력합니다.
- {% else %}: 만약 users 목록이 비어있으면 "No users found."라는 메시지를 출력합니다.
4. 웹 페이지 실행 및 테스트
애플리케이션을 실행한 후, 웹 브라우저에서 http://localhost:5000/에 접속하여 결과를 확인합니다.
- Flask 서버를 실행하려면 터미널에서 아래 명령어를 입력합니다:
python app.py- 서버가 실행되면, 웹 브라우저에서 http://localhost:5000/에 접속하여 사용자 목록이 올바르게 표시되는지 확인합니다.
추가 설명
- Jinja 템플릿을 사용하면 Python에서 데이터를 HTML로 동적으로 렌더링할 수 있습니다. 템플릿 내에서 조건문과 반복문을 활용하여 사용자 목록과 같은 데이터를 표시할 수 있습니다.
- Flask는 매우 간단하고 직관적인 웹 프레임워크로, 빠르게 웹 애플리케이션을 개발할 수 있습니다. Jinja는 Flask의 템플릿 엔진으로, HTML을 동적으로 생성하는 데 유용합니다.
'과제' 카테고리의 다른 글
| Flask practice blog 구축 app.py, db.yaml (1/3) (0) | 2025.04.22 |
|---|---|
| Flask와 Smorest api를 이용한 책 데이터를 관리하는 기능 구현(Flask 2일차) (0) | 2025.04.18 |
| Mini Project : Mini Project. 회원가입폼만들기 (Javascript :2일차 과제)+@ (0) | 2025.04.01 |
| 📌Mongo DB 심화 5문제 with python (0) | 2025.03.27 |
| 페어 과제 (0) | 2025.03.24 |