1. Django ํ๋ก์ ํธ
๊ฐ์ํ๊ฒฝ์ ์์ฑํ๊ณ ์คํํ๋ค.
$ mkdir semoview
$ python -m venv venv
$ .\venv\Scripts\activate
# ๊ฐ์ํ๊ฒฝ ์ข
๋ฃ : deactivate๊ฐ์ํ๊ฒฝ ์์ ์ฅ๊ณ ๋ฅผ ์ค์นํ๋ค.
$ pip install django์ฅ๊ณ ํ๋ก์ ํธ๋ฅผ ์์ฑํ๊ณ , ์ต์์ ํ๋ก์ ํธ๋ช ์ django-vue๋ก ๋ณ๊ฒฝํด์ค๋ค.
$ django-admin startproject config
$ move config django-vuemanage.pyํ์ผ์ด ์กด์ฌํ๋ ๋๋ ํ ๋ฆฌ์์ ์ฑ(api)์ ์์ฑํด์ค๋ค.
$ cd django-vue
$ python manage.py startapp apisettings.pyํ์ผ์์ ์ค์ ์ ๋ณ๊ฒฝํด์ค๋ค.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'api', #์ถ๊ฐ
]
#TIME_ZONE = 'UTC'
TIME_ZONE = 'Asia/Seoul' #๋ณ๊ฒฝmigrationํ์ ์๋ฒ๋ฅผ ์คํํด๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ์ ์์ํ์ด์ง ๋จ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
$ python manage.py migrate
$ python manage.py runserver
2. Vue.js ํ๋ก์ ํธ
ํ์ฌ ์ฅ๊ณ ํ๋ก์ ํธ์ vue ํ๋ก์ ํธ๋ฅผ ์์ฑํด์ค๋ค.
$ cd django-vue
$ vue create .
$ npm run servevue ํ๋ก์ ํธ ์๋ฒ๋ฅผ ์คํํ ํ ์ ์ํ๋ฉด ๋ค์๊ณผ ๊ฐ์ด ์๋์ ๊ฐ์ ํ๋ฉด์ ๋ณผ ์ ์๋ค.
3. webpack์ ์ด์ฉํ์ฌ Vue.js์ Django ์ฐ๊ฒฐํ๊ธฐ
django-webpack-loader(owais/django-webpack-loader)๋ฅผ ์ค์นํด์ค๋ค.
$ cd django-vue
$ pip install django-webpack-loadersettings.py์ webpack loader์ ๊ด๋ จ๋ ์ค์ ๊ณผ vue ํ๋ก์ ํธ ๊ฒฝ๋ก๋ฅผ ์ค์ ํด์ค๋ค.
INSTALLED_APPS = [
'webpack_loader', #์ถ๊ฐ
]
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'public')], #๋ณ๊ฒฝ
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
#์ถ๊ฐ
WEBPACK_LOADER = {
'DEFAULT': {
'CACHE': DEBUG,
'BUNDLE_DIR_NAME': '/bundles/', # must end with slash
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
}urls.pyํ์ผ์ ์ฅ๊ณ ์ฑ url ์ค์ ์ ์ถ๊ฐํด์ค๋ค.
from django.contrib import admin
from django.urls import path
from . import views #์ถ๊ฐ
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.HomeView.as_view(), name='home'), #์ถ๊ฐ
]configํด๋ ํ์์ views.py์ ์๋ก ์์ฑํ๊ณ HomeView ์ถ๊ฐํด์ค๋ค.
from django.shortcuts import render
from django.views.generic import TemplateView
# Create your views here.
class HomeView(TemplateView):
template_name = 'index.html'public/index.html์ {% load render_bundle from webpack_loader %}์ {% render_bundle 'index' %}๋ฅผ ์ถ๊ฐํด์ค๋ค.
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>django-vue</title>
</head>
<body>
<noscript>
<strong>We're sorry but django-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
{% render_bundle 'index' %}
<!-- built files will be auto injected -->
</body>
</html>
4. webpack-bundle-tracker
webpack-bundle-tracker(owais/webpack-bundle-tracker)๋ฅผ ์ค์นํด์ค๋ค.
$ cd django-vue
$ npm install --save-dev webpack-bundle-tracker์ต์์ํด๋(django-vue/) ํ์์ vue.config.jsํ์ผ์ ์์ฑํ๋ค.
const BundleTracker = require('webpack-bundle-tracker');
module.exports = {
publicPath: 'http://127.0.0.1:8080/',
outputDir: './dist/',
chainWebpack: config => {
config.optimization.splitChunks(false)
config.plugin('BundleTracker').use(BundleTracker, [{filename: './webpack-stats.json'}])
config.devServer.public('http://0.0.0.0:8080').host('0.0.0.0').port(8080).https(false).headers({"Access-Control-Allow-Origin":["\*"]})
},
pages: {
index: 'src/main.js'
}
}
5. ์๋ฒ ์คํ
Django ํ๋ก์ ํธ์ Vue ํ๋ก์ ํธ์ ์๋ฒ๋ฅผ ๊ฐ๊ฐ ์คํํ ํ 'http://127.0.0.1:8080/'(์ฅ๊ณ ๊ธฐ๋ณธ ์๋ฒ) ์ ์ ์ํ๋ฉด Vueํ๋ก์ ํธ ์คํ ์ฒซํ๋ฉด์ด ๋จ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
$ npm run serve
$ python manage.py runserver
'๐ก์น ํ๋ก์ ํธ > (ํ์คํ) MOVIEW ์ฌ์ดํธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ๋ค์ด๋ฒ ์ผํ ์์ดํ ๋ชฉ๋ก ๊ฐ์ ธ์ค๊ธฐ (0) | 2021.08.06 |
|---|---|
| Web Scraping์ด๋? (0) | 2021.08.06 |
