요구사항 개요
기존의 김영한님의 JPA강의에서는 Order기능을 할 때 단건으로만 됐었고 강의를 마치면서
다중 주문 기능을 각자 넣어보라고 말씀하셨다.
그 말을 듣고 한번 다중 주문기능을 추가해보았는데.. JSON뻘짓으로 생각보다 오랜 시간이 걸렸다.
내가 생각한 설계 목표
-
Submit 버튼을 클릭했을 때, Submit이 되기 때문에 한 개의 버튼을 추가하여 장바구니처럼 담기 기능이 되도록 생각
-
장바구니에 담은 후 담은 데이터들이 JSON형태로 전달되어 Controller단에서 받을 때 List< DTO >형태로 받는것을 구현
-
List< DTO > 형태의 데이터를 반복문을 통해 em.persist하여 등록하도록 구현
구현 과정에서의 문제
Order가 다건으로 진행될 때 우선 JSON형태로 Controller단에 전달하는 것이 좋은 방법이라 판단되었고, json으로 전달하기 위해 비동기 통신 방식인 (ajax, fetch)방식을 사용하기로 결정
문제 1
-> ajax는$.ajax is not function에러가 계속해서 script링크를 통해 jquery를 인식을 못하였다.. ajax를 많이 써봤지만 일반적으로는 cdn을 추가해서 쓰면 간단하게 ajax통신이 가능했는데 계속해서 인식하지 못하는 문제가 발생하였다.
cf) 구글상에서는 jquery slim 버전을 쓰지 않으면 된다고 해서 확인해봤는데 이미 나는 slim버전이 아니었고 다른 문제로 판단되었다.
그렇다면 다른 대안으로 fetch방식을 사용하였다.
문제 2
우선 form의 data들을 받아와 js에서 serialize함수와 serializeArray함수를 사용하여 json형태로 반환하였다.
나중에 알게되었지만 serialize의 직렬화가 내가 원하는 DTO단위의 JSON으로 파싱되지 않았다.
예를들자면 form의 데이터가 itemId, memberId, count라는 컬럼이 존재했을 때, form.serialize를 했을 때
[[{itemId : 1 },{ memberId : 1 },{ count : 5 } , [{itemId : 3} , {memberId : 4}, {count : 10}]] 와 같이 3차원 배열의 형태로 직렬화가 되었고 이런형태로 controller에 전달을 했을 때 Parameter가 DTO형태로 받아들이지 못하는 큰 문제가 생겼다.
1차적으로 고안한 방법은 parameter를 String으로 받은 후 JSONObject생성자를 통해 받아들인 String을 다시 짤라서 DTO에 넣으려고 했지만 다건인 List형태의 Order를 제대로 잘라내지 못하였다.
해결
결국 여러가지 방법을 생각해보다가 다시 원초적인 부분부터 생각해보니 JSON자체가 3차원형태로 오면 List< Order >를 하더라도 인식을 못할것이라고 머릿속을 스쳐지나갔다.
그래서
[{itemId : 1 , memberId : 1, count : 5},{itemId :3 , memberId : 4, count : 10}]의 형태로 js에서 직렬화를 하였다.
이후 JSON.stringify(배열)을 하여 Controller에 전달하니 Parameter @RequestBody에서 List< Order >로 받으니 알아서 매핑하여 성공적으로 결과가 나오게 됐다.
역시 생각이 막히고 에러를 해결하는 법을 전혀모를때에는 조금 쉬고 오히려 처음으로 돌아가 간단하게 생각하면 된다는 것을 깨닫게 되었다.
처음 JS에서의 직렬화코드
var dataToObjectArray = new Array();
var dataToString = $("form").serialize();
var dataToObject = $("form").serializeArray();
dataToObjectArray.push(dataToObject);
해결한 JS에서의 직렬화코드
var memberId = document.getElementById('member').value;
var itemId = document.getElementById('item').value;
var count = document.getElementById('count').value;
dataToObjectArray.push({
memberId : document.getElementById('member').value,
itemId : document.getElementById('item').value,
count : document.getElementById('count').value
});
fetch('/order', {
method: "POST",
headers: {
"content-type": "application/json",
},
body: JSON.stringify(dataToObjectArray),
})
.then((data) => console.log(data))