[Flask] Frontend 템플릿 Jinja 구조

 

이번시간에는 플라스크 백엔드의 기본적인 프론트엔드 템플릿인 진자에 대해서 이야기해보려고 합니다. 이건 가장 기본인 프론트엔드이고 필요에 따라서 react, nextjs 등을 붙여서 사용할 수 있습니다

 

template, app.html.j2

우선 다른 python 모듈이 들어있는 디렉토리에 template 디렉토리를 추가합니다. 거기에 추가하는 app.html.j2 는 모든 템플릿의 기본 header, body 구조를 가지며 formfor 나 필요한 함수들을 정의해주는 역할을 합니다. app.html.j2의 최상단에서는 거기서 main 에서 생성한 formfor 를 가져와서 macro 설정을 해 주는 과정을 거칩니다. 기본적인 header 와 body 를 설정을 해주는데, header 에서는 여러 기본 세팅 및 필요한 javascript, jquery 함수를 설정해줍니다. body 에서는 필요한 controller 와 action 에 따라서 image들을 링크해주고 html 을 이어주는 일을 합니다. template 디렉토리에 여기에 더 필요한 endpoint 를 디렉토리명으로 추가해줍니다(ex. admins, agent_scans...). 그 안에 index 가 필요한 경우 index.html.j2 를 추가해주고, 수정이 필요한 경우 edit 를 추가해주고, 현재 setting 을 보여줘야 할 경우 show 를 추가해줍니다.

 

index, edit, show

우선은 formfor 에서 간단하게 설명을 추가해보겠습니다. formfor 란 쉽게말해서 '안전장치'로 DB 를 건드리는 login, edit, delete 요청이 들어간 post 문을 보낼 때 client에서 미리 공유된 규칙대로 실행이 되는지 csrf_token 은 잘 가지고 있는지 등을 frontend부터 backend 까지 이어줍니다. index에서는 DB 의 정보를 endpoint 에서부터 받아와서 frontend 에 보여주는데 이 과정에서 formfor 는 다음과 같이 사용됩니다. 

{% call(f) form_for(conds, cls='form-inline mr-auto') %}
    {{ f.input('search', style='width:83%;height:56px;', cls = 'kiosk_board')}}
    {% if is_query %}
    {{ link_to(img('/static/ic_cancel.svg'), url_for('.agent_scans_index'), style='margin-left:-56px;margin-right:16px;') }}
    {% endif %}
    {{ f.submit(style='width:16%;margin-left:4px;', cls = 'btn-mps-primary') }}
{% endcall %}

edit 에서도 기존의 DB에는 어떻게 설정이 되어있느냐를 확인하고 싶을 수가 있는데, 이럴 경우 다음과 같이 가져옵니다.

{% call(f) form_for(obj, cls='h-100 mps-edit-form') %}	
	<div class='mps-hline'></div>
		<div class='row'>
			<div class='col col-3 tag-col'><span>{{ get_attr_desc('password') }}</span></div>
			<div class='col col-5 edit-col'>{{ f.password('password', placeholder='New password', cls='kiosk_board editable') }}</div>
			<div class='col col-4 pw-warning'><span>&#8251 8 characters minimum</span></div>
		</div>

 

local 과 t

local 은 locales/en.yml 에 저장이 되고, 사용이 될때는 i18n 모듈 안의 t 함수를  다음과 같이 사용이 됩니다.

function confirm_update() {
	show_two_btn_modal("{{ t('confirm.vaccine_update') }}", 'update_vaccine()');
}

이 t 함수는 before_request 에서 get_locales 로 전역변수에 등록한 i18n_texts 를 가져오는 식으로 구동이 됩니다. 

def t(k, **kwargs):
	v = g.i18n_texts.get(k, k)
	if isinstance(v, str): return v.format(**kwargs)
	else: return v

 

사진의 경우 최상위 디렉토리(파이썬 모듈이 들어가는 곳)에 static 을 추가해주고, 그곳에 필요한 .img, .jpg 파일들을 추가해주고 가져올때는 링크로 가져와줍니다.

 

 

이런식으로 jinja 의 프론트를 간단하게 설명해보았고, 궁금한점 있다면 편하게 댓글 달아주세용!!