본문 바로가기
DEVLOG/Vue.js

Vue.js와 Django를 이용한 웹앱 만들기

2019. 5. 1.
반응형

Build an App with VueJS and Django Part One를 참고하여 작성하였습니다.

 

서론

 

이전에 VueJS와 ExpressJS를 이용하여 웹앱을 만든적이 있는데, Python 공부도 할 겸 Django를 써보려고 하는데

VueJS와 Django를 결합? 연결하는데 어려움이 있어 자료를 찾던 중 좋은 소스가 있어 공유합니다.

 

Vue.js

Vue.js는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로

채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다.

그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.

 

다른 프레임워크와의 비교

 

Django

Django는 Python으로 만들어진 무료 오픈소스 웹 애플리케이션 프레임워크입니다.

쉽고 빠르게 웹사이트를 개발할 수 있도록 돕는 구성요소로 이루어진 웹 프레임워크입니다.

웹사이트를 구축할 때, 비슷한 유형의 요소들이 항상 필요합니다. 회원가입, 로그인, 로그아웃과 같이 사용자 인증을 다루는 방법이나

웹사이트의 관리자 패널, 폼, 파일 업로드와 같은 것들요.

 

그런데 정말 다행이게도, 오래전에 어떤 웹 개발자들이 새로운 웹 사이트를 개발할때 서로 비슷한 문제들에 직면한다는 것을 깨달았습니다.

그래서 팀을 조직했고, 바로 사용할 수 있는 구성요소들을 갖춘 여러 프레임워크를 만들었습니다.

장고도 그중에 하나죠. 다시 개발해야 하는 문제로부터 해방감을 주고, 새로운 웹사이트를 개발할 때 뒤따르는 간접비용의 부담을 덜어줍니다.

 

먼저 Django를 설치하기 전에 터미널을 열어 가상환경을 만들어 줍니다.

mkdir vuedjango
cd vuedjango
python3 -m venv django

 

가상환경 사용하기

source django/bin/activate

 

Django 설치하기

python3 -m pip install --upgrade pip
pip install django
pip install django --upgrade

터미널에서 다음 명령어를 입력합니다.

django-admin startproject mystie
cd mysite
python manage.py startapp journal

이제 다음과 같은 디렉토리 구조가 만들어졌습니다.

 

 

 

다음 명령어를 실행하여 서버를 실행시킵니다.

python manage.py runserver

 

http://localhost:8000/ 에 접속하여 다음 화면이 나오면 정상적으로 설치된 것입니다.

 

 

CTRL-C를 눌러 서버를 종료시키고 첫번째 view를 만들어 보겠습니다.

journal 디렉토리에 있는 views.py를 열고 다음 두 줄을 입력합니다.

def index(request):
   return render(request, 'index.html')

 

 

journal 폴더와 같은 레벨에 templates라는 폴더를 만들고, 그 안에 index.html 파일을 만들어줍니다.

간단한 index.html부터 시작하겠습니다.

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Journal</title>
</head>

<body>
    <p>Welcome to My Journal</p>
</body>

</html>

 

이제 방금 만든 view를 불러오기 위해 view와 url을 맵핑시켜야 합니다.

mysite 폴더안에 있는 urls.py를 다음과 같이 수정합니다.

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from journal.views import index

url patterns = [
   url(r'admin/', admin.site.urls),
   url(r'^$', index, name='index'),
]

 

view는 template index의 위치를 알아야 합니다. 

mysite 폴더에 있는 settings.py를 열어 TEMPLATES를 검색합니다.

'DIRS': []를 다음과 같이 수정합니다.

'DIRS': [os.path.join(BASE_DIR, "templates"),]

 

이제 터미널로 돌아가 서버를 실행시킵니다.

python manage.py runserver

 

http://localhost:8000/에 접속하면 다음과 같은 화면이 출력됩니다.

이제 3일에 대한 리스트를 만들어보겠습니다. (Day 1, Day 2, Day 3)

views.py를 다음과 같이 수정합니다.

