Extracting data from jinja for a dashboard

Context

웹 애플리케이션에서 정적 HTML만으로는 사용자 요청에 따라 변화하는 콘텐츠를 표시할 수 없다. 데이터베이스에 저장된 정보를 동적으로 화면에 반영하려면 백엔드와 프론트엔드 간의 데이터 전달 메커니즘이 필요하다.

Technical Solution

• 데이터 추출: Flask 라우트 핸들러에서 MySQL 등의 데이터베이스에 쿼리를 실행하여 필요한 정보를 검색
• 변수 바인딩: Flask의 render_template() 함수를 사용하여 추출한 데이터를 템플릿 변수(튜플 또는 딕셔너리 형식)로 전달
• 반복 렌더링: Jinja 템플릿에서 for 루프를 사용하여 데이터 컬렉션을 순회하며 각 항목의 속성(name, price, description 등)을 HTML로 반복 출력
• 조건부 렌더링: Jinja의 조건문을 활용하여 로그인 상태, 사용자 데이터 존재 여부 등에 따라 특정 HTML 요소를 표시 또는 숨김
• 보안 처리: Jinja 템플릿 엔진이 자동으로 사용자 입력값을 이스케이프하여 XSS 공격 방지

Key Takeaway

Flask 백엔드에서 데이터 처리와 검색을 담당하고 Jinja 템플릿에서 프레젠테이션만 담당하도록 관심사를 분리하면, 표시 방식 변경 시 쿼리 로직을 수정하지 않고도 유지보수와 확장이 용이해진다.