테마 동작 방식¶

예를 들어 회원가입 시 templates/basic/member/register.html 템플릿 파일을 호출하게 되는데, 이 파일이 실행되는 방식에 대해 설명해 보겠습니다.

1. 컨트롤러에서 템플릿 파일 호출¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

@router.get("/register_form", name='register_form')
def get_register_form(request: Request):
    # 약관에 동의를 하지 않았다면
    agree = request.session.get("ss_agree", None)
    ...
    context = {
        "is_register": True,
        "request": request,
        "member": member,
        "form": form_context,
        "config": request.state.config,
    }
    return templates.TemplateResponse("/member/register_form.html", context)

위의 코드에서는 비즈니스 로직을 처리한 후, member/register_form.html 파일을 호출하게 됩니다.

기본 테마의 경로가 templates/basic로 설정되어 있기 때문에,
최종적으로 templates/basic/member/register_form.html 파일을 불러오게 됩니다.

2. 템플릿 파일 구성¶

{% extends "base.html" %}
{% set title = "회원정보 수정" if member.mb_id else "회원가입" %}

{% block head %}
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" async></script>
{% endblock head %}

{% block title %}{{ title }}{% endblock title %}
{% block subtitle %}{{ title }}{% endblock subtitle %}

{% block content %}
    회원가입 폼 HTML 코드
{% endblock %}

{% extends "base.html" %}은 base.html 파일을 상속받아 사용한다는 의미입니다.
상속받은 하위 템플릿에서 {% block content %}를 통해 상위 템플릿의 block 영역에 내용을 추가할 수 있습니다.

<div id="container">
    <h2 id="container_title"><span>{% block subtitle %}{% endblock %}</span></h2>
    {% block content %}
    {% endblock %}
</div>

결론적으로 register_form.html에 선언된 {% block content %} 부분에 해당하는 내용을
base.html 파일의 {% block content %} 부분에 삽입하게 됩니다.

예시를 다이어그램으로 나타내 보면, 다음과 같은 구조로 실행됨을 볼 수 있습니다.

flowchart LR
  A[main.py] --> B[bbs/register.py];
  B --> Template;

  subgraph Template
    C[base_sub.html] --> D[base.html];
    D[base.html] --> E[member/register_form.html];
  end

  Template --> F[브라우저 출력];