Spring Boot To do List 비동기_06 완료 여부 변경

1. 완료 여부 변경 버튼 눌렀을 때 함수 정의

1-1. 버튼 클릭 시 모달 창에 떠 있는 todoNo 얻어오기

ajax-main.js

changeComplete.addEventListener("click", () => {

    const todoNo = popupTodoNo.innerText;

1-2. SQL 수행 시 완료 여부가 변경된 값을 삽입해주기 위해 삼항 연산자 사용해서 값 대입

Y 이면 N 으로 Y가 아니라면(== N) Y로

    const complete = popupComplete.innerText === 'Y' ? 'N' : 'Y';

1-3. SQL 수행에 필요한 값을 javascript 객체 형태로 묶어주기

    const obj = {"todoNo" : todoNo, "complete" : complete};

비동기 요청으로 Controller로 값 보내주기

    fetch("/ajax/changeComplete", {
        method : "PUT",
        headers : {"Content-Type" : "application/json"},
        body : JSON.stringify(obj) // obj 값을 JSON 으로 변환해서 java 로 보내줌
    })

2. Controller 에서 값 받아서 Service 호출하고 돌려 받은 값 다시 js 로 보내주기

obj 의 key 값과 Todo 의 필드명이 같으면 obj의 value 값이 Todo 에 자동으로 setting 됨

AjaxController

	@ResponseBody
	@PutMapping("changeComplete")
	public int changeComplete(@RequestBody Todo todo) {
		return service.changeComplete(todo);
	}

3. js에서 돌려받은 값을 가공해서 분기처리

ajax-main.js

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

        // result 성공한 행의 개수, 실패했으면 0
        // 분기 처리
        if(result > 0) {

성공했을 때 update된 DB 데이터를 다시 조회해서 화면에 출력
-> 서버 부하가 큼

selectTodo(); 이렇게 다시 함수 호출해도 되지만
=> 서버 부하를 줄이기 위해 상세 조회에서 Y/N 만 바꾸기

            popupComplete.innerText = complete;

완료된 Todo 개수도 바꿔줘야함
뒤에 화면에서도 Y, N 바뀐 거 알려줘야함

getCompleteCount();
서버 부하를 줄이기 위해 완료된 Todo 개수 +-1 처리

innerText 로 가져오면 타입이 String 숫자형태로 변경해줘야함

            const count = Number(completeCount.innerText);

            if(complete === 'Y') completeCount.innerText = count + 1;
            else completeCount.innerText = count - 1;

            // 서버 부하 줄이기 가능은 하지만 코드가 복잡해서 다시 호출
            selectTodoList();

        } else {
            // 실패했을 때
            alert("완료 여부 변경 실패");
        }
    });
});