[Flask&Jinja2] html템플릿에 서버 데이터 렌더링 시, {{ ... }} 사용

 

---

 

Flask Framework 사용해서 개발할 때, 백엔드에서 가져온 데이터를 html 템플릿에 그대로 보여주고 싶다면 어떻게 해야 할까요?

Flask Framework는 기본적으로 jiaja2 템플릿 엔진을 사용하여 사용자가 볼 수 있는 html 콘텐츠를 나타냅니다.

서버에서 가져온 데이터는 이 jinja2의 구문인 대괄호 2개 {{}} 를 사용해서 표현해주면 됩니다.

 

* 백엔드

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def main():
    # 서버에서 준비한 데이터
    data = {"name": "test", "age": 10}
    
    # 데이터를 HTML 템플릿에 전달
    return render_template('index.html', data=data)

if __name__ == '__main__':
    app.run(debug=True)

 

* html (jinja2 구문 활용)

<!-- 다른 html 태그는 생략하겠습니다. -->
...
    <script>
        // Jinja2 템플릿 태그를 사용하여 서버 데이터를 JavaScript 변수에 할당
        let sample = {{ data | tojson }};
        
        // JavaScript에서 서버 데이터 사용
        console.log("sample:", sample);
        console.log("Name:", sample.name);
        console.log("Age:", sample.age);
    </script>
...

 

{{ data | tojson }}의 tojson은 Python 딕셔너리를 Javascript 객체로 적절히 변한하겠다는 규칙입니다.

 

개인적으로 flask jiaja2를 활용하여 웹 페이지를 만들때, 이미지 캐러셀을 효과적으로 표현하기는 어려웠습니다.

여러분은 어떠셨나요?

 

---