자바 → 인텔리J (서버) 코드 모음
package com.example.myserver;
import lombok.AllArgsConstructor;
import lombok.Data;
@AllArgsConstructor
@Data
public class ApiUtil<T> {
private int status;
private String msg;
private T body;
}응답할 때마다 body 데이터가 달라질 수 있어서 제네릭으로 받음
package com.example.myserver;
import lombok.AllArgsConstructor;
import lombok.Data;
@AllArgsConstructor
@Data
public class User {
private int id;
private String username;
private String password;
private String email;
}
package com.example.myserver;
import org.springframework.web.bind.annotation.*;
import java.util.Arrays;
import java.util.List;
@CrossOrigin
@RestController
public class HelloController {
@GetMapping("/user")
public ApiUtil<?> getUserOne(){ //와일드 카드 타입
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
throw new RuntimeException(e);
}
User user = new User(1, "ssar", "1234", "ssar@nate.com");
return new ApiUtil<>(200, "성공", user);
}
}ApiUtil<?> 에서 <?> = 와일드 카드 타입
return할 때, 모든 타입이 들어갈 수 있다
json 데이터로 CSR 해보자
//json 데이터
자바 스크립트로 통신 요청(클라이언트)을 해서
getBoard()의 json 데이터를 땡겨내려받아서 CSR을 할 것이다
삭제 요청 또한 CSR으로 진행 할 것!! 다운 받는 게 아니라!자바 스크립트 → vs Code (클라이언트) 코드 (jQuery 사용) → 필기x
[ 완성 코드 ] ✓
json만 다운 받아서 한 CSR 완성 코드 → 이렇게 프로그램을 짜면 서버 부하 DOWN +) 삭제할 때는 그냥 클라이언트 사이드 랜더링을 하면 되는게 아니라 AJAX 삭제 요청을 해야한다!
html을 한꺼번에 받아서 뿌리는게 아니라, 서버에서는 빈박스와 자바 스크립트 코드만 받음 어? 자바 스크립트네? -> 통신해서 json을 다운 받는다. -> 이 json으로 CSR을 하는 것!
CSR에서 id 중요하다고 했음 → id에 걸지 말고 onClick에 걸자
이게 바로 AJAX… 클라이언트 사이드 랜더링… 맛만 봐라
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Document</title>
<style>
.container {
margin: 0 auto;
width: 80%;
border: 1px solid black;
padding: 20px;
}
.board-item {
border: 1px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<div class="container" id="box">
</div>
<script>
$.get("http://localhost:8080/board", (response) => {
let apiUtil = response;
console.log(apiUtil);
apiUtil.body.forEach(board => {
let design = `<div class="board-item" id="board-${board.id}">
번호: ${board.id}, 제목: ${board.title}
<button onclick="del(${board.id})">삭제</button>
</div>`;
$("#box").append(design);
});
});
function del(boardId) {
$.ajax({
type: "delete",
url: `http://localhost:8080/board/${boardId}`
}).done((response) => {
console.log(response);
if (response.status != 200) {
alert("삭제 실패");
} else {
$(`#board-${boardId}`).remove();
}
});
}
</script>
</body>
</html>TIP!
id로 값을 삭제하는 것! → 클라이언트 사이드 랜더링
클라이언트 사이드 랜더링 → 부분 리로드를 할 수 있는게 핵심!
전체 페이지를 바꿔버리지 않고, 내가 원하는 부분만 바꿔버린다!
Share article
