Spring Boot To do List 비동기_04 할 일 상세 조회

1. 할 일 상세 조회 시 출력되는 화면(모달창)

popup layer(==모달창) : 현재 페이지 위에 새로운 레이어를 띄우는 것

main.html

    <div id="popupLayer" class="popup-hidden">
      <!-- 처음에 숨겨 놓기 css 에 설정해놓음-->
        <div class="popup-row">
            번호 : <span id="popupTodoNo"></span>
            |
            제목 : <span id="popupTodoTitle"></span>

            <span id="popupClose">&times;</span>
        </div>

        <div class="popup-row">
            완료 여부 : <span id="popupComplete"></span>
            |
            등록일 : <span id="popupRegDate"></span>
        </div>

        <div class="popup-row">
            [내용]
            <div id="popupTodoContent"></div>
        </div>

        <div class="btn-container">
            <button id="changeComplete">완료 여부 변경</button>
            <button id="updateView">수정</button>
            <button id="deleteBtn">삭제</button>
        </div>
    </div>

2. html js로 요소 얻어오기

// 할 일 상세 조회 관련 요소
const popupLayer = document.querySelector("#popupLayer");
const popupTodoNo = document.querySelector("#popupTodoNo");
const popupTodoTitle = document.querySelector("#popupTodoTitle");
const popupClose = document.querySelector("#popupClose");
const popupComplete = document.querySelector("#popupComplete");
const popupRegDate = document.querySelector("#popupRegDate");
const popupTodoContent = document.querySelector("#popupTodoContent");

// 상세 조회 팝업 레이어에 있는 버튼
const changeComplete = document.querySelector("#changeComplete");
const updateView = document.querySelector("#updateView");
const deleteBtn = document.querySelector("#deleteBtn");

3. js에서 할 일 목록에서 할 일 제목 a 태그 누르면 상세 조회 되게 하는 함수 정의

selectTodo() 정의

ajax-main.js

const selectTodo = (url) => {
    // 함수에서 받는 매개변수
    // url == "/ajax/detail?todoNo=" + todo.todoNo 형태의 문자열

    fetch(url)

4. controller 에서 값 받아서 service 호출 후 sql 조회 값 돌려주기

AjaxController

	@ResponseBody
	@GetMapping("detail")
	public Todo selectTodo(@RequestParam("todoNo") int todoNo) {
		return service.todoDetail(todoNo);
	}

비동기 요청이어도 query String 값은 @RequestParam 으로 받아줌

return 자료형 : Todo
-> HttpMessageConverter 가 String(JSON)형태로 변환해서 반환해줌 (@ResponseBody)

5. java 에서 보내준 값 js 에서 받아서 처리해주기

fetch(url) 아래로 코드 추가

ajax-main.js

    .then(resp => resp.json())
    .then(todo => {
        // 매개변수 todo :
        // - 서버 응답(JSON)이 Object로 반환된 값

        // popup Layer에 조회된 값을 출력
        popupTodoNo.innerText = todo.todoNo; // key 값으로 접근해서 value 값 꺼내옴
        popupTodoTitle.innerText = todo.todoTitle;
        popupComplete.innerText = todo.complete;
        popupRegDate.innerText = todo.regDate;
        popupTodoContent.innerText = todo.todoContent;

        // popup Layer 보이게 하기
        popupLayer.classList.remove("popup-hidden");

    });

response.json()

• 응답 데이터가 JSON인 경우
  이를 자동으로 Object 형태로 변환하는 메서드
  == JSON.parse(JSON 데이터)
  단일 값은 .text()
  java 객체 형태는 .json()
  java 단에서 JSON 으로 넘겼을 때 사용

    fetch(url) // 누르는 거에 따라 url 주소 달라짐
    .then(resp => resp.text())
    .then(result => {

        // result 에는 JSON 형태 string 으로 값이 들어있음
        const todo = JSON.parse(result);
        // JSON.parse(result) => String 형태의 JSON 을 JS 객체로 만들어주는 거

    });

-> 이걸 한번에 해주는 방법

    fetch(url) // 누르는 거에 따라 url 주소 달라짐
    .then(resp => resp.json())
    .then(result => {

    });

상세 조회 창에 뜨는 x 버튼 클릭 시 창 닫게 하기

popupClose.addEventListener("click", () => {
    // 숨기는 class 추가
    popupLayer.classList.add("popup-hidden");
})