FastAPI 설치 환경 세팅 및 간단한 테스트 웹 만들기8 - jinja 템플릿 사용법

FastAPI 설치 환경 세팅 및 간단한 테스트 웹 만들기8 

- jinja 템플릿 사용법  -

 

 

 

지금까지 fastapi를 이용해서 todo 어플리케이션의 라우팅과 응답, 예외처리를 하는 backend 로직을 구현했다. 지금부터는 jinja 템플릿을 이용해서 frontend 단을 구현해 backend에 자료를 보내고 응답을 화면에 출력하는 웹페이지를 만들어보자.

본격적으로 웹페이지를 만들기 전에 jinja 템플릿 사용법을 먼저 알아보자.

 

1. jinja 템플릿

jinja는 파이썬으로 작성된 템플릿 엔진으로 API 응답을 쉽게 렌더링할 수 있도록 한다. html 파일 안에서 backend에서 넘어오는 자료를 받아 렌더링하는데 jinja 템플릿은 { } 를 사용해서 html과 구별되며 독자적으로 작동한다.

jinja 템플릿에서 자주 사용되는 구문은 아래와 같다.

형식	내용	예시
{% 명령 %}	제어하기 위한 명령을 지정할 때 사용 반드시 endfor, endif 처럼 명령의 끝을 지정해야 함	{% for item in items %}      {{item} {% endfor %}
{{변수명}}	넘어온 변수의 값을 출력할 때 사용	{{todo.item}}
{# 주석내용 #}	주석처리	{# fastapi 주석 #}

 

2. 필터

파이썬과 jinja는 유사한 구문을 사용하지만 파이썬과 동일하게 사용할 수 없으며 필터를 통해서 작업을 해야 한다. 필터는 파이프 기호( | )를 사용해서 변수와 구분하며 선택적 인수는 괄호()를 사용한다.

1) 기본 필터

전달된 값이 None일 때 사용할 값 지정

{{ todo.item | default('이것은 기본 todo 아이템입니다.') }}

 

2) 이스케이프 필터

HTML을 변환하지 않고 그대로 랜더링한다.

# 코드
{{ "<title>Todo Application</title>" | escape }}
# 결과
<title>Todo Application</title>

 

3) 변환 필터

데이터 유형을 변환한다.

#코드
{{ 3.142 | int }}
#결과
3

#코드
{{ 31 | float }}
#결과
31.0

 

4) 병합 필터

리스트 내의 요소들을 병합해서 하나의 문자열로 만든다. python의 join과 같은 역할

# 코드. 공백(' ')을 기준으로 리스트 내의 요소를 합침
{{ ['Fastapi는', 'jinja', '템플릿을', '사용해서', '랜더링한다.'] | join(' ') }} 

# 결과
Fastapi는 jinja 템플릿을 사용해서 랜더링한다.

 

5) 길이 필터

전달된 객체의 길이를 반환한다. python의 len과 같은 역할

# 코드
Todo count: {{ todos| length }}
# 결과
Todo count: 4

 

6) if 문

jinja의 if문은 python의 if 문과 유사하다. {% if  조건식 %} 형태로 사용하며 끝나는 부분에 반드시 {% endif %} 로 닫아 주어야 한다.

{% if todo | length < 5 %}
  할 일 목록에 할 일이 많ㅇ지 않네요.
{% else %}
  바쁜 날을 보내고 있군요!
{% endif %}

 

7) for 문

jinja의 for문도 python과 비슷하다. 역시 끝나는 부분에 {% endfor %}로 닫아주어야만 한다.

{% for todo in todos %}
   <b> {{ todo.item }} </b>
{% endfor %}

 

jinja for문 안에서는 특수 변수를 이용해서 인덱스 반환 등의 작업을 할 수 있는데 그 내용은 아래와 같다.

 

8) jinja for문에서 사용되는 특수 변수

변수	기능
loop.index	반복의 현재 인덱스를 보여준다. 시작 인덱스는 1 (python의 enumerate과 비슷)
loop.index0	반복의 현재 인덱스를 보여준다. 시작 인덱스는 0 (python의 enumerate과 비슷)
loop.first	첫 번째 반복이면  True를 반환
loop.last	마지막 반복이면 True를 반환
loop.length	리스트 등의 아이템 수(길이)를 반환

 

9) macro (jinja의 함수)

jinja의 macro는 python의 함수와 같은 역할을 한다.

{% macro 함수명(인자) %}

함수 내용

{% endmacro %}

의 형식으로 작성한다.

#macro 정의
{% macro input(name, value='', type='text', size=20 %}
    <div class="form">
      <input type="{{ type }}" name="{name}"
        value="{{value | escape}}" size="{{size}}">
    </div>
{% endmacro %}

#macro 실행

{{ input('item') }}

#macro 실행 결과
<div class="form">
  <input type="text" name="item" value="" size="20">
</div>

 

 

출처: 아데시나, 압둘라지즈 압둘라지즈. FastAPI를 사용한 파이썬 웹 개발. 번역 김완섭. 한빛미디어, 2023