Vue.js를 Django 템플릿에서 사용해보자

2018-09-23

들어가며

사내에서 온보딩 과제로 실험(?)했던 내용을 기술하고자 한다. 바로 Vue.js를 Django Template과 결합하여 사용하는 것이다.

  1. 자바스크립트 프레임워크/라이브러리를 Webpack 빌드 하는 방법 외에는 써본 적이 없고
  2. Node.js(자바스크립트)의 MVC 프레임워크가 아닌 Python의 Django의 템플릿으로 작성을 해본 적도 없었다.

이런 상황에서 여러모로 도전일 수 밖에 없는 상황이었는데 결론적으로는 뭐 생각보다 그리 어렵지 않았다.

  1. Vue를 script로 호출 했을 때 문법과 작성방법이 크게 달라지는 것은 없었고
  2. Node.js Express의 ejs, jade(pug)를 사용하는 것과 DTL을 사용하는 방법 자체가 다르진 않았기 때문이다.

작성 방법

이번 포스팅은 간단하게 두 개의 포인트를 가져가고자 한다. DTL(장고 템플릿) 내에서 어떻게 Vue를 작성할 것인가? 그리고 Webpack이 아닌 Script 방식에서 컴포넌트를 만들 때 어떻게 템플릿을 구성 것인가?

1. Vue와 DTL 구분자

일단 Vue 템플릿에서는 Vue의 변수를 호출할 때

<div>{{변수명}}</div>

이렇게 작성한다. 그런데 공교롭게도 DTL에서도 장고 내의 변수를 호출할 때 같은 구분자를 가진다. 어떻게 처리해야할까?

new Vue({
  delimiters: ['[[', ']]']
})

위와 같이 작성해주면 된다. 저렇게 구분이 될 뿐만 아니라 장고 변수와 Vue의 변수를 결합하여 응용이 가능해진다.

2. 장고 템플릿으로 레이아웃 구성할 때 Vue 컴포넌트 작성법

장고 템플릿으로 구성하게 될 때 각 페이지마다 Vue가 선언이 되어야하는 구조가 된다. 그렇게 되면 Vue로 공통 레이아웃을 작성할 수 없을 것만 같은 느낌적인 느낌이 들고는 하는데 역시나 간단한 해결 방법이 있다.

const mixin = {
  created: function () { console.log(1) }
}
const vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

위와 같이 mixin 기능을 사용하게 된다면 걱정 없다. 공통 레이아웃에서 new Vue를 선언하고 mixin을 선언하며 자식(컨텐츠가 담긴) 컴포넌트에서 mixin을 작성하면 된다. 물론 자식 컴포넌트의 스크립트가 공통 레이아웃 컴포넌트의 new Vue 선언보다 앞서 호출될 수 있도록 작성은 해야하지만 말이다. 그런 부분은 DTL의 extends와 block을 사용한다면 어떻게 작성해야할지 쉽게 이해할 수 있을 것이다.

끝.