Spring에서 클라이언트(웹 브라우저, 모바일 앱, 프론트엔드 등)와 서버 간의 데이터 통신 방식에는 정적 방식, MVC+템플릿 엔진 방식, API 방식이 있습니다.
각각의 개념, 동작 원리, 차이점, 흐름도, 장단점을 설명하고, 특히 API 방식에서는 HttpMessageConverter의 역할을 포함한 동작 흐름을 자세히 다루겠습니다.
📌 1️⃣ 정적 방식 (Static Content)
📌 정의
정적 방식은 서버가 HTML, CSS, JavaScript, 이미지 등의 파일을 그대로 제공하는 방식입니다.
서버에서 별도의 동적 처리가 필요하지 않으며, 파일을 요청하면 그대로 클라이언트(브라우저)에게 반환합니다.
✅ 동작 흐름
📌 정적 파일이 로드되는 과정
- 사용자가 브라우저에서 정적 리소스 요청
- (예: GET http://localhost:8080/static/index.html)
- Spring Boot의 내장 ResourceHttpRequestHandler가 요청을 처리
- /static, /public, /resources 등의 경로에서 해당 파일을 찾음
- 찾은 정적 파일을 클라이언트에게 응답
✅ 예제
📌 Spring Boot 프로젝트 구조
├── static/ (정적 파일 저장소)
│ ├── index.html
│ ├── styles.css
│ ├── script.js
│ └── images/logo.png
📌 정적 HTML 파일 (index.html)
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>정적 방식 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Spring 정적 방식</h1>
<script src="script.js"></script>
</body>
</html>
✅ 흐름도
GET /static/index.html → [index.html 반환]
✅ 특징 및 비교
항목정적 방식
| 동작 방식 | 서버에서 HTML, CSS, JS 파일을 직접 제공 |
| 서버 역할 | 단순 파일 제공 |
| 사용 사례 | 정적인 웹사이트, CDN, 이미지 서버 |
| 장점 | 빠른 응답 속도, 구현 간단 |
| 단점 | 동적 데이터 처리 불가 (사용자 맞춤 불가) |
📌 2️⃣ MVC + 템플릿 엔진 방식
📌 정의
MVC 패턴과 템플릿 엔진(Thymeleaf, JSP 등)을 활용하여 서버에서 HTML을 동적으로 생성하는 방식입니다.
컨트롤러에서 데이터를 가공한 후 HTML을 생성하여 클라이언트에 전달합니다.
✅ 동작 흐름
📌 MVC + 템플릿 엔진 방식의 요청 처리 과정
- 사용자가 웹 브라우저에서 동적 페이지 요청
- (예: GET http://localhost:8080/hello)
- Spring MVC의 Controller가 요청을 받아 데이터 가공
- Model 객체를 통해 데이터를 템플릿 엔진(Thymeleaf, JSP)에 전달
- 렌더링된 HTML을 응답으로 반환
- 브라우저가 HTML을 표시
✅ 예제
📌 Controller (HelloController.java)
public class HelloController {
@GetMapping("/hello")
public String hello(Model model) {
model.addAttribute("message", "Spring MVC + 템플릿 엔진 예제");
return "hello"; // templates/hello.html 렌더링
}
}
📌 Thymeleaf 템플릿 (src/main/resources/templates/hello.html)
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>MVC 방식 예제</title>
</head>
<body>
<h1>Spring MVC + 템플릿 엔진</h1>
<p>서버에서 전달된 데이터: <span th:text="${message}"></span></p>
</body>
</html>
✅ 흐름도
GET /hello → Controller → Model & View → Thymeleaf → HTML 반환
✅ 특징 및 비교
항목MVC + 템플릿 엔진
| 동작 방식 | 서버에서 동적인 HTML을 생성하여 반환 |
| 서버 역할 | 데이터 가공 및 HTML 렌더링 |
| 사용 사례 | 블로그, 게시판, 관리자 페이지 |
| 장점 | 클라이언트가 별도의 데이터 가공 없이 HTML을 표시 가능 |
| 단점 | 서버 부담 증가, 프론트엔드/백엔드 분리 어려움 |
📌 3️⃣ API 방식 (REST API)
📌 정의
서버가 JSON 데이터를 제공하고, 클라이언트(React, Vue, 모바일 앱 등)가 데이터를 받아 UI를 구성하는 방식입니다.
✅ 동작 흐름
📌 REST API 방식의 요청 처리 과정
- 사용자가 웹 또는 앱에서 API 요청
- (예: GET http://localhost:8080/api/hello)
- Controller가 요청을 받아 JSON 데이터를 반환
- 클라이언트가 데이터를 받아 화면을 구성
✅ REST API 예제
📌 REST Controller (HelloApiController.java)
@RequestMapping("/api")
public class HelloApiController {
@GetMapping("/hello")
public Map<String, String> hello() {
return Map.of("message", "Spring REST API 예제");
}
}
📌 응답(JSON)
"message": "Spring REST API 예제"
}
📌 프론트엔드(React)에서 API 호출 예제
.then(response => response.json())
.then(data => console.log(data.message)); // 출력: Spring REST API 예제
✅ HttpMessageConverter의 역할
HttpMessageConverter는 요청(Request) 및 응답(Response)의 데이터를 변환하는 역할을 함
Java 객체 ↔ JSON 직렬화/역직렬화 자동 변환 수행
📌 HttpMessageConverter 동작 흐름
Spring 컨트롤러 (Java 객체 응답) → HttpMessageConverter → JSON 변환 → 클라이언트
✅ 특징 및 비교
항목API 방식 (REST API)
| 동작 방식 | 서버는 JSON 데이터를 제공, 클라이언트가 렌더링 |
| 서버 역할 | 데이터 처리 및 응답 |
| 사용 사례 | 모바일 앱, SPA (React, Vue) |
| 장점 | 프론트엔드/백엔드 분리 가능 |
| 단점 | 클라이언트가 데이터 가공해야 하므로 복잡성 증가 |
📌 최종 비교
방식서버 역할클라이언트 역할주요 사용 사례
| 정적 방식 | HTML, CSS, JS 파일 제공 | 브라우저가 직접 렌더링 | 정적인 웹사이트 |
| MVC + 템플릿 엔진 | HTML을 동적으로 생성하여 제공 | 브라우저가 HTML 표시 | 블로그, 게시판 |
| API 방식 (REST API) | JSON 데이터를 제공 | 프론트엔드(React, Vue)가 렌더링 | 모바일 앱, SPA |