용어
1. Axios
* Axios 는 ajax 와 같은 웹서비스의 비동기 통신을 위한 자바스크립트 라이브러리입니다.
* Axios [액시오스] 의 full name 이 궁금했지만 찾을수가 없었습니다. 혹시 아시는 분은 댓글로 알려주세요.
액시오스가 그리스어로 worthy (가치있는) 라는 의미인데 무언가 연관되어 있는 것 같기도 합니다.
아마도 Ajax 과 같이 Asynchronous 라는 걸로 시작하지 않을까 생각합니다.
2. JsonResponse
* 클라이언트(브라우저)에 Json 형식으로 데이타를 전달하는 django 의 기능입니다.
3. Node.js
* Node.js [노드제이에스] 는 브라우저에서만 동작하던 자바스크립트가 서버 환경에서도 동작하도록 해주는 플랫폼(런타임 환경)입니다.
즉, 브라우저에서만 동작되던 자바스크립트를 모든 응용프로그램을 만들 수 있는 언어로 확장했다고 생각하면 됩니다.
기본 작업 환경 구축
1. 장고 프로젝트 생성
https://ixiioi.tistory.com/entry/장고?category=957983
무조건 따라하기
1. 장고 앱 (todo) 만들기
* 실행환경 : (파이썬 가상환경) 윈도우 프롬프트
* 실행 폴더 위치 : VSCode 프로젝트 폴더
* 명령어 사용법 : django-admin startapp <장고 앱 이름>
(venv)~> django-admin startapp todo2. 장고 앱 등록하기
config/setting.py 의 INSTALLED_APPS 리스트에 앱 이름 (todo) 을 추가합니다.
# config/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'todo',
]3. 장고 프로젝트에서 모델 만들기
# todo/models.py
from django.db import models
class Todo(models.Model):
title = models.CharField(max_length=100)
completed = models.BooleanField()
def __str__(self):
return self.title4. 데이타베이스에 모델 마이그레이션하기
(venv)~$> python manage.py makemigrations
(venv)~$> python manage.py migrate
5. 관리자 페이지에 데이타베이스 모델 등록하기
# todo/admin.py
from django.contrib import admin
from .models import Todo
class TodoAdmin(admin.ModelAdmin):
list_display = ['title','completed']
admin.site.register(Todo, TodoAdmin)6. 뷰 만들기
[코드 설명 참고]
* JsonResponse 객체를 import 합니다.
* 함수형 뷰 [Function Based View - FBV] 를 만듭니다.
* list 함수에서 Todo.objects.all() 로 Todo 모델의 모든 데이타를 불러와서 딕셔너리 자료형으로 저장합니다.
Json 데이터로 가공하려면 모든 데이타를 파이썬의 딕셔너리 자료형으로 저장해 놓아야 합니다.
Vue.js 에서 데이타를 받을 수 있도록 JsonResponse 를 사용하여 데이타를 반환합니다.
[파이썬 문법 참고]
반복문에서 enumerate() 는 몇번째 반복인지를 돌려줍니다.
# todo/views.py
from django.shortcuts import render
from django.http import JsonResponse
from todo.models import Todo
import json
def index(request):
return render(request, 'todo/index.html', {})
def list(request):
todos = Todo.objects.all()
todo_list = []
for index, todo in enumerate(todos, start=1):
todo_list.append({'id':index,'title':todo.title,'completed':todo.completed})
return JsonResponse(todo_list, safe=False) 7. URL 연결하기
# config/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('todo.urls'))
]# todo/urls.py
from django.urls import path
from .views import *
urlpatterns = [
path('api/list/', list, name='list'),
path('', index, name='index'),
]8. 템플릿 생성 및 Vue.js 적용
* config/setting.py 파일의 TEMPLATES 리스트의 DIRS 에 경로 추가
# config/settings.py
TEMPLATES = [
{
'DIRS': [BASE_DIR / 'templates'],
},
]
# 혹은
import os
TEMPLATES = [
{
'DIRS': [os.path.join(BASE_DIR, 'templates')],
},
]* Axios 를 cdn 방식으로 적용
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>* Vue.js 를 cdn 방식으로 적용
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- templates/base.html -->
<html>
<head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
{% block extra_script_footer %}
{% endblock %}
</body>
</html><!-- todo/templates/todo/list.html -->
{% extends 'base.html' %}
{% block content %}
<div id="app">
<div>
[[ message ]]
<div v-for="(todo, id) in todoList" :key="id">
<span>[[todo.id]]) [[todo.title]]</span>
</div>
</div>
</div>
<script>
new Vue({
delimiters: ["[[", "]]"],
el: '#app' ,
data: {
message: 'Django 에서 전송한 데이타를 Vue.js 로 화면에 표시합니다.',
todoList: []
},
created: function() {
this.fetch_all_todo();
},
methods: {
fetch_all_todo: function () {
var vm = this;
axios.get('/api/list/')
.then(function (res) {
vm.todoList = res.data;
})
.catch(function (err) {
console.log("GET ERR", err)
})
}
}
})
</script>
{% endblock %}
설명
1. todo 라는 앱 서비스를 만듭니다.
2. 메인 페이지를 장고의 템플릿인 base.html 과 index.html 을 만듭니다.
3. 첫 화면을 위한 루트 url 을 통해서 index 뷰를 호출하면 index.html 를 렌더링 합니다.
4. index.html 의 fetch_all_todo() 함수가 자동으로 실행되면 axios.get('api/list/') 를 장고 서버로 url 을 전달됩니다.
5. 서버에서는 api/list/ url 과 연결되어 있는 list 뷰를 실행합니다.
6. list 뷰는 데이타베이스에서 todo 데이타를 모두 가져와서 JsonResponse 를 사용해 리스트 변수 형태로 클라이언트로 전달합니다.
7. 해당 Json 데이타는 axios.get('api/list/') 를 호출한 index.html 로 전달되고 vm.todoList = res.data; 로 Vue.js 의 data 에 전달합니다.
8. Vue.js 는 todoList 와 바인딩 되어 있는 [[todo.title]] 을 통해 데이타를 화면에 표시합니다.
장고와 뷰, 리액트를 사용한 웹 서비스
전체 리프레쉬가 필요없이 부분 업데이트가 되는 비동기 웹애플리케이션 서비스를 만드려면
전체 리프레쉬가 필요없이 부분 업데이트가 되는 비동기 웹애플리케이션 서비스를 만드려면
1) 장고[django]로 동작을 (백엔드 서비스) 만들고
2) 리액트[React.js]나 뷰[Vue.js]로 사용자 화면 (프론트 엔드) 을 만들고
3) 장고의 API와 프론트엔드를 연결합니다.
서비스 런칭을 하려면
1) 모두가 접속할 수 있도록 파이썬 애니웨어 등으로 호스팅을 하여 공개합니다.
2) 모바일 웹서비스로 먼저 런칭을 하고 페이지뷰에 따른 배너 광고 수익을 만듭니다.
3) 리액트 네이티브로 스마트폰 앱을 만들어 런칭합니다.
코드 모음
참고
Django - Vue.js 와 연동하기 : https://newbiecs.tistory.com/197?category=724785
Django - Vue(Todo App, 1) : https://newbiecs.tistory.com/200?category=724785
Django - Vue(Django 뼈대 만들기 , 2) : https://newbiecs.tistory.com/201?category=724785
Django - Vue(Mixin 사용하기, bootstrap 팝업창 만들기 , 4) : https://newbiecs.tistory.com/203?category=724785
Django - Vue(Client vs Server Rendering, SPA vs SSR, 4) : https://newbiecs.tistory.com/206?category=724785
Django - Vue(Json연동, Vue.hs Directive, axios) : https://newbiecs.tistory.com/207?category=724785
Vue.js Django CRUD REST 해보기 https://pjs21s.github.io/vuejs-restframe/
https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API
https://namu.wiki/w/Node.js?from=Nodejs
https://pythonq.com/so/python/1564352
https://kr.vuejs.org/v2/examples/todomvc.html
https://v3.vuejs.org/examples/todomvc.html
도움이 되셨다면 로그인 없이 가능한
아래 하트♥공감 버튼을 꾹 눌러주세요!
서식 참고 : barista7.tistory.com/112
'코딩 > 파이썬>장고 [django]' 카테고리의 다른 글
| 1. 장고 기본 프로젝트 생성 (0) | 2021.03.31 |
|---|