Coding_Beginner_JH

프로젝트/Python - FastAPI

[Python_FastAPI] TodoList#2, 파이썬 FastAPI로 html 렌더링(연결)

CBJH 2024. 5. 2.

목차

728x90
반응형

0. 요약

먼저, Pydantic의 BaseModel을 사용하여 TodoDTO 클래스를 만들겠습니다. 이 클래스는 간단한 할 일 목록을 나타내는 데이터 구조를 제공합니다. 그 후에, Pydantic을 사용하여 10개의 가짜 할 일 데이터를 생성하고, 이를 FastAPI를 사용한 웹 애플리케이션에서 HTML 페이지로 렌더링하는 과정을 보여줄게요.

 

[Python_FastAPI] TodoList#2, 파이썬 FastAPI로 html 렌더링(연결) - 0. 요약
파일 구조

 

1. TodoDTO 클래스 정의하기

TodoDTO 클래스는 tno, title, timestamp, description 필드를 가집니다. description은 선택적 필드로 설정할 예정입니다.

 

from pydantic import BaseModel
from datetime import datetime
from typing import Union, List

class TodoDTO(BaseModel):
    tno: int
    title: str
    timestamp: datetime
    description: Union[str, None] = None

2. makeFakeDB.py 파일 생성

makeFakeDB.py 파일에서는 가짜 할 일 데이터를 생성합니다. 이 데이터는 나중에 FastAPI 서버에서 HTML로 렌더링됩니다.

from datetime import datetime, timedelta
from DTO.todoDTO import TodoDTO
import random

def create_fake_todo_data() -> List[TodoDTO]:
    todos = []
    current_time = datetime.now()
    for i in range(10):
        todos.append(TodoDTO(
            tno=i,
            title=f"Task {i}",
            timestamp=current_time + timedelta(days=i),
            description=f"Description for task {i}" if i % 2 == 0 else None
        ))
    return todos

# 가짜 DB를 생성하고 출력해보기
if __name__ == "__main__":
    fake_db = create_fake_todo_data()
    for item in fake_db:
        print(item)

3. main.py 파일 생성

main.py 파일에서는 FastAPI와 Jinja2를 사용하여 HTML 페이지에 Todo 목록을 렌더링합니다.

from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
from makeFakeDB import create_fake_todo_data

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.get("/")
async def read_todos(request: Request):
    todos = create_fake_todo_data()
    return templates.TemplateResponse("list.html", {"request": request, "todos": todos})

4. templates/list.html 파일 생성

list.html 파일에서는 동적으로 받은 Todo 데이터를 표시합니다.

 

<!DOCTYPE html>
<html>
<head>
    <title>Todo List</title>
</head>
<body>
    <h1>Todo List</h1>
    <ul>
        {% for todo in todos %}
        <li>
            <strong>{{ todo.title }}</strong> - {{ todo.timestamp }}{% if todo.description %}: {{ todo.description }}{% endif %}
        </li>
        {% endfor %}
    </ul>
</body>
</html>
  • <strong> 태그 : 강조 효과
  • ${}를 사용하지 않는 이유
    • Jinja2 템플릿 엔진에서는 ${} 문법 대신 {{ }} 문법을 사용합니다. 이는 Jinja2가 Python의 템플릿 엔진으로 설계되었기 때문입니다. ${} 문법은 주로 JSP(Java Server Pages) 같은 다른 서버 사이드 템플릿 언어에서 사용됩니다. Jinja2에서는 Python 코드의 일부를 중괄호 {{ }} 안에 넣어 동적 데이터를 HTML 템플릿에 삽입할 수 있습니다. 이러한 문법은 템플릿 엔진의 구성과 설계에 따라 다르며, Jinja2는 Python의 표현 방식을 따릅니다.

 

5. 실행 방법

  1. 모든 Python 파일을 같은 디렉토리에 위치시킵니다.
  2. templates 디렉토리를 생성하고 그 안에 list.html 파일을 위치시킵니다.
  3. uvicorn main:app --reload 명령어를 사용하여 서버를 실행합니다.
  4. 브라우저에서 http://127.0.0.1:8000/ 주소로 접속하여 결과를 확인합니다.

이렇게 하면, FastAPI를 사용해 Jinja2 템플릿을 통해 Todo 데이터를 동적으로 웹 페이지에 렌더링할 수 있습니다.

 

6. 실행 결과

[Python_FastAPI] TodoList#2, 파이썬 FastAPI로 html 렌더링(연결) - 6. 실행 결과

 

 

※ 추가로 알아둘 것들

* jinja2 템플릿 엔진에서 제공하는 제어문 구조

  1. {% if %} ... {% endif %} - 조건문을 사용하여 특정 조건에 따라 HTML 내용을 렌더링 할 때 사용됩니다.
  2. {% for %} ... {% endfor %} - 반복문을 사용하여 리스트나 딕셔너리와 같은 반복 가능한 객체를 순회하며 HTML 내용을 여러 번 렌더링 할 때 사용됩니다
  3. Jinja2 템플릿 엔진에서는 ${} 문법 대신 {{ }} 문법을 사용합니다. 이는 Jinja2가 Python의 템플릿 엔진으로 설계되었기 때문입니다. ${} 문법은 주로 JSP(Java Server Pages) 같은 다른 서버 사이드 템플릿 언어에서 사용됩니다. Jinja2에서는 Python 코드의 일부를 중괄호 {{ }} 안에 넣어 동적 데이터를 HTML 템플릿에 삽입할 수 있습니다. 이러한 문법은 템플릿 엔진의 구성과 설계에 따라 다르며, Jinja2는 Python의 표현 방식을 따릅니다.

'프로젝트 > Python - FastAPI' 카테고리의 다른 글

[Python_FastAPI] TodoList#6 로그인, 로그아웃, 세션 추가  (0) 2024.05.07
[Python_FastAPI] TodoList#5 세부 페이지, 수정, 삭제 기능 추가  (0) 2024.05.03
[Python_FastAPI] TodoList#4 모듈화, 글 등록 DB 연동  (0) 2024.05.03
[Python_FastAPI] TodoList#3, FastAPI로 html 렌더링(연결), postgreSQL DB연결  (0) 2024.05.02
[Python_FastAPI] TodoList#1, 파이썬 FastAPI로 html 렌더링(연결)  (0) 2024.05.02

볼 만한 글

댓글

티스토리툴바