📌 Django DeleteView의 확인 화면 제거 vs JS confirm() 비교 가이드

📌 Django DeleteView의 확인 화면 제거 vs JS confirm() 비교 가이드

DeleteView를 사용할 때, Django 기본 확인 화면을 유지할지, JavaScript의 confirm() 팝업을 사용할지 고민되셨나요? 아래에 각 방식의 차이점과 구현법, 주의사항까지 깔끔히 정리해드렸습니다 ✅

---

🔍 현재 문제 상황

• DeleteView를 사용 중인데 삭제 확인 화면(todo_confirm_delete.html) 이 자동으로 나오지 않음
• 대신 JavaScript confirm() 팝업만 나타남

---

⚙️ Django DeleteView 기본 동작 방식

class TodoDeleteView(DeleteView):
    model = Todo

• 위와 같이 정의하면 Django는 기본적으로 todo/todo_confirm_delete.html 템플릿을 자동으로 찾아 보여줍니다
• 즉, GET 요청 시 삭제 전 확인 화면을 렌더링합니다

---

⚡ JavaScript confirm()을 활용한 방식

아래처럼 get() 메서드를 post()로 우회하면 확인 화면 없이 바로 삭제 처리가 진행됩니다:

class TodoDeleteView(DeleteView):
    model = Todo

    def get(self, *args, **kwargs):
        return self.post(*args, **kwargs)

🧠 해석:

• GET 요청도 POST처럼 처리되므로
• todo_confirm_delete.html을 렌더링하지 않고 삭제를 바로 실행

---

✅ HTML + JS confirm() UI 구조 예시

📄 HTML

<form id="delete_form" method="post" action="{% url 'cbv_todo_delete' todo.id %}" style="display: inline;">
  {% csrf_token %}
  <button type="button" id="delete_btn">삭제하기</button>
</form>

⚙️ JavaScript

<script>
document.addEventListener('DOMContentLoaded', function () {
  const btn = document.querySelector('#delete_btn');
  const form = document.querySelector('#delete_form');

  if (btn && form) {
    btn.addEventListener('click', function () {
      if (confirm('정말 삭제하시겠습니까?')) {
        form.submit();
      }
    });
  }
});
</script>

---

🧾 비교표로 한눈에 보기

항목 Django 기본 DeleteView JS confirm() 방식

확인 화면 제공	todo_confirm_delete.html 자동 렌더	JS 팝업으로 대체
GET 요청	확인 화면으로 응답	바로 삭제 처리 (주의)
템플릿 필요	O (todo_confirm_delete.html)	X
사용자 UX	2단계 확인	1-Click 삭제 (빠름)
구현 난이도	Django 설정 필요	JS 코드만 추가하면 됨

---

⚠️ 주의사항: get() 오버라이드 여부 확인!

class TodoDeleteView(DeleteView):
    model = Todo

    def get(self, *args, **kwargs):
        return self.post(*args, **kwargs)

• 위 코드처럼 get()을 오버라이드하고 있으면, Django는 절대 todo_confirm_delete.html을 렌더링하지 않습니다!
• 다시 확인 화면을 사용하고 싶다면 get() 메서드를 삭제해야 합니다

---

✅ 마무리 정리

구분 설명

Django 기본 방식	GET 요청 시 자동으로 확인 화면을 렌더링함
JS confirm 방식	확인 화면 생략 + JS로 팝업 처리
주의할 점	get()을 오버라이드하면 화면 렌더링이 되지 않음

---

💡 추가 가이드 필요 시:

• todo_confirm_delete.html 템플릿 복구법
• CBV vs FBV 기반 삭제 흐름 비교
• JS confirm 대신 모달 창으로 UI 개선하기

언제든지 요청해주세요 🙂