jinja2와 vuejs 혼용하여 사용하기

배경

내용이 그리 많지는 않다. vuejs 와 jinja2에서 '{{', '}}'해당 기호 용도가 중복이 된다. 때문에 같이 혼용하기 위해서는 해당 기호를 바꿔야 한다.

다행스럽게도 vuejs의 경우 JavaScript 기반이다 보니 문법을 parsing 하는 delimiters 를 변경할 수 있다.

vuejs 기호 변경

<!-- jinja2 -->
<div id="app">
    {% set val = hello -%}
    <span>[[ {{ val }} ]]</span>
</div>

// javascript
let app = new Vue({
    el: "#app",
    data: {
        hello: "world"
    },
    delimiters: ['[[', ']]']
});

참조

• 추후 다시 찾게 되면 추가 예정

jinja2 에서 javascript로 값 넘기기

배경

주로 웹 개발보다 기능을 개발해서 API 형식으로 구현을 하다보니 Django 보다는 Flask가 적합하다고 생각하고 사용중에 또 다시 인력 부족으로 웹페이지를 만들던 중 jinja2 에서 javascript로 데이터를 넘겨야 하는 경우가 발생해서 기록으로 남긴다.

유용한 경우

해당 기능은 ajax 통신 이전 초기에 웹 페이지가 새로로드 할때마다 초기화 해야하는 데이터가 바뀌어야 하는 경우에 사용하면 유용하다.

예를 들어 로그인된 사람마다 대시보드에 처음 표시되는 데이터를 전달하는 경우.

Flask(python3) -> Jinja2 -> javascript

원리는 Flask에서 Jinja2 템플릿을 html 문서로 만든다음에 Client에 전성한 다음에 javascript가 로드되는 순서로 동작된다는 것을 이용한 것이다. 더군다나 json은 문자기반 데이터이기 때문에 이것이 가능하다.
즉 Flask에서 데이터를 Jinja2를 통해서 문자형태로 전달 가능하다. 그럼 json을 Jinja2를 통해 작성하면 충분히 전달이 가능하다.

#Flask
import json

@app.route("/")
def index():
    data = { "a" : "b" }
    return render_templete("index.html", data=json.dumps(data, ensure_ascii=False))

<!-- jinja -->
<script>
    let initdata = JSON.parse( {{ data | safe }} );
</script>

이제 jinja2로 삽입된 위의 script 태그 이후에 받아서 사용하거나 모두 페이지로드 뒤에 해당 데이터를 사용하도록 작성하면 된다.

참조

https://stackoverflow.com/questions/15321431/how-to-pass-a-list-from-python-by-jinja2-to-javascript/22157700

bootstrap 4 datetimepicker(Tempus Dominus)

배경

어쩌다 보니 4년만에 웹 개발관련된 업무를 하게 되었다. 요즘 트렌드는 어떤지 모르겠지만, 라이브러리는 과거 보다 확실이 다양해졌다. 일단 리서치 했을 때 국내에서는 Bootstrap 이 인기 있는 것 같아서 간단히 적용을 하던 중 bootstrap에서는 datetimepicker에 대한 지원이 없어서 이를 보강해주는 보조(?) 라이브러리가 있었다.

설치 방법

웹 분야가 늘 그렇듯이 html 문서에 script 항목에 추가를 시켜주면 된다. 다만, 설명에는 CDN 주소만 있고, 정작 다운로드 주소 없이 경로를 넣어주면 된다고 설명되어 있다.

AngularJS나 Django의 경우 설치를 하면 간단하나, 필자는 Flask를 사용하고 있기 때문에 따로 다운로드를 받아야 한다.

공식 페이지 주소를 보면 알 수 있듯이 github 에 있다. 즉, 레포지토리에 가서 dist 혹은 build 또는 min 으로 된 폴더에 있는 것을 다운로드 받으면 해결된다. 의존 라이브러리인 moment 라이브러리 링크도 아래에 추가한다.

• github moment
• github tempus domainus bootstrap 4

참조

• Tempus Domainus 공식 페이지
• Tempus Domainus 라이브러리를 소개한 한글 블로그