template
1. template_folder='templates'의 의미
Flask는 기본적으로 프로젝트 폴더 내의 templates라는 이름의 폴더를 찾아서 HTML 파일을 로드하도록 설계되어 있습니다.
- 의미: "HTML 파일들이 저장되어 있는 폴더 이름이 templates입니다."라고 명시적으로 알려주는 것입니다.
- 왜 쓸까?: 만약 이 코드를 쓰지 않아도 Flask는 기본적으로 templates 폴더를 찾습니다. 하지만 폴더 이름을 다른 것으로 바꾸고 싶다면(예: views 폴더 사용) 반드시 이 설정이 필요합니다.
# 템플릿 폴더 이름을 'views'로 바꾸고 싶을 때
app = Flask(__name__, template_folder='views')
2. 정적 HTML vs 동적 템플릿 (렌더링)
- render_template_string: 파이썬 코드 안에 HTML 문자열을 직접 넣을 때 씁니다. 간단한 테스트용입니다.
- render_template: 별도의 .html 파일을 불러올 때 씁니다. 실무에서는 무조건 이 방식을 사용합니다(HTML과 로직의 분리).
# 파일 불러오기 예시
@app.route('/')
def index():
return render_template("index.html") # templates/index.html 파일을 찾아 렌더링
3. 파이썬 데이터를 HTML로 보내기
파이썬의 데이터를 render_template의 인자로 전달하면 HTML 안에서 {{ }}를 통해 사용할 수 있습니다.
@app.route('/greeting/<name>')
def greeting(name):
# 'template_variable'이라는 이름으로 name 값을 보냄
return render_template('greeting.html', template_variable=name)
[HTML: greeting.html]
<h1>안녕하세요, {{ template_variable }}님!</h1>
4. 템플릿 엔진(Jinja2)의 핵심 기능 (조건문과 반복문)
HTML 내부에서 데이터를 가공할 때 Jinja2의 {% %} 문법을 사용합니다.
- 조건문 (if)
상태에 따라 화면을 다르게 보여줍니다.
{% if count == 0 %}
<p>만차입니다.</p>
{% else %}
<p>주차 가능 (잔여: {{ count }})</p>
{% endif %}
- 반복문 (for)
리스트나 딕셔너리 데이터를 화면에 나열할 때 씁니다.
<ul>
{% for item in products %}
<li>{{ item.name }} - {{ item.price }}원</li>
{% endfor %}
</ul>
💡 개념 요약 (한눈에 보기)
| 개념 | 역할 | 코드 예시 |
| render_template | HTML 파일을 찾아서 파이썬과 합침 | render_template('list.html', data=list) |
| {{ 변수 }} | 파이썬에서 전달받은 값 출력 | <h1>{{ name }}</h1> |
| {% if/for %} | HTML 내부 로직 처리 (조건, 반복) | {% for p in products %} ... {% endfor %} |
| template_folder | HTML 파일이 담긴 폴더 지정 | Flask(__name__, template_folder='...') |
5. template 상속(extends), include
- extends (템플릿 상속)
- 웹 사이트의 공통 부분(헤더, 푸터, 네비게이션바 등)을 부모 템플릿에 두고, 페이지별로 내용은 다르게 구성하는 방법입니다. ([base.html - 부모 템플릿][index.html - 자식 템플릿])
- 개념: 부모(base) 템플릿의 틀을 그대로 물려받고, 자식 템플릿이 필요한 부분(block)만 갈아 끼웁니다.
- block
- 부모(Base)의 역할: {% block 이름 %} ... {% endblock %}을 사용하여 비워둘 공간을 미리 선언합니다.
- 자식(Child)의 역할: {% block 이름 %} ... {% endblock %}을 사용하여 부모가 비워둔 공간에 나만의 내용을 채워 넣습니다.
{% extends "base.html" %}
{% block content %}
<h1>여기는 홈 페이지입니다!</h1>
{% endblock %}
<header>웹사이트 제목</header>
<main>
{% block content %} {% endblock %}
</main>
<footer>회사 정보</footer>
* super()
만약 부모의 내용을 다 지우지 않고 부모 내용 + 추가 내용을 하고 싶다면 어떻게 할까요? 자식 블록 안에서 {{ super() }}를 사용하면 됩니다.
{% block content %}
{{ super() }} <p>여기에 추가 내용을 더합니다.</p> {% endblock %}
- include (템플릿 포함)
- 특정 코드 뭉치(예: 별점 UI, 상품 카드 등)를 여러 페이지에서 반복적으로 재사용할 때 사용합니다. ([sidebar.html - 조각 템플릿][index.html - 적용])
- 개념: 코드 조각을 별도 파일로 저장해두고, 필요한 곳에 불러와서 "끼워 넣는" 방식입니다.
<body>
{% include "sidebar.html" %}
<h1>메인 콘텐츠</h1>
</body>
<nav>
<a href="/login">로그인</a>
<a href="/join">회원가입</a>
</nav>
느낀점
Flask를 통해 html를 불러오는 것을 해보았다. 오늘처럼 templates을 통해 간단한 웹구성 하는 것은 어렵지 않으나 나중에 백엔드에서 데이터를 가져오고 데이터를 넘기는 걸 생각하면 쉽지 않을 거란 생각이 들었다.
——————————————————————————
본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.
'학습일지' 카테고리의 다른 글
| [스나이퍼팩토리] 한컴AI아카데미(영단어장 리뷰) (0) | 2026.04.30 |
|---|---|
| [스나이퍼팩토리] 한컴AI아카데미(26.04.29) (0) | 2026.04.29 |
| [스나이퍼팩토리] 한컴AI아카데미(26.04.27) (0) | 2026.04.28 |
| [스나이퍼팩토리] 한컴AI아카데미(26.04.24) (0) | 2026.04.24 |
| [스나이퍼팩토리] 한컴AI아카데미(26.04.23) (0) | 2026.04.23 |