본문 바로가기
Python/Flask

[Day 3] 템플릿 엔진과 HTML 렌더링

by 깨준 2024. 7. 17.

템플릿 엔진과 HTML 렌더링

1. 템플릿 엔진의 개념과 역할

템플릿 엔진은 웹 애플리케이션에서 HTML 파일을 동적으로 생성하기 위해 사용되는 도구입니다. 템플릿 엔진을 사용하면 고정된 HTML 파일에 동적으로 데이터를 삽입하거나 제어 구조(조건문, 반복문 등)를 적용할 수 있습니다. 이를 통해 웹 페이지를 동적으로 생성하고, 서버에서 데이터와 결합하여 사용자에게 제공할 수 있습니다.

역할:

  1. HTML 파일과 데이터의 결합: 서버 측에서 데이터를 가져와 HTML에 동적으로 삽입합니다.
  2. 재사용성: 공통된 레이아웃이나 컴포넌트를 재사용할 수 있습니다.
  3. 유지 보수성: HTML 코드와 비즈니스 로직을 분리하여 코드를 깔끔하게 유지합니다.

2. Flask에서 템플릿 사용법

Flask는 Jinja2라는 템플릿 엔진을 기본으로 사용합니다. Jinja2는 간단하면서도 강력한 템플릿 언어로, 다양한 기능을 제공합니다. Flask 애플리케이션에서 템플릿을 사용하는 기본적인 과정은 다음과 같습니다.

Jinja2는 파이썬으로 작성된 템플릿 엔진으로, 주로 웹 애플리케이션에서 동적인 HTML을 생성하는 데 사용됩니다. Flask와 같은 웹 프레임워크에서 기본 템플릿 엔진으로 사용되며, HTML 파일에 파이썬 변수를 삽입하거나, 조건문과 반복문을 사용하는 등 다양한 기능을 제공합니다.

 

💡 Jinja2 주요 기능

       1. 변수 삽입: 파이썬 변수의 값을 템플릿 파일에 삽입할 수 있습니다.

<p>{{ variable }}</p>


       2. 제어 구조: 조건문과 반복문을 사용할 수 있습니다.

{% if condition %}
    <p>Condition is true</p>
{% else %}
    <p>Condition is false</p>
{% endif %}

{% for item in list %}
    <p>{{ item }}</p>
{% endfor %}

 

 

      3. 필터: 변수의 출력을 변경하기 위해 필터를 사용할 수 있습니다.

<p>{{ text|upper }}</p> <!-- text 변수를 대문자로 변환 -->

     

      4. 매크로: 재사용 가능한 템플릿 코드 블록을 정의하고 사용할 수 있습니다.

{% macro input(name, value='') %}
    <input type="text" name="{{ name }}" value="{{ value }}">
{% endmacro %}

{{ input('username') }}

     

      5. 템플릿 상속: 기본 템플릿을 정의하고 이를 상속받아 페이지를 확장할 수 있습니다.

<!-- base.html -->
<html>
<body>
    {% block content %}{% endblock %}
</body>
</html>

<!-- child.html -->
{% extends 'base.html' %}

{% block content %}
    <p>This is the child template.</p>
{% endblock %

3. 사용 예제

Flask를 이용한 웹사이트 구축 (예제 1)

템플릿 파일 (templates/example.html):

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>Hello, {{ user_name }}!</h1>

    {% if is_logged_in %}
        <p>Welcome back!</p>
    {% else %}
        <p>Please log in.</p>
    {% endif %}

    <ul>
        {% for item in items %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>



Flask 애플리케이션 (app.py): 

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    context = {
        'title': 'My Page',
        'user_name': 'John Doe',
        'is_logged_in': True,
        'items': ['Item 1', 'Item 2', 'Item 3']
    }
    return render_template('example.html', **context)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5001, debug=True)

위 예제에서 example.html 템플릿은 title, user_name, is_logged_in, items와 같은 변수를 사용하여 동적으로 HTML을 생성합니다. Flask 애플리케이션에서는 render_template 함수를 사용하여 템플릿에 데이터를 전달하고, 최종적으로 HTML을 렌더링 합니다.

Jinja2는 이러한 기능들을 통해 웹 애플리케이션에서 유연하고 동적인 웹 페이지를 쉽게 생성할 수 있도록 도와줍니다.

템플릿 파일 생성:
템플릿 파일(일반적으로 HTML 파일)은 Flask 애플리케이션의 templates 디렉토리에 위치해야 합니다.
데이터 전달:
Flask의 render_template 함수를 사용하여 템플릿 파일을 렌더링 하고, 데이터(변수)를 템플릿에 전달합니다.

 

 

 

Flask를 이용한 웹사이트 구축 (예제 2)

1. 프로젝트 구조 설정

먼저 프로젝트 디렉토리를 설정합니다.

lab0717/site1/
│
├── app.py
├── templates/
│   ├── base.html
│   ├── index.html
│   └── about.html
└── static/
    └── style.css

 

2. app.py 작성

app.py 파일은 Flask 애플리케이션의 진입점입니다.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/about')
def about():
    return render_template('about.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5001, debug=True)

 

3. HTML 템플릿 작성

templates 디렉토리 안에 HTML 파일을 작성합니다. 먼저 기본 레이아웃을 위한 base.html을 작성합니다.

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>성결대학교</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <header>
        <h1>성결대학교</h1>
        <nav>
            <ul>
                <li><a href="{{ url_for('home') }}">Home</a></li>
                <li><a href="{{ url_for('about') }}">About</a></li>
            </ul>
        </nav>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        <p>&copy; 2024 성결대학교. All rights reserved.</p>
    </footer>
</body>
</html>

그다음, 홈 페이지와 소개 페이지를 작성합니다.

<!-- templates/index.html -->
{% extends "base.html" %}

{% block content %}
<h2>환영합니다!</h2>
<p>성결대학교 웹사이트에 오신 것을 환영합니다.</p>
{% endblock %}

<!-- templates/about.html -->
{% extends "base.html" %}

{% block content %}
<h2>소개</h2>
<p>성결대학교는 대한민국 경기도 안양시에 위치한 사립 대학입니다. 대학은 다양한 학문 분야에서 교육과 연구를 제공합니다.</p>
{% endblock %}

 

4. 스타일 시트 작성

static 디렉토리에 CSS 파일을 작성합니다.

/* static/style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background: #4CAF50;
    color: white;
    padding: 1em 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 1em;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 2em;
}

footer {
    background: #f1f1f1;
    text-align: center;
    padding: 1em 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

 

텝플릿 엔진을 처음 접해보았는데 템블릿 엔진의 역할과 개념에 대해 이해하였고 Flask에서 Jinja2라는 템플릿 엔진을 기본으로 사용하여, Jinja2의 주요 기능을 사용하여서 여러 예제를 구현하여 Jinja2을 능숙하게 활용할 수 있는 발판이 되었다. 그리고 관행으로 html는 templates, css는 static, 이미지는 static/images에 저장한다는 것을 깨달았다.

'Python > Flask' 카테고리의 다른 글

[Day 6] WMS(Warehouse Management System) 구성 및 요구 사항 정의 1  (2) 2024.07.23
[Day 5] 사용자 인증 시스템 구현  (0) 2024.07.21
[Day 4] Database 완성  (2) 2024.07.18
[Day 2] Flask Routing과 URL 설정  (0) 2024.07.17
[Day 1] AWS Cloud EC2 based Ubuntu Linux VM building  (0) 2024.07.17

관련글

티스토리툴바