Vue의 특징 - MVVM 패턴
- MVVM 패턴은 Model-View-View Model 패턴
- Model과 View 사이에 ViewModel 이라는 중간 계층을 두어, View와 Model 간의 결합도를 낮추는 패턴
MVVM 패턴 (Vue.js 기준)
MVVM(Model-View-ViewModel)은 UI 로직과 비즈니스 로직을 분리하는 패턴으로, Vue.js에서는 다음과 같이 적용된다.
MVVM 구성 요소
- Model: 데이터를 저장하는 영역 (ex: Vue의 data 혹은 Vuex/Pinia 상태)
- ViewModel: Model과 View를 연결하는 중간 계층 (ex: Vue의 computed, methods, watch)
- View: 실제 UI (ex: Vue 템플릿, template 부분)
MVC 패턴 (Spring 기준)
MVC(Model-View-Controller)는 애플리케이션을 3개의 계층으로 나누어 관리하는 구조이다.
MVC 구성 요소
- Model: 비즈니스 로직, 데이터베이스와의 상호작용 (ex: JPA Entity, Service, Repository)
- View: 클라이언트에게 보여지는 부분 (ex: Thymeleaf, JSP, JSON 응답)
- Controller: 클라이언트 요청을 받아서 처리하고 적절한 Model과 View를 연결 (ex: @RestController 클래스)
여기서 잠깐 JSP란?
JSP(JavaServer Pages)는 서버 사이드에서 HTML을 동적으로 생성할 수 있도록 도와주는 기술이다. Java 코드와 HTML을 함께 사용할 수 있으며, Servlet과 함께 Java EE (현재는 Jakarta EE)의 일부로 제공된다.
2. JSP는 지금도 쓰는가?
거의 안 씀.
과거에는 Java 기반 웹 애플리케이션에서 많이 사용되었지만, 현재는 Spring Boot + Thymeleaf, React/Vue + REST API 같은 방식이 대세가 되어 거의 사용되지 않는다.
3. JSP는 SSR인가?
맞음.
JSP는 서버에서 HTML을 렌더링하여 클라이언트(브라우저)로 보내는 방식이므로 SSR(Server-Side Rendering) 기술이다.
4. JSP를 잘 안 쓰는 이유
🔹 느림: JSP는 컴파일 과정이 필요하고, 변경할 때마다 다시 로딩해야 하는 번거로움이 있다.
🔹 관리 어려움: Java 코드와 HTML이 섞여 있어 유지보수성이 떨어진다.
🔹 템플릿 엔진 발전: Thymeleaf, Mustache 같은 템플릿 엔진이 더 강력하고 사용하기 쉽다
🔹 프론트엔드 발전: Vue, React 같은 프레임워크가 등장하면서 클라이언트에서 렌더링하는 방식이 주류가 된다.
대체 기술은?
JSP 대신 Thymeleaf, Mustache, Freemarker 같은 템플릿 엔진이 사용되거나, 완전히 프론트엔드(Vue, React)와 REST API로 나누는 구조가 대세이다.