from django.shortcuts import render

# create your views here.
def index(request):
   context = {
      'days': [1, 2, 3],
   }
   return render(request, 'days.html', context)

 

모듈화시키기 위해 index.htmlmasterpage.htmldays.html로 나눌 것입니다.

index.html의 파일명을 masterpage.html로 바꾼 후에, HTML paragraph 태그 <p>를 지우고

<body> 태그안에 Jinja2 block을 추가합니다.

변경된 masterpage.html은 다음과 같습니다.

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Journal</title>
</head>

<body>
    {% block content %} {% endblock %}
</body>

</html>

 

이제 templates 폴더안에 days.html 파일을 새로 만들고, 다음 코드를 입력합니다.

{% extends 'masterpage.html' %}
{% block content %}
<p>Welcome to My Journal</p>
{% endblock %}

 

서버를 실행시켜도 아직 비주얼적으로 변한 것은 없을 것입니다. 

이제 날짜(Day 1, Day 2, Day 3)를 나타내 보겠습니다.

days.html의 <p>태그 다음에 다음 코드를 추가합니다.

<ul>
    {% for day in days %}
        <li><h4> Day {{ day }}</h4></li>
    {% endfor %}
</ul>

 

다시 서버를 실행시켜보면 다음과 같이 날짜가 출력되는 것을 확인할 수 있습니다.

VueJS 통합하기

먼저, masterpage.html의 맨 위에 다음을 추가하여 vuejs를 불러옵니다.

<script src="https://unpkg.com/vue"></script>

 

그리고 days.html로 가서 <p>태그와 <ul>태그를 id=app의 <div>태그로 묶어줍니다.

이제 HTML script태그를 추가할건데, 보통 .js파일을 따로 만들어 사용하지만 DOM이 어떻게 script와 관계되는지 더 잘 알기 위해 같이 쓰도록 하겠습니다.

days.html에 다음 코드를 추가합니다.

<script>
new Vue({
  delimiters: ['[[', ']]'],
  el: '#app',
  data: {
    title: 'Welcome to My Journal'
  }
})
</script>

 

days.html의 코드를 보면 {{ day }}와 같이 {{ }}를 interpolation delimiters로 사용하였습니다.

기본적으로 Vue.js의 interpolation delimiters는 Jinja templates와 같습니다.

따라서 Vue.js의 interpolation delimiters를 [[]]로 변경해야 합니다.

<p>태그의 텍스트를 [[ title ]]로 바꾸어 보겠습니다.

수정된 days.html은 다음과 같습니다.

{% extends 'masterpage.html' %}
{% block content %}
<div id="app">
    <p> [[ title ]] </p>
    <ul>
        {% for day in days %}
        <li>
            <h4> Day {{ day }}</h4>
        </li>
        {% endfor %}
    </ul>
</div>
<script>
new Vue({
  delimiters: ['[[', ']]'],
  el: '#app',
  data: {
    title: 'Welcome to My Journal'
  }
})
</script>
{% endblock %}

 

data 객체에 days: [1, 2, 3]을 추가합니다.

그리고 HTML <ul>태그를 다음과 같이 바꾸어 보겠습니다.

<ul>
    <li v-for="day in days">
        <h4> Day [[ day ]]</h4>
    </li>
</ul>

 

수정된 days.html 코드는 다음과 같습니다.

{% extends 'masterpage.html' %}
{% block content %}
<div id="app">
    <p> [[ title ]] </p>
    <ul>
        <li v-for="day in days">
            <h4> Day [[ day ]]</h4>
        </li>
    </ul>
</div>
<script>
new Vue({
  delimiters: ['[[', ']]'],
  el: '#app',
  data: {
    title: 'Welcome to My Journal',
    days: [1,2,3]
  }
})
</script>
{% endblock %}

 

새로고침하여 페이지를 확인합니다.

크롬을 사용하시면 VueJS Devtools를 설치하여 components의 data를 볼 수 있습니다.

 

반응형

댓글