프로젝트

Flask와 Jinja 템플릿 활용 프로젝트

Chansman 2025. 4. 17. 18:16

위 코드는 Flask와 Jinja 템플릿을 사용하여 기본적인 웹 애플리케이션을 만드는 예시입니다. 코드를 분석하고, 이 코드가 어떻게 작동하는지 설명해 드리겠습니다.

1. app.py 코드 설명

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 템플릿에 전달할 데이터
    data = {
        'title': 'Flask Jinja Template',
        'user': 'Chansman',
        'is_admin': True,
        'item_list': ['Item 1', 'Item 2', 'Item 3']  # 반드시 리스트 형태여야 합니다.
    }

    # 데이터 출력하여 확인
    print(data)  # 서버 콘솔에 출력

    return render_template('index.html', data=data)

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

설명:

  • Flask 라이브러리를 사용하여 웹 애플리케이션을 생성합니다.
  • / URL 경로에서 index() 함수가 호출됩니다.
  • index() 함수는 **data**라는 딕셔너리를 정의하고 이를 템플릿(index.html)로 전달합니다.
    • data 딕셔너리는 4개의 항목을 포함하고 있습니다:
      • 'title': 웹 페이지 제목
      • 'user': 사용자 이름
      • 'is_admin': 관리자인지 여부 (Boolean)
      • 'item_list': 아이템 목록 (리스트 형태)
  • render_template는 data를 index.html 템플릿에 전달합니다.
  • print(data)는 서버 콘솔에 데이터를 출력하여 확인할 수 있도록 합니다.
  • app.run(debug=True)는 Flask 애플리케이션을 디버그 모드에서 실행하게 해줍니다.

2. index.html 템플릿 설명

<!DOCTYPE html>
<html>
  <head>
    <title>{{ data.title }}</title>
  </head>
  <body>
    <h1>Hello, {{ data.user }}!</h1>

    {% if data.is_admin %}
    <p>You have admin privileges.</p>
    {% else %}
    <p>You do not have admin privileges.</p>
    {% endif %}

    <ul>
      {% for item in data.item_list %}
      <li>{{ item }}</li>
      {% endfor %}
    </ul>
  </body>
</html>

설명:

  • {{ data.title }}: Flask에서 전달된 data 딕셔너리에서 'title' 값을 가져와 HTML <title> 태그 안에 표시합니다.
  • {{ data.user }}: data['user'] 값을 가져와 <h1> 태그에 사용자 이름을 표시합니다.
  • {% if data.is_admin %}: data['is_admin'] 값이 True일 경우 "You have admin privileges."를 출력하고, 그렇지 않으면 "You do not have admin privileges."를 출력합니다.
    • Jinja의 if 구문을 사용하여 조건에 따라 다른 콘텐츠를 출력합니다.
  • {% for item in data.item_list %}: data['item_list']는 리스트이므로, Jinja의 for 구문을 사용하여 리스트의 각 항목을 반복합니다. 각 항목은 <li> 태그로 표시됩니다.

3. 기능 설명

  • 템플릿 렌더링: render_template 함수는 index.html을 렌더링할 때 data 딕셔너리를 템플릿에 전달합니다. 템플릿에서 **data**를 사용하여 웹 페이지의 내용을 동적으로 채웁니다.
  • 조건문 사용: Jinja 템플릿의 {% if %}와 {% else %} 구문을 사용하여 is_admin 값에 따라 다른 텍스트를 표시합니다.
  • 반복문 사용: {% for item in data.item_list %} 구문을 사용하여 item_list의 각 아이템을 반복적으로 HTML 목록(<ul>)으로 출력합니다.

4. 전체 동작 흐름

  1. 클라이언트가 http://127.0.0.1:5000/ 경로로 요청을 보냅니다.
  2. Flask는 index() 함수를 실행하고, data 딕셔너리를 **템플릿(index.html)**에 전달합니다.
  3. 템플릿에서 data 값을 참조하여 페이지 제목, 사용자 이름, 관리 권한, 아이템 목록을 동적으로 렌더링합니다.
  4. 클라이언트는 렌더링된 HTML 페이지를 확인합니다.

5. 서버 콘솔 출력 예시

서버 콘솔에서는 print(data)로 출력된 data 딕셔너리를 확인할 수 있습니다.

{'title': 'Flask Jinja Template', 'user': 'Chansman', 'is_admin': True, 'item_list': ['Item 1', 'Item 2', 'Item 3']}

6. 웹 페이지 출력 예시

웹 페이지를 열면 다음과 같은 내용이 표시됩니다:

  • 제목: Flask Jinja Template
  • 본문:
    • Hello, Chansman!
    • You have admin privileges.
    • 아이템 목록:
      • Item 1
      • Item 2
      • Item 3

결론

  • 이 코드는 Flask와 Jinja 템플릿을 사용하여 동적 웹 페이지를 생성하는 기본적인 예제입니다.
  • 템플릿 변수를 사용하여 웹 페이지의 콘텐츠를 동적으로 채우며, 조건문과 반복문을 통해 다양한 콘텐츠를 사용자에 맞게 표시합니다.
  • render_template을 사용해 데이터를 템플릿에 전달하고, 템플릿에서 이를 동적으로 처리하는 방식으로 웹 애플리케이션을 구현합니다.