Thymeleaf가 없었다면 hard 코딩을 통해 데이터를 옮겨야 합니다. 하지만 Thymeleaf와 함께라면 시간을 더 단축시킬 수 있습니다.
왜 그런지 알아보러 가겠습니다.
1. List 값 hard 코딩 해보기
@GetMapping("/findAllProductList")
@ResponseBody
public List<ProductVO> findAllProductList(){
List<ProductVO> list=new ArrayList<>();
list.add(new ProductVO(1,"테라","하이트진로",1540));
list.add(new ProductVO(2,"클라우드","롯데",1740));
list.add(new ProductVO(3,"카스","두산",1600));
return list;// @ResponseBody에 의해 JSONArray 로 응답한다
}@ResponseBody를 작성해야 JSON 타입으로 데이터가 보내집니다.
이렇게 return에 list를 보내주면 JSON 타입으로 List 값이 보내지게 됩니다.
그렇다면 이 데이터를 table 값으로 보내주려고 하는데.... 어떻게 작성해야 하는지 알아보겠습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>step11-ajax</title>
</head>
<body>
<div class="container pt-4">
<button id="listBtn">상품리스트</button>
<br><br>
<table class="table table-bordered">
<thead>
<tr>
<th>NO</th>
<th>NAME</th>
<th>MAKER</th>
<th>PRICE</th>
</tr>
</thead>
<tbody id="productList">
</tbody>
</table>
</div>
<script type="text/javascript">
$(function(){
$("#listBtn").click(function(){
$.ajax({
type:"get",
url:"findAllProductList",
success:function(productList){
//alert(productList.length);
let productInfo="";
for(let i=0;i<productList.length;i++){
productInfo+="<tr>";
productInfo+="<td>"+productList[i].id+"</td>";
productInfo+="<td>"+productList[i].name+"</td>";
productInfo+="<td>"+productList[i].maker+"</td>";
productInfo+="<td>"+productList[i].price+"</td>";
productInfo+="</tr>";
}
$("#productList").html(productInfo);
}
});//ajax
});//click
});//ready
</script>
</body>
</html>버튼을 누르면 상품의 리스트가 불러와지는 ajax 방식입니다.
보시면 결과 값으로 productList를 받아오고 저 값을 for문을 통해서 하나하나 표를 넣어줍니다.
product의 값이 5백 가지가 있으면 여러분은 저거를 5백 번을 치고 있어야 합니다.
최악의 상황을 피하기 위해 thymeleaf의 문법을 사용하러 가보시죠.
2. Thymeleaf로 ajax 통신하기
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>step11-ajax</title>
</head>
<body>
<div class="container pt-4">
<button id="listBtn">상품리스트</button>
<br><br>
<table class="table table-bordered">
<thead>
<tr>
<th>NO</th>
<th>NAME</th>
<th>MAKER</th>
<th>PRICE</th>
</tr>
</thead>
<tbody id="productTbody">
<tr th:each="product:${productList}">
<td th:text="${product.id}"></td>
<td th:text="${product.name}"></td>
<td th:text="${product.maker}"></td>
<td th:text="${product.price}"></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(function(){
$("#listBtn").click(function(){
$.ajax({
type:"get",
url:"findAllProductList2",
success:function(productList){
$("#productTbody").replaceWith(productList);
}
});//ajax
});//click
});//ready
</script>
</body>
</html>이번에는 ajax 통신을 하고 테이블을 replaceWith 메서드를 이용해서 집어넣고 있고,
위에 tr, td 태그에 th:text 문법을 작성하여 값을 넣어주고 있는 모습입니다.
그렇다면 json 값으로 tr, td 태그 값을 가져온다는 이야기인데... 어떠한 값을 받아오고 있는지 궁금하죠?
그래서 제가 console.log를 찍어봤습니다.
ajax 결과 값인 productList의 값입니다.
이렇게 오기 때문에 replace가 가능했던 것이군요!
그렇다면 어떻게 응답을 보냈길래 이러한 값이 나오는지 알아보러 가보겠습니다.
@GetMapping("findAllProductList2")
public String findAllProductList2(Model model){
List<ProductVO> list=new ArrayList<>();
list.add(new ProductVO(1,"테라","하이트진로",1540));
list.add(new ProductVO(2,"클라우드","롯데",1740));
list.add(new ProductVO(3,"카스","두산",1600));
model.addAttribute("productList", list);
return "step12-ajax::#productTbody";
}return 값을 보시면 list 값을 보내는 것이 아닌 html 파일에 colon 2개와 값을 넣어줄 태그의 id 값을 넣었고
model 객체에 list를 보내주면서 더욱 간단히 만들어줍니다.
소감
thymeleaf 문법이 처음이지만 매우 흥미롭습니다. 선조들은 대체 어떻게 이러한 것을 만들었는지 대단합니다. 특히 요새 AI를 보면 개발자들은 무슨 생각을 하는지 너무 궁금했습니다.
저도 비상한 생각을 가진 개발자가 되기 위해 더 많은 것을 알고 시야를 넓혀야겠다고 생각했습니다.
