2. Django 어플리케이션 작성(계속)
ㅇ url 연결하기
- 앞에서 작성한 view가 메인 페이지에서 수행됨으로 이를 정의합니다.
<mywebapp/urls.py>
from django.contrib import admin
from django.urls import path
from applycelery import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.app_core),
]
ㅇ template 만들기
- 브라우져에서 보여지는 화면을 만들어 봅시다. html에 대하여는 여기서 설명하지는 않겠습니다. 화면 구성을 위해서 metarialize 프레임워크를 사용하였습니다.
- 먼저 templates를 위치시킬 폴더를 만듭니다. django는 앱 내에 templates 폴더의 html을 자동으로 참조 합니다. 여기서는 <applycelery/templates>가 되며 이곳에 html 파일을 생성합니다.
<applyelery/template/django_celery_main.html>
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="ko">
<head>
<title>Django Celery</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css" media="screen,projection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="navbar-fixed">
<nav class="purple lighten-3">
<div class="nav-wrapper">
<a href="./" class="brand-logo center">Django Celery</a>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col s9">
{% for content in operate_list %}
<!-- Grey navigation panel -->
<div class="card">
<div class="card-content">
<p>버튼클릭 : {{ content.click_time|time:"g:i:s.u" }}</p>
<p>처리완료 : {{ content.done_time|time:"g:i:s.u" }}</p>
<p>시간차이 : {{ content.time_gap }}</p>
<p>누른버튼 : {{ content.click_command }}</p>
</div>
</div>
{% endfor %}
</div>
<div class="col s3">
<!-- Teal page content -->
<div class="col s12">
<form action="#" method="get">
<p></p>
<button name="operate" value="click" class="waves-effect waves-light purple lighten-3 btn">OPERATE</button>
<p></p>
<button name="operate_delay" value="click" class="waves-effect waves-light purple lighten-3 btn">OPERATE(delay 10s)</button>
<p></p>
<button name="celery" value="click" class="waves-effect waves-light purple lighten-3 btn">CELERY</button>
<p></p>
<button name="celery_delay" value="click" class="waves-effect waves-light purple lighten-3 btn">CELERY(delay 10s)</button>
</form>
</div>
</div>
</div>
</div>
<!--Import .js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
ㅇ 현재까지 동작 확인
- 지금까지의 과정을 잘 따라오셨다면 처음 시작하면서 보았던 화면과 유사한 화면이 django 컨테이너에서 구동중인 서버에서 동작하고 있음을 확인할 수 있습니다.
- 지금까지는 기본동작(동기 프로세스) 버튼 2개만 동작 합니다. 각각의 버튼을 눌러보면 OPERATE 버튼의 경우 누르는 즉시 결과가 표시되고, OPERATE(DELAY 10S) 버튼은 누른 후 잠시 페이지가 정지한 후 동작하여 그 결과를 표시함을 알 수 있습니다.
- 동작결과에 표시되는 큭릭 및 동작완료 시간을 통해서도 이를 확인할 수 있습니다.
지금까지는 동기프로세스, 즉 하나의 Flow로 동작하는 django 어플리케이션 사이트를 만들었습니다. 여기서 OPERATE(DELAY 10S)는 하나의 긴 동작시간을 갖는 프로세스를 의미하는데요, 과연 공개된 사이트가 긴 시간동안 사용자의 페이지를 멈춰놓고 자기 일만 하고 있다면 그 사이트는 사용자 경험을 저해하는 요소가 될 것입니다.
다음 포스팅에서는 드디어 위와같은 DELAY 동작을 비동기(백그라운드)로 동작하도록 하겠습니다.
'Technique' 카테고리의 다른 글
| 웹서비스 비동기(백그라운드) 프로세스 만들기 (feat. Django, Celery) 5 (0) | 2018.04.08 |
|---|---|
| 웹서비스 비동기(백그라운드) 프로세스 만들기 (feat. Django, Celery) 4 (0) | 2018.04.05 |
| 웹서비스 비동기(백그라운드) 프로세스 만들기 (feat. Django, Celery) 2 (0) | 2018.04.01 |
| 웹서비스 비동기(백그라운드) 프로세스 만들기 (feat. Django, Celery) 1 (0) | 2018.03.27 |
| Google Cloud, Docker로 간단하게 웹서비스 구축하기(feat. Django) 5 (1) | 2018.01.20 |