Spring Boot To do List 비동기_05 할 일 삭제

1. 얻어둔 버튼 클릭시 함수 정의

ajax-mian.js

deleteBtn.addEventListener("click", () => {
  
    // 정말 삭제하시겠습니까? 물어보고
    // 취소 클릭 시 아무것도 안함
    if(!confirm("정말 삭제하시겠습니까?")) {
        // 부정논리연산자 붙여서 취소 클릭했을 때 if문 수행
        return;
    }
  
    // 확인 버튼 클릭 시
    // 현재 삭제하려는 할 일 번호 얻어오기
    const todoNo = popupTodoNo.innerText;
    // 삭제 버튼은 상세 조회 모달창 떴을 때 뜨는 버튼
    // #popupTodoNo 내용 얻어오기

    // 요청할 때 todoNo 같이 보낼 거임
    // 비동기 DELETE 방식 요청
    fetch("/ajax/delete", {
        method : "DELETE",
        headers : {"Content-Type" : "application/json"},
        body : todoNo
    })

DELETE 방식 요청 -> Controller 에서 @DeleteMapping 으로 요청 처리

데이터 하나를 전달하더라도 JSON 방식이란 걸 알려줘야해서 application/json 작성해줘야함

todoNo 값을 body 에 담아서 전달하겠다.
-> Controller에서 @RequestBody 로 꺼냄

2. Controller 에서 js 에서 보낸 값 매개변수로 받아서 service 호출 sql 조회 후 다시 돌려받은 값 그대로 js 에 돌려주기

AjaxController

	@ResponseBody
	@DeleteMapping("delete")
	public int todoDelete(@RequestBody int todoNo) {
		return service.todoDelete(todoNo);
	}

Delete 방식 요청 처리 (비동기 요청만 가능)
js body 에 실어서 보낸 거 받기

REST API (AJAX) 형식 기반 이용
DELETE/PUT 비동기에서만 가능
GET/POST 는 비동기, 동기 둘 다 사용 가능
REST API -> RESTFUL 자원(데이터) 중심 고유한 uri 로 식별하는 거
웹 / 모바일 다양한 플랫폼에서 접근할 때 원할하게 수행 REST API
요청 주소 자체도 단순화 해서 사용 ("delete")

3. Controller 에서 @ResponseBody 로 돌려준 값 그대로를 js 에서 받아서 결과값에 따라 처리해주기

ajax-main.js

    .then(resp => resp.text())
    .then(result => {

        if(result > 0) {
            // 삭제 성공
            alert("삭제 성공");
            // 삭제 후 상세조회 창 닫아줄 거
            popupLayer.classList.add("popup-hidden");

            // 전체, 완료된 할 일 개수 다시 조회
            // + 할 일 목록 다시 조회
            selectTodoList();
            getTotalCount();
            getCompleteCount();
        } else {
            // 삭제 실패
            alert("삭제 실패");
        }
    })