🛠️ 환경

항목	Env Info
🖥️ 서버	Tomcat
🍭 프레임워크	Spring Boot
📀 데이터베이스	MySQL with Azure
📝 JPA	Hibernate
🙈 외부 라이브러리	lombok, thymeleaf, AJAX
📏 디자인 패턴	MVC

---

👀 방법

가. html에 수정버튼 생성하고 스크립트 코드 작성

  <span class="delete-btn" th:attr="data-id=${item.id}" style="cursor: pointer; padding: 6px 12px;">🗑️</span>

document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(".delete-btn").forEach(btn => {
        btn.addEventListener("click", async <() => {
            const itemId = btn.getAttribute("data-id");

            if (!confirm("정말 삭제하시겠습니까?")) return;

            const res = await fetch(`/items/${itemId}`, {
                method: "DELETE"
            });

            if (res.ok) {
                btn.closest(".detail").remove();
            } else {
                alert("삭제 실패");
            }
        });
    });
});

돔이 완전이 실행되고 버튼이 눌리면 AJAX로 비동기 삭제 요청을 보내서 새로고침 할 필요없이 페이지에서 삭제해준다. 그리고 삭제전에 한번 confirm으로 확인하였다.

fetch로 AJAX를 사용하여 Delete 요청을 서버에 비동기적으로 전송한다.

나. 상품 Delete 비즈니스 로직 구현

public void DeleteItem(Long id){
        Optional<Item> opt=FindItem(id);
        if (opt.isPresent()) {
            itemRepository.deleteById(id);
        }
    }

존재여부를 확인하고 존재하면 deleteByID를 사용해서 삭제하게 만들었다.

다. 컨트롤러 부분 구현

// 3. 상품 삭제
    @DeleteMapping("/items/{id}")
    @ResponseBody
    public String delete(@PathVariable Long id) {
        itemService.DeleteItem(id);
        return "success";
    }

DeleteMapping을 사용하였다.

---

💁🏻 기타

가. 쿼리스트링으로 보냈을 때 @RequestParam으로 받을 수 있는 이유
쿼리스트링의 Key가 해당 함수의 파라미터 변수명과 일치하면 Spring이 자동으로 바인딩해준다.

나. AJAX란?
클라이언트가 서버에 요청을 하면 원래 클라이언트의 페이지가 새로고침하게 되는데 AJAX는 새로고침을 안해도 서버에게 요청을 할 수 있게 해주는 친구

---

😏 느낀점

위와같은 상황에는 delete요청에 대한 id를 url에 담아서 보내기 때문에 DB정보 노출에 대한 위험성이 존재한다.