과제

Flask와 Jinja 템플릿으로 사용자 목록 웹 페이지 만들어보기(Flask 1일차)

Chansman 2025. 4. 17. 18:35

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을 동적으로 생성하는 데 유용합니다.