서블릿의 문제점
- 낮은 응집도 (Low Cohesion): 하나의 서블릿 클래스 내에 HTTP 요청 처리, 비즈니스 로직, 데이터 접근, 응답 생성 로직이 모두 혼재함. 이는 단일 클래스가 너무 많은 책임을 갖게 하여 코드의 이해와 테스트를 어렵게 만든다.
- 강한 결합도 (High Coupling): 비즈니스 로직이
HttpServletRequest,HttpServletResponse와 같은 서블릿 API에 직접적으로 의존. 이로 인해 웹 환경 밖에서 단위 테스트를 수행하기가 매우 까다로워짐 - 반복적인 상용구 코드 (Boilerplate Code): 요청 파라미터 파싱, 타입 변환, 응답 컨텐츠 타입 설정 등 모든 요청에 대해 반복적인 코드가 필수적으로 요구됨
이러한 문제들을 해결하기 위해 관심사의 분리(Seperation of Concerns, SoC) 원칙에 입각하여 스프링 MVC를 사용하게 됨
MVC 패턴
MVC 패턴이란?
MVC 패턴은 하나의 Servlet이 혼자 모든 것을 처리하던 문제를 해결하기 위해 애플리케이션의 코드를 세 가지 역할로 명확하게 나누는 설계 방식
- Model: 데이터와 비즈니스 로직을 담당 (예: 영화 데이터, 추천 로직)
- View: 사용자에게 보여지는 화면(UI)을 담당 (예: HTML 페이지)
- Controller: 사용자의 요청(Request)을 받아 Model과 View를 연결해주는 중간 다리 역할을 함
역할을 분리하면 코드가 훨씬 더 깔끔해지고, 유지보수와 테스트가 용이해짐
Controller
사용자의 HTTP 요청을 받아서 처리.
URL 매핑을 통해 어떤 요청이 들어왔을 때 어떤 메소드를 실행할지 결정하고, 비즈니스 로직을 호출하고 데이터를 Model에 담아 View 이름을 반환함
Model
Controller에서 View로 데이터를 전달할 때 사용하는 객체
Key-Value 형태로 데이터를 저장하며, Controller에서 처리한 결과 데이터를 Model에 추가하면 View에서 해당 데이터를 참조할 수 있음
주로 Model, ModelAndView 클래스를 사용
View
사용자에게 보여지는 화면을 담당
Model에 담긴 데이터를 사용해 HTML을 생성하고 클라이언트에게 응답함
Controller가 반환한 View 이름을 ViewResolver가 실제 View 파일과 매핑시켜 렌더링함
Thymeleaf
타임리프(Thymeleaf)란?
서버에서 HTML을 동적으로 만들어주는 자바 기반의 도구, 즉 템플릿 엔진 입니다.
HTML을 동적으로 만들어줄 수 있음에 주목!
타임리프(Thymeleaf)의 주된 역할
자바 코드(스프링 컨트롤러)가 보내주는 데이터를 실제 HTML 코드와 결합하여, 내용이 채워진 완성된 웹 페이지를 만드는 것
예를 들어, "${userName}님 환영합니다" 라는 HTML 템플릿이 있다면, 타임리프는 ${userName} 부분을 실제 사용자 이름인 "홍길동"으로 바꿔서 최종 페이지를 완성
SSR과 CSR
SSR(Server Side Rendering)
SSR은 서버가 웹 페이지에 필요한 모든 데이터를 채워 넣어 완벽하게 조립된 HTML 페이지를 브라우저에게 전달하는 방식
사용자는 거의 즉시 콘텐츠를 볼 수 있어 초기 로딩 속도가 빠르고, 모든 내용이 HTML에 포함되어 있어 검색 엔진 최적화(SEO)에 유리함
타임리프가 바로 이 SSR 방식
쉽게 말하자면 서버에서 완성된 HTML을 통째로 주는 것
CSR(Client Side Rendering)
CSR은 서버가 거의 텅 빈 HTML 뼈대와 자바스크립트 파일만 보내주는 방식
그러면 사용자 브라우저(클라이언트)가 자바스크립트를 실행해 필요한 데이터를 서버에 다시 요청하고, 브라우저가 직접 페이지를 조립하여 화면에 그림
쉽게 말하자면 클라이언트에서 자바스크립트로 그때 그때 HTML을 그려내는 것
React나 Vue같은 최신 프론트엔드 프레임워크들이 이 방식을 사용
- CSR은 초기 로딩은 느릴 수 있지만, 이후에는 앱처럼 부드럽고 바른 화면 전환이 가능
