티스토리 뷰
2024.05.20 _ [개념정리] JSP(View)와 Controller의 소통 , JSON과 JavaScript의 사용 시기 , 일반 Controller 와 RESTController의 차이
Ji@n 2024. 5. 20. 18:09
Q. JSP(View)와 Controller의 소통
A. 보통 두 가지 방식으로 소통한다.
a. Form Submission
b. AJAX 요청
a. Form Submission
(JSP - > Controller )
JSP에서의 <form>은 주로 POST 방식으로 데이터를 서버에 보낼 때 사용된다.
주로 사용자가 입력한 데이터를 서버로 보내거나, 서버에 요청을 전달하고자 할 때 사용된다.
예시)
jsp -> 이 폼이 제출되면 'update' 라는 URL로 POST 요청이 보내진다. 이 URL에 매핑된 Controller 메서드가
요청을 처리한다.
<form action="update" method="post">
<input type="hidden" id="deliveryId" name="deliveryId" value="${delivery.deliveryId}">
<button type="submit">수정</button>
</form>
Controller -> delivery 객체로 폼 데이터가 바인딩됩니다. 업데이트 후 배송지 목록 페이지로 리디렉션
@Controller
public class DeliveryController {
@PostMapping("/update")
public String updateDelivery(@ModelAttribute Delivery delivery) {
// delivery 객체로 폼 데이터가 바인딩됩니다.
deliveryService.updateDelivery(delivery);
return "redirect:/deliveryList"; // 업데이트 후 배송지 목록 페이지로 리디렉션
}
}
b. AJAX 요청
((JSP < - Controller) or (JSP - > Controller ))
JavaScript 를 사용하여 Ajax 요청을 보내는 경우,
주로 비동기 방식(= 페이지를 새로고침하지 않고 )으로 데이터를 요청하고 응답을 받는다.
이 경우 주로 GET or POST 방식으로 요청을 보낸다.
예를 들어 삭제 버튼을 클릭할 때 AJAX 요청을 할 수 있다.
예시)
JavaScript ->
$("#deleteButton").click(function() {
var deliveryId = $("#deliveryId").val();
$.ajax({
url: "delete",
type: "POST",
data: { deliveryId: deliveryId },
success: function(data) {
location.reload(); // 성공 시 페이지 새로고침
},
error: function(xhr, status, error) {
console.error("배송지 삭제 실패:", error);
}
});
});
Controller ->
@RestController
public class DeliveryController {
@PostMapping("/delete")
public ResponseEntity<String> deleteDelivery(@RequestParam("deliveryId") int deliveryId) {
deliveryService.deleteDelivery(deliveryId);
return ResponseEntity.ok("삭제 성공");
}
}
Q. JSON과 JavaScript의 사용 시기
A.
a. JSON(JavaSript Object Notation) : 데이터 교환 포맷. 특히 AJAX 요청과 같은 비동기 통신에서 많이 사용
b. JavaScript : 사용자 인터페이스와의 상호 작용(동적) , 비동기 통신(AJAX) , DOM 조작(HTML 문서 요서를 동적 조작)
DOM (Document Object Model ) : 문서 구조를 표현하는 API, HTML 및 XML 문서의 요소를 트리 구조로 표현한다. JavaScript를 사용하여 DOM에 접근하고 수정할 수 있으며,
이를 통해 웹 페이지의 내용, 구조 및 스타일을 변결할 수 있다.
a. JSON(JavaSript Object Notation)
서버와 클라이언트 간에 데이터를 주고받을 때 주고 사용.
특히 AJAX 요청과 같은 비동기 통신에서 많이 사용된다
키-값 쌍의 집합
사용하는 이유 :
1. 간결하고 가독성이 좋음
2. 다양한 플랫폼과 언어에서 지원
3. 웹 애플리케이션 간의 소통 : 클라이언트 측 JavaScript에서 JSON을 사용하여 서버로 데이터를
보내거나, 서버에서 클라이언트로 데이터를 전달할 수 있다.
4. AJAX 요청과 함께 사용 : 대부분은의 AJAX 요청은 서버로부터 받은 데이터를 JSON 형식으로
수신하거나, JSON 형식으로 서버에 데이터를 보낸다.
JSON과 JavaScript 의 관계 :
JSON은 JavaScript 객체와 유사하지만, JavaScript와 완전히 독립적인 형식이다.
즉, JSON은 다른 언어에서도 사용할 수 있다.
JSON은 JavaScript의 특성 중 하나지만, JavaScript와 JSON은 서로 다른 개념이다.
예시 )
AJAX 요청에 대한 응답으로 JSON을 반환할 수 있다.
// AJAX 요청
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true); // 서버로부터 데이터를 요청
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// JSON 응답 파싱
var response = JSON.parse(xhr.responseText); // 응답 받은 JSON 데이터를 파싱하여 출력
console.log(response); // JSON 데이터 출력
}
};
xhr.send();
b. JavaScript
클라이언트 사이드 스크립트 언어.
브라우저에서 동작하며,
1. 사용자 인터페이스와의 상호 작용(동적) - 버튼 클릭/폼 제출
2. 비동기 통신 - AJAX 사용해 서버에 HTTP 요청을 보내고 서버로 부터 응답을 받아와서 웹 페이지를 업데이트
3. DOM 조작 - HTML 문서 요서를 동적으로 조작가능 - 웹 페이지 내용, 스타일, 구조 변경 및 추가
등을 처리한다.
예시 )
클라이언트 측에서 데이터를 처리하고, UI 업데이트를 수행한다.
예를 들어, 서버로 부터 JSON을 응답을 받은 후,
JavaScript로 DOM을 업데이트 한다.
// 예시 JSON 응답 데이터
var jsonData = {
"name": "John",
"age": 30,
"city": "New York"
};// DOM 업데이트 함수
function updateUI(data) {
// UI 업데이트
document.getElementById("name").textContent = data.name;
document.getElementById("age").textContent = data.age;
document.getElementById("city").textContent = data.city;
}
// UI 업데이트 함수 호출
updateUI(jsonData);
DOM (Document Object Model )
예시)
<!DOCTYPE html>
<html>
<head>
<title>DOM 예시</title>
</head>
<body>
<div id="myDiv">
<p>Hello, World!</p>
</div>
<script>
// DOM 요소 선택하고 내용 변경하기
var divElement = document.getElementById("myDiv");
divElement.innerHTML = "<p>New content</p>";
// 새로운 요소 생성하고 DOM에 추가하기
var newElement = document.createElement("p");
newElement.textContent = "Added dynamically";
divElement.appendChild(newElement);
</script>
</body>
</html>
Q. 일반 Controller 와 RESTController의 차이
A.
a. 일반 Controller(@Controller) : 주로 웹 페이지를 반환한다. (View(jsp 등) 를 반환)
b. RESTController(@RESTController) : JSON, XMl 등의 데이터를 반환
a. 일반 Controller(@Controller)
주로 웹 페이지를 반환한다. (View(jsp 등) 를 반환) ,
메서드는 일반적으로 String을 반환하며, 이 String 은 jsp의 이름을 의미한다
주로 동기적으로 작동하며, 사용자의 요청에 따라 화면을 동적으로 업데이트
예시)
"hello" jsp로 반환
@Controller
public class MyController {
@GetMapping("/hello")
public String hello(Model model) {
model.addAttribute("message", "Hello, World!");
return "hello"; // hello.jsp로 포워드
}
}
b. RESTController(@RESTController)
JSON, XMl 등의 데이터를 반환 ,
메서드는 일반적으로 객체를 반환하며 , 이 객체는 JSON 또는 XML로 변환되어 클라이언트에 전달된다.
RESTful 웹 서비스를 구축하기 위해 사용된다. 비동기방식.
RESTAPI(Representational State Transfer) :
RESTful 서비스를 구현한 API.
REST API는 HTTP를 통해 자원을 생성, 읽기, 수정, 삭제하기 위한 표준화된 방법을 제공한다.
참고 :
2024.05.22 - [5월] - REST API, RESTful 아키텍쳐 , REST Controller 정리
비동기 방식 :
요청과 응답이 동시에 일어나지 않는 방식을 말한다.
클라이언트가 요청을 보내면 서버는 해당 요청에 대한 응답을 즉시 반환하지 않고, 나중에 응답을 반환할
때까지 대기하지 않고 다른 작업을 계속할 수 있다.
예시)
ResponseEntity<String> = 객체 반환 ,
ResponseEntity.ok("Hello, World!"); = JSON or XML 로 변환되어 전달
@RestController
public class MyRestController {
@GetMapping("/api/hello")
public ResponseEntity<String> hello() {
return ResponseEntity.ok("Hello, World!");
}
}
오늘의 요약
* View - Controller 의 소통 - Form 제출과 AJAX 요청을 통해 이루어진다
* JSON - JavaScript 의 사용 - JSON은 데이터 교환 포맷이고, JavaScript는 클라이언트 사이드 로직 처리
* 일반 Controller VS RESTController - 일반 Controller는 View를 반환, RESTController는 데이터를 반환
'백엔드 교육과정 > 5월' 카테고리의 다른 글
| Controller 에서 ResponseEntity를 사용하는 경우 / 사용법 (0) | 2024.05.22 |
|---|---|
| REST API, RESTful 아키텍쳐 , REST Controller 정리 (0) | 2024.05.22 |
| 2024.05.08 _ [git-bush] fatal: refusing to merge unrelated histories 오류 (git pull/ push 팀프로젝트) (0) | 2024.05.08 |
| 2024.05.07 _ [SQL Developer] 제약 조건이 있는 테이블 삭제하기 (0) | 2024.05.07 |
| 2024.05.03 _ [Spring]java.sql.SQLSyntaxErrorException: ORA-00911: invalid character 에러 해결 (0) | 2024.05.03 |