[Django] Vue.js 사용하기
본 글은 AHackersDay의 https://ahackersday.com/blog/how-to-use-vue-and-django-together/ 글을 원작자의 동의를 받고 번역했습니다.
Vue와 Django를 함께 사용하는 방법은 여러가지가 있고, 이 글에서는 우린 그 중 세 가지를 할 것입니다.
두 가지를 합치는 것은 큰 도전이 아니지만 몇 가지 생각해야 할 것이 있습니다.
1. Django Templates에 Vue 통합하기 (Integrate Vue into Django templates)
Vue와 Django를 통합하는 가장 쉬운 방법은 vue script를 html코드에 포함시키는 겁니다.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>이 작업이 완료되면 vue app 과 components를 만들 수 있게 됩니다.
아래의 코드를 실행해 보세요.
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
</body>
</html>위를 실행했을 때 "message"가 나타나지 않는 것을 확인할 수 있습니다. 이는 Django와 Vue의 구문(syntex)가 비슷하기 때문입니다.
이 문제는 Vue app의 구분 기호(dilimiters)를 변경하여 간단하게 고칠 수 있습니다. 템플릿에서 {{ message }} 를 [[ message ]] 로 변경하고, 스크립트 태그에 다음 줄을 추가하세요.
...
el: '#app',
delimiters: ['[[', ']]'],
data: {
...[[]] 대신에 어떤 것이든 거의 가능합니다.
이제 당신은 당신의 Django-Vue 앱을 시작할 준비가 되었습니다 :-)
2. Vue CLI를 이용한 Standalon Vue app (Standalone Vue app using Vue CLI)
Vue를 통합하는 다른 방법은 별도의 서버에 standalone vue 인스턴스를 설치하는 것입니다. 이는 CLI를 이용해서 Vue 셋팅하고 API를 통해 Django 어플리케이션으로 부터 데이터를 가져와 수행하게 됩니다. 이 작업을 시작하기 위해서는 webpack을 이용해서 vue를 설치해야 합니다:
$ npm install -g vue-cli
$ vue init webpack django-vue
$ cd django-vue
$ npm install
$ npm run dev프롬프트가 표시되면 프로젝트 이름(project name), 설명(description), 등의 정보를 입력하세요. "npm run dev"는 브라우저에서 http://localhost:8080/을 열어 로컬에서 웹 서버 테스트를 시작합니다. 이제 당신은 Django 어플리케이션으로 부터 데이터를 추출할 준비가 되었습니다.
이 튜토리얼에서는 다루지는 않지만, 힌트는 axios를 이용하는 겁니다. axios는 ajax를 사용하여 서버와 통신할 수 있게 하는 helper library입니다.
3. Django webpack loader
저는 이미 아래 프로젝트의 Readme에서 잘 다루어져 있기 때문에 Vue와 Django를 통합하는 방법은 상세히 언급하지 않을 겁니다.
여기서 설치 정보부터 production environment에서 사용하는 방법에 대한 팁까지 무엇이든 찾을 수 있습니다.
Django webpack loader를 사용할 때 기억해야할 것은 그것은 프로젝트에 완벽하게 통합되어 있다는 것입니다. 이는 여전히 Django의 세션, csrf 등 몇몇 더 많은 기능들을 사용할 수 있다는 것을 말합니다. 이렇게 하면 훨씬 인증이 간단해지게 됩니다.
'Python > Django' 카테고리의 다른 글
| [Django][RestAPI] Image Path로 서버에 이미지 업로드하기 (2) | 2019.07.24 |
|---|---|
| [Django] static 파일 불러오기 (0) | 2019.07.01 |
| [Django] Database 테이블에 데이터가 없을 때 만 추가하는 방법 (0) | 2019.01.31 |
| [Django] target wsgi script wsgi.py cannot be loaded as python module 에러 해결 방법 (0) | 2019.01.29 |
| [Django] 사용자 인증 시스템 (0) | 2019.01.23 |
