🌱 Spring Boot 9 — MVC 패턴, Thymeleaf, 그리고 SSR & CSR 이해하기

날짜:2025-10-22

---

학습 목표

• MVC 패턴의 기본 개념(Model, View, Controller)과 역할을 이해한다.
• Thymeleaf 템플릿 엔진을 소개한다.
• SSR(Server Side Rendering)과 CSR(Client Side Rendering)의 차이를 이해한다.

---

✅ 서블릿 구조의 한계

1.낮은 응집도 (Low Cohesion)

• 하나의 클래스 안에 요청 처리, 비즈니스 로직, 응답 생성이 모두 들어있습니다.
• 즉, 한 클래스가 너무 많은 일을 하게 되어 유지보수와 테스트가 어렵습니다.

2.높은 결합도 (High Coupling)

• 비즈니스 로직이 HttpServletRequest, HttpServletResponse 같은 서블릿 API에 의존합니다.
• 이런 구조는 단위 테스트를 하거나 웹 이외 환경에서 재사용하기 힘듭니다.

3.반복적인 보일러플레이트 코드 (Boilerplate)

• 매번 파라미터 파싱, 응답 타입 설정, JSON 변환 등을 직접 해야 합니다.

---

✅ MVC 패턴

MVC 패턴

• 하나의 서블릿이 모든 일을 처리하던 문제를 해결하기 위해 코드를 역할별로 분리한 설계 방식입니다.

구성요소	역할
Model	데이터와 비즈니스 로직 담당 (예: 영화 데이터, 추천 로직)
View	사용자에게 보여지는 화면(UI) 담당 (예: HTML, Thymeleaf 템플릿)
Controller	요청을 받아 Model과 View를 연결하는 중간 다리 역할

이렇게 역할을 분리(Separation of Concerns) 하면
코드가 훨씬 깔끔해지고, 유지보수성과 테스트 효율이 크게 올라갑니다.

---

Controller

• 클라이언트의 HTTP 요청을 받아 처리합니다.

• 어떤 URL이 어떤 메서드로 연결될지 결정합니다.

• 비즈니스 로직을 호출하고, 데이터를 Model에 담은 뒤 View 이름을 반환합니다.

  ---

Model

• Controller에서 View로 데이터를 전달할 때 사용하는 객체입니다.
• Key-Value 형태로 데이터를 저장합니다.
  -💡 Model에 담긴 데이터는 View(HTML)에서 ${title}로 참조할 수 있습니다.

---

View

• 사용자에게 보여지는 화면(UI)을 담당합니다.
• Controller가 반환한 View 이름을 ViewResolver가 실제 파일과 매핑합니다.
• Thymeleaf 같은 템플릿 엔진이 이 역할을 수행합니다.

---

✅ Thymeleaf란?

Thymeleaf(타임리프)

• 서버에서 HTML을 동적으로 생성해주는 자바 기반 템플릿 엔진입니다.
  -즉, Controller에서 전달한 데이터를 HTML 코드에 자동으로 반영해줍니다.

---

✅ Thymeleaf의 주요 특징

• HTML 파일 안에서 변수 표현 (${}) 가능
• 순수 HTML로도 미리 화면 확인 가능 (개발 편의성 ↑)
• Spring MVC와 완벽하게 통합

---

✅ SSR vs CSR

서버에서 HTML을 만들어주는 Thymeleaf를 배우다 보면
프론트엔드(React, Vue 등)와의 차이가 헷갈릴 수 있습니다.
이 차이를 이해하려면 SSR과 CSR 개념을 알아야 합니다.

---

SSR (Server Side Rendering)

• SSR은 서버에서 완성된 HTML을 만들어 브라우저로 보내는 방식입니다.
• 브라우저는 받은 HTML을 그대로 렌더링하므로 초기 로딩이 빠르고, SEO에도 유리합니다.

💡 Thymeleaf는 SSR 방식의 대표적인 예입니다.

• 즉, 서버에서 모든 데이터를 채워 넣은 HTML을 통째로 클라이언트에게 전달합니다.

---

CSR (Client Side Rendering)

• CSR은 서버가 비어있는 HTML 뼈대와 자바스크립트 파일만 전달하는 방식입니다.
• 브라우저(클라이언트)가 자바스크립트를 실행해 필요한 데이터를 가져오고, 그 자리에서 직접 HTML을 조립해 화면을 그립니다.
  💡 React, Vue, Svelte 등 최신 프론트엔드 프레임워크들이 이 방식을 사용합니다.

장점: 앱처럼 빠른 화면 전환

단점: 초기 로딩이 느리고, SEO에 불리함

---

정리

구분	SSR	CSR
처리 위치	서버	클라이언트
대표 기술	Thymeleaf, JSP	React, Vue
초기 속도	빠름	느림
화면 전환	새로고침 발생	부드러운 전환
SEO	유리	불리