728x90
반응형
데이터 교환 방식에 대한 정리
안녕하세요! 오늘은 RestController와 컨트롤러에서 데이터 교환 방식, 그리고 비동기 요청 및 데이터 전송 방식에 대해 정리해보겠습니다. 이 글은 개발자들이 실무에서 데이터 전송 방식을 이해하고 효과적으로 활용할 수 있도록 돕기 위해 작성되었습니다.
1. RestController와 Controller에서 데이터 교환 방식
RestController
- 주고받는 데이터 타입: JSON
- 설명: @RestController는 주로 RESTful 웹 서비스를 만들 때 사용됩니다. 이 경우, 클라이언트와 서버 간의 데이터 교환은 JSON 형식으로 이루어집니다. 클라이언트가 요청을 보내면, 서버는 JSON 형식으로 응답을 반환합니다.
@RestController
@RequestMapping("/api")
public class ApiController {
@GetMapping("/data")
public ResponseEntity<MyDto> getData() {
MyDto data = new MyDto("example", 123);
return ResponseEntity.ok(data);
}
}- 주고받는 데이터 타입: 객체
- 설명: @Controller는 주로 웹 페이지를 렌더링할 때 사용됩니다. 이 경우, 서버는 객체를 뷰(View)로 전달하고, 뷰는 이를 사용하여 HTML 페이지를 생성합니다. 데이터를 주고받을 때는 주로 DTO(Data Transfer Object)를 사용합니다.
@Controller
@RequestMapping("/view")
public class ViewController {
@GetMapping("/page")
public String getPage(Model model) {
MyDto data = new MyDto("example", 123);
model.addAttribute("data", data);
return "examplePage";
}
}
2. Axios를 사용한 비동기 요청
데이터 전송 방식
- 전송 데이터 타입: JSON
- 수신 데이터 타입: JSON
설명
Axios를 사용하면 비동기적으로 데이터를 주고받을 수 있습니다. 기본적으로 JSON 형식을 사용하지만, 요청 헤더를 설정하여 다른 형식으로도 데이터를 전송할 수 있습니다.
// Axios GET 요청 예제
axios.get('/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
// Axios POST 요청 예제
axios.post('/api/data', {
key: 'value'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});3. 페이지 간 데이터 전송
설명
타임리프(Thymeleaf)를 사용하면 서버에서 객체를 뷰로 전달할 수 있습니다. 이러한 객체는 타임리프 템플릿에서 접근 가능하며, 뷰에서 다양한 방법으로 데이터를 표시할 수 있습니다.
@Controller
@RequestMapping("/view")
public class ViewController {
@GetMapping("/anotherPage")
public String getAnotherPage(Model model) {
MyDto data = new MyDto("example", 123);
model.addAttribute("data", data);
return "anotherPage";
}
}<!-- anotherPage.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Example Page</title>
</head>
<body>
<div th:text="${data.name}"></div>
<div th:text="${data.value}"></div>
</body>
</html>4. 파이썬 FastAPI와 HTML 간의 데이터 교환
설명
FastAPI는 주로 JSON 형식으로 데이터를 주고받습니다. FastAPI의 엔드포인트는 클라이언트로부터 JSON 데이터를 받고, JSON 데이터로 응답을 반환합니다. HTML 페이지와의 통신에서는 객체 타입을 사용할 수 있습니다.
from fastapi import FastAPI
from pydantic import BaseModel
from fastapi.responses import JSONResponse
app = FastAPI()
class MyDto(BaseModel):
name: str
value: int
@app.get("/api/data", response_model=MyDto)
def get_data():
data = MyDto(name="example", value=123)
return JSONResponse(content=data.dict())5. JSON 데이터를 HTML에서 사용하는 방법
설명
스프링부트 컨트롤러나 FastAPI에서 HTML로 JSON 데이터를 전송할 때, HTML에서는 해당 JSON 데이터를 파싱하여 사용할 수 있습니다. 일반적으로 JavaScript를 사용하여 JSON 데이터를 처리합니다.
<!-- example.html -->
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
<script>
function loadData() {
fetch('/api/data')
.then(response => response.json())
.then(data => {
document.getElementById('name').innerText = data.name;
document.getElementById('value').innerText = data.value;
})
.catch(error => console.error('Error:', error));
}
window.onload = loadData;
</script>
</head>
<body>
<div id="name"></div>
<div id="value"></div>
</body>
</html>이제 각 항목을 요약해보겠습니다.
- RestController: JSON 형식으로 데이터를 주고받습니다.
- Controller: 객체 형식으로 데이터를 주고받으며, 주로 뷰에서 사용됩니다.
- Axios 비동기 요청: 주로 JSON 형식을 사용하여 데이터를 주고받습니다.
- 타임리프 페이지 전송: 서버에서 객체를 뷰로 전달하여 뷰에서 데이터를 표시합니다.
- FastAPI와 데이터 교환: JSON 형식으로 데이터를 주고받으며, HTML에서 JavaScript를 사용하여 JSON 데이터를 처리합니다.
이 블로그 포스트가 데이터 교환 방식을 이해하는 데 도움이 되셨기를 바랍니다. 더 궁금한 점이 있으면 언제든지 질문해주세요!
'프로젝트 > Springboot_MariaDB' 카테고리의 다른 글
| [AWS] 웹 호스팅을 위한 프론트엔드와 백엔드 분리 개발 방법 (0) | 2024.07.02 |
|---|---|
| [AWS] 우분투 서버에 파이썬 유비콘(uvicorn) 서버 띄우기 (0) | 2024.06.29 |
| [AWS_Ubuntu] 우분투에서 Matplotlib 한글 폰트 설정하기 (0) | 2024.06.27 |
| [AWS] 무료 한국 도메인 등록 및 설정 방법 (0) | 2024.06.27 |
| [AWS] Nginx와 Certbot을 사용하여 HTTPS 설정하기 (0) | 2024.06.27 |
댓글