오늘은 .. SPA 구현을 위한 걸음마를 떼었다. 어제 Ajax는 서버 기반이 있을 때만 눈으로 확인이 가능하다는 것을 알게 되었고 내가 그나마 조금이라도 할 줄 아는 건 Django였기 때문에 (Node.js도 할 줄은 알지만 진짜 기초중에서도 기초밖에 몰라서 생각을 안해봄) Django를 이용해서 Ajax통신을 연결하고, 버튼을 눌렀을 때 새로고침 없이 views.py에서 데이터를 불러와서 내보내주는 과정을 구현했다.
Ajax에 대해 이제야 걸음마를 좀 뗀 수준인데, 아직 저기에서 보다시피 문제가 있다. data 내 Organization에 대해 for문을 돌리도록 설계를 했는데, 내가 원하는 건 Sangmin Park steadily-worked 이런 식으로 name과 github가 병렬적으로 나오는 구조인데, 아직 거기까진 생각이 미치지 못했다. JS 배열에 대한 개념이 부족하기 때문이라고 생각한다. 좀 더 해봐야한다. ㅜㅜ 프론트엔드쪽은 (물론 백엔드도 당연하겠지만) 해야 할 것 / 알아야 할 것이 너무 많은 것 같다. 일상생활에서 우리가 흔히 접하는 기술들이 고급스러웠던 것은 유망한 프론트 개발자가 구현했기 때문이 아닐까 하는 생각이 들면서 .. 회사에서 요구하는 수준의 JavaScript 실력에 도달하려면 한참 멀었다는 사실을 다시 한 번 깨달았다.
views.py
from django.shortcuts import render
from django.http import HttpResponse
import json
# Create your views here.
def main(request):
return render(request, 'index.html')
def ajax(request):
data = {
'Organization': [
{
"name": "Sangmin Park",
"github": "steadily-worked"
},
{
"name": "Woosik Kim",
"github": "well-balanced"
},
{
"name": "Hyeonsu Lee",
"github": "incleaf"
},
{
"name": "Hoseon Lee",
"github": "indante"
}
]
}
response = json.dumps(data)
return HttpResponse(response)
# return HttpResponse(json.dumps(data), content_type='application/json')
# content를 context에 담고 content_type을 json.dumps(context)가 json화 시켜준다. 그리고 만든 걸 다시 JS에 넘겨준다.urls.py
from django.contrib import admin
from django.urls import path, include
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.main, name='main'),
# ajax 통신요청 경로
path('ajax/', views.ajax, name='ajax'),
]이 두 부분을 제외하고 나머지는, Ajax 구현을 위한 Django에서의 초기 세팅과 다르지 않으므로 생략한다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Ajax test</h1>
<p id='example'>hello<br></p>
<input type='button' id='execute' value='execute' />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- jQuery 라이브러리 사용 -->
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<script>
$('#execute').click(function() {
$.ajax({
url:'{% url "ajax" %}',
dataType: 'json',
success: function(data){
alert('good');
var str= '';
for (var name in data.Organization){
str += '<li>We are: '+name+'</li>'; // key값 출력시 name
str += '<li>Members: '+name.name+'</li>';
}
$('#example').html('<ul>'+str+'</ul>')
},
error: function(request, status, error){
alert('bad');
alert(error);
$('#example').html('AJAX 통신에 실패했습니다.')
}
})
})
</script>
</body>
</html>보다시피 jQuery를 기반으로 했다.. jQuery가 현재 사양화되고 있다고 하지만 대부분의 웹페이지가 jQuery 기반이고 하니 주를 Vanilla JS로, 부를 jQuery로 가져가고자 한다.
참 JS는 .. 매력적인 언어인데 어렵다. 2년간 꾸준히 열심히 해야지..
'today i learned' 카테고리의 다른 글
| today i learned 9/5 (0) | 2020.09.07 |
|---|---|
| today i learned 9/4 (0) | 2020.09.04 |
| today i learned 9/2 (0) | 2020.09.03 |
| today i learned 9/1 (0) | 2020.09.02 |
| today i learned 8/31 (0) | 2020.09.01 |
