Django #8-1 - delete, JSON 연동 코딩

Delete

이번에는 우리가 Todo를 작성하여 DB로 올렸던 데이터를 삭제해보는 Delete api 기능을 만든다.

todo_index.html

먼저, 우리는 todo의 삭제를 하기 위해서는 id 값이 필요하다.

index와 id는 엄연히 다른 것이기 떄문에 pk역할을 하고 있는 id를 가져온다.

<span class="removeBtn" @click="remove_todo(todo, index)">&#x00D7</span>

삭제버튼을 클릭했을 때의 함수에서 todo 값을 매개변수로 넘겨준다.

remove_todo: function (todo, index) {
  console.log(todo, index);

  var vm = this;
  axios.delete('/api/todo/' + todo.id + '/delete/').then(function (res) {
    console.log("Delete Res", res);
    vm.todoList.splice(index, 1);
  }).catch(function (err) {
    console.log("Delete Err", err);
  })
},

콜백 함수 내 this를 로컬 변수로 처리한다. 그리고 axios의 delete 문법을 작성하고 splice 메소드를 이용해서 todoList 배열에서 해당 부분을 삭제하는 코드를 작성한다.

urls.py

path('todo/<int:pk>/delete/', views.ApiTodoDelV.as_view(), name='delete'),

views.py

class ApiTodoDelV(DeleteView):
    model = Todo


    def delete(self, request, *args, **kwargs):
        self.object = self.get_object();
        self.object.delete()
        return JsonResponse(data = {}, status = 204)
    

여기까지 하고 서버를 실행해 삭제 테스트를 진행해본다.

그러면 아마 기능은 작동하지 않고 콘솔에 Error가 뜰건데,

장고에서도 에러 메시지를 확인해보면 CSRF token이 없다는걸 알 수 있다.

웹 프로그래밍에서는 CSRF 공격방지 기능을 반드시 코딩해주어야 한다.

왜냐하면 웹사이트에서 CSRF 공격은 그리 어렵지 않은 기술이기 때문이다.

CSRF는 이미 인증된 권한을 이용해서 악성 스크립트를 실행시키는 공격방법이다.

장고에서는 CSRF 방어 기능을 제공해주고 있는데, 그게 토큰을 이용하는 방법이다.

장고 공식문서에서도 참조해서 확인해보길 권한다.

일단은 나중에 처리할 것이기 때문에 views.py에 데코레이터를 추가한다.

@method_decorator(csrf_exempt, name='dispatch')
class ApiTodoDelV(DeleteView):
    model = Todo

    def delete(self, request, *args, **kwargs):
        self.object = self.get_object();
        self.object.delete()
        return JsonResponse(data={}, status=204)

여기까지 기능을 완성하였고 테스트를 해본다.

삭제 시 콘솔에도 성공적으로 잘 찍힌 모습이다.


네트워크에서도 delete api 통신시 삭제 api가 204 상태 응답코드로 성공되었음을 보여준다.

JsonResponse로 응답처리를 할 때는 DeleteView, ListView 보다는 그 보다 하위에 있는
BaseDeleteView BaseListView 코드를 사용하는게 좀 더 간결한 코드이다.

이유는 DeleteView 와 ListView 등 상위 트리는 Mixin 클래스 등을 포함하고 있기 때문에 사용하지 않는 트리는 굳이 사용하지 않는 편을 권한다.

수정 코드

views.py

from django.http import JsonResponse
from django.utils.decorators import method_decorator
from django.views.decorators.csrf import csrf_exempt
from django.views.generic.edit import BaseDeleteView
from django.views.generic.list import BaseListView

from todo.models import Todo


class ApiTodoLV(BaseListView):
    model = Todo

    # template_name =

    # def get(self, request, *args, **kwargs):
    #     tmpList = [
    #         {'id': 1, 'name': 'd테스트1', 'todo': '테스트 내용 1'},
    #         {'id': 2, 'name': 'd테스트4', 'todo': '테스트 내용 4'},
    #         {'id': 3, 'name': 'd테스트2', 'todo': '테스트 내용 2'},
    #         {'id': 4, 'name': 'd테스트3', 'todo': '테스트 내용 3'},
    #     ]
    #     return JsonResponse(data=tmpList, safe=False)
    #

    def render_to_response(self, context, **response_kwargs):
        todoList = list(context['object_list'].values())
        return JsonResponse(data=todoList, safe=False)
#
@method_decorator(csrf_exempt, name='dispatch')
class ApiTodoDelV(BaseDeleteView):
    model = Todo

    def delete(self, request, *args, **kwargs):
        self.object = self.get_object();
        self.object.delete()
        return JsonResponse(data={}, status=204)

삭제와 리스트 테스트를 진행한다.

다음 포스트는 CRUD의 C(create)를 해보겠다.

GitHub Source

👉🏻깃허브 소스