자바 → 인텔리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
