1๏ธโฃ Postman ์ดํ๋ฆฌ์ผ์ด์ ์ ํตํด์ json ํํ๋ก ์ ๋๋ก ๋ ์ ๋ณด๋ค์ด ๋์ด์ค๋์ง ํ์ธ
@GetMapping("/list-json")
@ResponseBody
public List<ToDoList> boardListPagingToJson() {
return toDoListService.findAll();
}http://localhost:8080/todo/list-json ์ GET ๋ฐฉ์์ผ๋ก ํธ์ถ ์ ๋ฐ์ดํฐ ๋ฒ ์ด์ค์์๋ ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ์ ๋ฌํ๋๋กํจ.
์ฌ์ฉํ js ํ์ผ๊ณผ html ํ์ผ์ ์ฐ๊ฒฐํ๋ค. html ์ js ํ์ผ์ ๋ช ์ํด์ค์ผ๋ก์ ๊ฐ๋ฅํ๋ค.
- ์ฌ์ฉํ html ํ์ผ์ ์์ฑ : script ํ๊ทธ๋ฅผ ํตํด js ํ์ผ๊ณผ ์ฐ๊ฒฐ์ํค๊ณ , ์ถํ ์ฝ์ ํ ๋ถ๋ถ์ class ๋ถ๋ถ์ ์ ์ํ์ฌ js ํ์ผ์ด ์ธ์ ๊ฐ๋ฅํ๋๋ก ํ๋ค. ์๋ ์ฝ๋์์๋ <div class = "list"> ๊ฐ ๊ทธ ์ญํ ์ ํ๋ค.
<script defer type="text/javascript" th:src="@{(์ฌ์ฉํ js ํ์ผ ๊ฒฝ๋ก).js}"></script>
(์ค๊ฐ ์๋ต)
<body>
<div class = "list">
<!-- js ํ์ผ์ ํตํด ๋ณด์ฌ์ง ๋ถ๋ถ -->
</div>
</body>js ํ์ผ์์ ์ด์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์จ๋ค console ์ฐฝ์ผ๋ก ํ์ธํ๋ค.
- js ํ์ผ
const list = document.querySelector(".list");
window.onload = () => {
findAll();
}
// ๊ฒ์๋ฌผ ๊ฒ์
function findAll() {
fetch("/todo/list-json")
.then(response => response.json())
.then(data => {
console.log(data);
});
}-> document.querySelector : html ์์์ ํน์ ๋ถ๋ถ๊ณผ ์ฐ๊ฒฐ. (์ ๊ณตํ ์ ํ์ ๋๋ ์ ํ์ ๋ญ์น์ ์ผ์นํ๋ ๋ฌธ์ ๋ด ์ฒซ ๋ฒ์งธ Element๋ฅผ ๋ฐํ)
-> window.onload : ํ๋ฉด์ ๋ถ๋ฌ์ด
js ํ์ผ ์์ ๋ค์๊ณผ ๊ฐ์ด ๋ก์ง์ ์์ฑํ๋ค.
function displayItems(data) {
let html = "";
for(let i = 0; i < data.length; i++) {
if (data[i].type == 'DOING') {
html += `<input type="checkbox">${data[i].content}</input> <br>`;
}
else {
html += `<input type="checkbox" checked>${data[i].content}</input> <br>`;
}
}
list.innerHTML=html;
}๋ง์ง๋ง list.innerHTML ์ ํตํด ์ฐ๊ฒฐํ ๋ถ๋ถ์ ๋ณด์ฌ์ง ๋ด์ฉ๋ค์ ๋ฃ์ด์ฃผ์๋ค.
์๋ฐ ์คํฌ๋ฆฝํธ๋ฅผ ํตํด์ json ํํ๋ก ๊ฐ์ ์ฒ๋ฆฌํ์ฌ ํ๋ฉด์ ๋ฟ๋ฆฌ๋ ๊ณผ์ ๊น์ง ์ฑ๊ณตํ์๋ค. ๋ค์์๋ ์ ๋ง๋ก ๋น๋๊ธฐ๋ก ์๋๋๋์ง ํ์ธํด๋ณด๊ณ ์ ํ๋ค.
'Spring Boot ๐ฟ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| (Spring) Spring Boot DevTools ์ฌ์ฉ๋ฒ (์๋ฒ ์ฌ์คํ ์์ด ์ฝ๋ ์์ ํ์ธ) (0) | 2022.10.06 |
|---|---|
| (Thymeleaf) DB๊ฐ์ผ๋ก๋ถํฐ ์ฒดํฌ๋ฐ์ค ์ฒดํฌ ์ฌ๋ถ ์ ํ (0) | 2022.09.27 |
| (Spring) @PreAuthorize ์ฌ์ฉ๋ฒ (0) | 2022.08.22 |
| (Spring) JPA ์ฌ์ฉ์ Truncate ์๋ฌ ํด๊ฒฐ (0) | 2022.08.11 |
| (Spring) DAO, DTO ๊ทธ๋ฆฌ๊ณ VO (0) | 2022.07.31 |
