Spring Boot To do List 비동기_02 할 일 추가하기

1. html 값 js 얻어오기

main.html

    <div>
        <h4>할 일 추가</h4>

        <div>
            제목 : <input type="text" id="todoTitle">
        </div>

        <div>
            <textarea id="todoContent"
                cols="50" rows="5" placeholder="상세 내용"></textarea>
        </div>

        <button id="addBtn">추가하기</button>
    </div>

form 태그는 동기식 요청으로밖에 못 써서 form 태그 사용 안함

ajax-main.js

const todoTitle = document.querySelector("#todoTitle");
const todoContent = document.querySelector("#todoContent");
const addBtn = document.querySelector("#addBtn");

2. 할 일 추가하기 버튼 클릭 시 동작 추가하기

ajax-main.js

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

3. 비동기로 할 일 추가하는 fetch() 코드 작성

• 요청 주소 : "/ajax/add"
• 데이터 전달 방식(method) : "POST" 방식

3-1. 넘겨줘야하는 값이 2개라서 넘겨줄 파라미터를 저장할 JS 객체 만들기

Key : Value 형식

    const param = {
        "todoTitle" : todoTitle.value,
        "todoContent" : todoContent.value
    };

JS 객체는 java 에서 쓸 수 없음
그대로 이용할 수 없기 때문에 중간 과정 필요함
java 와 JS 둘 다 쓸 수 있는 JSON 이용할 거임

JS --JSON--> java

3-2. JS 객체 -> JSON 으로 바꿔주기

    fetch("/ajax/add", {
        // key : value
        // 옵션에 대한 key value 형태로 작성
        method : "POST", // POST 방식 요청
        headers : {"Content-Type" : "application/json"}, // 요청 데이터 json 형태로 변환해서 보내겠다.
        body : JSON.stringify(param) // param JS 객체를 JSON 으로 변환해주는 코드
        // JSON 은 Key Value 모두 String 형태
    })

4. Controller 에서 받아주기

AjaxController

JSON 이 파라미터로 전달된 경우 @RequestParam("todoTitle") String todoTitle,
@RequestParam("todoContent") String todoContent 이런 방법으로 얻어오기 불가능

@RequestBody

• 비동기 요청(ajax) 시 전달되는 데이터 중 body 부분에 포함된 요청 데이터를 알맞은 java 객체 타입으로 바인딩하는 어노테이션
  -> 비동기 요청 시 body 에 담긴 값을 알맞은 타입으로 변환해서 매개변수에 저장하는 어노테이션

todoTitle, todoContent 필드명 가지고 있는 Todo DTO 있음
필드명과 JSON 객체 KEY 같으면 value 값을 알아서 Setting 해줌

Spring 에는 HttpMessageConverter 가 있음
Spring 에서 비동기 통신 시
1. 전달되는 데이터의 자료형
2. 응답하는 데이터의 자료형

두 가지를 알맞은 형태로 가공(변환)해주는 객체

• 문자열, 숫자 <-> TEXT
• DTO <-> JSON
• Map <-> JSON

(참고)
HttpMessageConverter 가 동작하기 위해서는
Jackson-data-bind 라이브러리가 필요한데
Spring Boot 모듈에 내장되어 있음
(Jackson : 자바에서 JSON 다루는 방법 제공하는 라이브러리)
-> Spring Legacy 는 직접 추가해줘야함

	@ResponseBody // 비동기 요청 결과로 값 자체를 반환
	@PostMapping("add")
	public int addTodo(@RequestBody Todo todo) { // 요청 body 에 담긴 값을 Todo 에 저장

		return service.addTodo(todo.getTodoTitle(), todo.getTodoContent());
	}

Tip. Todo 처럼 마땅한 DTO 없을 때는 Map<Stirng, Object> 이런 식으로 받으면 됨

5. ServiceImpl 에서 mapper 호출 sql 수행 후 다시 Controller로 돌아와서 값 반환

6. js 에서 값 받아주기

    .then(resp => resp.text()) // 반환된 값을 text로 변환
    .then(result => {
        // 첫번째 then 에서 반환된 값 중 변환된 text를 result에 저장

        if(result > 0) { // 성공
            alert("추가 성공");

            // 추가 성공한 제목, 내용 지우기
            // 비동기 요청이라서 새로고침 안됨
            todoTitle.value = "";
            todoContent.value = "";

            // 할 일이 추가되었기 때문에 전체 Todo 개수 다시 조회
            getTotalCount();

            // 할 일 목록 다시 조회
            selectTodoList();
        } else { // 실패
            alert("추가 실패");
        }
    });
});