작년(2017년) 크라우드소싱 수업 시간에 동관씨, 현규씨랑 같이 크라우드 소싱으로 법률의 가독성을 개선하겠다고 야심차게 시작한 프로젝트가 있었다 사이트 Github Repo. 당시 프로토타입을 만들때 팀 내에 백엔드 API를 만들고, 다시 프론트엔드 웹앱을 만드는 방식이 비효율적이라는 공감대가 형성되서 Django Template으로 페이지를 찍어내되 페이지의 인터랙티브한 요소는 Vue로 구현을 해보기로 했고, 어찌어찌 돌아가는 물건을 만들기는 했다. 최근에 조금 더 잘할 수 있는 방법을 공부할 일이 있어서 간단히 과정과 소감을 기록해 본다.
to_dict()를 사용하면 serialize가 되고 쿼리셋의 경우는 values()를 사용하면 된다고 한다. 아니면 아예 Django REST Framework에 있는 Serializer를 사용하면 다양한 형태로 Related Field를 serialize 할 수 있다.json.dumps에 넣어 템플릿에 넣어 준다.[{"id": 93, "url": ...{{ data|safe }}로 읽든, 템플릿의 autoescape를 사용하든(Escaping 링크 참조), safestring을 활용하든지 해서 json을 알맞은 형태로 읽어준다.
여기부터는 그냥 Vue 인데, 한가지 유의할 점은 장고 템플릿의 Delimitter도 {{ }}이고 Vue에서도 {{ }}을 사용한다는 점이다. 여기서 두가지 솔루션이 가능하다.
이러면 템플릿 엔진이 verbatim 태그 내부는 건드리지 않는다.
2. Vue 인스턴스의 delimiters 옵션을 활용해서 다른 delimiter를 사용할 수 있다.
new Vue({
delimiters: ['[[', ']]']
})이렇게 템플릿이랑 CSS와 같이 넣으면 나름 Vue 컴포넌트 느낌으로 파일 하나에 스타일이랑 로직을 다 정의할 수 있다.
{% verbatim %}
<div id="app">
<ul>
<li v-for="page in pages">{{ page }}</li>
</ul>
<div>
{% endverbatim %}
<style>
/* */ CSS
</style>
<script>
var data = {{ data|safe }}
new Vue ({
el: '#app',
data: {
pages: data.pages,
}
})
</script>component.js 에 Vue 컴포넌트를 정리하고,
Vue.component('vue-component', {
props: ['pages'],
template: `
<ul>
<li v-for="page in pages">{{ page }}</li>
</ul>
`
})page.html에서 불러서 쓰는 방법이 있다. CSS도 js에 넣고 싶은데 방법을 모르겠다.
<script src="{% static "js/component.js" %}"></script>
/* 전역 컴포넌트여서인지 템플릿보다 먼저 불려야함*/
<div id="app">
<vue-component :pages="pages">
</vue-component>
<div>
<style>
/* */ CSS
</style>
<script>
var data = {{ data|safe }}
new Vue ({
el: '#app',
data: {
pages: data.pages,
}
})
</script>