기술블로그-Flask편

Flask 템플릿 렌더링 with 파머(1/3)

Chansman 2025. 4. 23. 11:27

📌 개념 정리

Flask는 파이썬으로 작성된 웹 프레임워크로, 웹 애플리케이션을 구축하는 데 매우 유용합니다. Flask의 핵심 기능 중 하나는 템플릿 렌더링입니다. 이를 통해 HTML 페이지와 파이썬 코드 간의 데이터를 전달하고 동적으로 페이지를 생성할 수 있습니다. 이번 포스팅에서는 Flask 애플리케이션에서 취미 목록을 렌더링하는 간단한 예제를 통해 Flask 템플릿 렌더링 방법을 설명합니다.

🚦 동작 원리 및 구조

  1. Flask 애플리케이션 초기화: Flask 클래스를 사용하여 애플리케이션 객체를 생성합니다.
  2. 라우팅: @app.route() 데코레이터를 사용하여 URL 경로와 그에 대응하는 뷰 함수를 정의합니다.
  3. 템플릿 렌더링: render_template 함수로 HTML 템플릿을 렌더링하고, 파이썬에서 정의한 데이터를 템플릿으로 전달하여 동적 페이지를 생성합니다.
  4. HTML 템플릿: Jinja2 템플릿 엔진을 사용하여 파이썬 데이터를 HTML 페이지에 삽입합니다. 이를 통해 HTML 코드에서 반복문 등을 사용하여 동적으로 내용을 표시할 수 있습니다.

💻 코드 예시 및 흐름 분석

1. Flask 애플리케이션 설정 (Python 코드)

from flask import Flask, render_template, url_for, redirect

# Flask 애플리케이션 객체 생성
app = Flask(__name__)

@app.route('/hobbies')  # /hobbies URL로 접근 시 해당 함수 실행
def hobbies():
    # 취미 리스트 정의
    hobby_list = ['독서', '운동', '게임']
    
    # 템플릿 렌더링, hobby_list 데이터를 템플릿에 전달
    return render_template('hobbies.html', hobbies=hobby_list)

if __name__ == '__main__':
    # 애플리케이션 실행
    app.run(debug=True)
  • Flask(__name__): Flask 애플리케이션 객체를 생성합니다.
  • @app.route('/hobbies'): /hobbies 경로에 대해 호출될 함수 hobbies를 정의합니다.
  • render_template('hobbies.html', hobbies=hobby_list): hobbies.html 템플릿을 렌더링하고, hobby_list 데이터를 hobbies 변수로 전달합니다.
  • app.run(debug=True): Flask 서버를 실행합니다. 디버그 모드를 활성화하여 코드 변경 시 자동으로 서버를 재시작하게 합니다.

2. HTML 템플릿 (hobbies.html)

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>

    <!-- 취미 리스트를 반복문을 통해 출력 -->
    <ul>
      {% for hobby in hobbies %}  <!-- hobbies 리스트를 반복 -->
      <li>{{ hobby }}</li>  <!-- 각 hobby를 <li> 태그로 출력 -->
      {% endfor %}
    </ul>

  </body>

</html>
  • {% for hobby in hobbies %}: hobbies 리스트를 반복하면서 각 항목을 HTML로 출력합니다.
  • {{ hobby }}: 리스트의 각 항목을 출력합니다.
  • {% endfor %}: 반복문 종료 태그입니다.

🧪 실전 사례

이 예제에서는 사용자가 /hobbies URL로 접속하면, Flask는 hobbies() 함수를 호출하여 hobby_list를 템플릿으로 전달하고, HTML 페이지가 동적으로 생성됩니다. hobbies.html 템플릿은 hobby_list의 항목들을 <ul> 태그 안에 <li> 리스트 항목으로 출력합니다.

  1. 독서, 운동, 게임이라는 취미가 웹 페이지에 리스트 형태로 표시됩니다.
  2. Flask는 Jinja2 템플릿 엔진을 사용하여 HTML 내에서 파이썬 데이터를 삽입할 수 있습니다.

🧠 고급 팁 or 자주 하는 실수

  • 자주 하는 실수: 템플릿에 데이터를 전달할 때 변수명이 일치하지 않으면 렌더링이 실패합니다. 예를 들어, hobbies=hobby_list로 데이터 전달 시 템플릿에서 {% for hobby in hobbies %}로 정확히 일치하는 변수명이 필요합니다.
  • 고급 팁: Flask에서는 템플릿에 데이터뿐만 아니라 조건문, 반복문 등을 사용할 수 있습니다. for와 if 구문을 적절히 활용하면 복잡한 동적 페이지도 쉽게 구성할 수 있습니다.

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

  • Flask 애플리케이션: URL과 함수 연결 및 render_template를 사용한 HTML 렌더링.
  • Jinja2 템플릿: for와 if 반복문을 사용하여 데이터를 동적으로 표시.
  • 데이터 전달: Flask에서 템플릿으로 데이터를 전달하고, 이를 HTML에서 동적으로 출력하는 방법을 배웠습니다.