MVC 패턴

개요

•

MVC 패턴

•

MVC vs REST

•

MVC는 언제 쓰이나?

•

REST는 언제 쓰이나?

•

MVC model1

•

MVC model2

•

Servlet/JSP 에서의 MVC

MVC 패턴

소프트웨어를 “모델, 뷰, 컨트롤러” 구성 요소로 모듈화 하여 개발하는 아키텍처 패턴

M - Model : 모델 → 데이터

V - View : 뷰 → 화면

C - Controller : 컨트롤러 → 모델, 뷰 제어하는 역할

MVC (Model-View-Controller) 아키텍처 패턴은 소프트웨어 디자인에서 사용되는 구조적 패턴으로, 애플리케이션을 세 가지 주요 구성 요소로 분리합니다:

이 패턴은 관심사의 분리를 촉진하여 코드의 재사용성, 유지보수성, 확장성을 향상시킵니다.

구성 요소

•

Model (모델): 데이터와 비즈니스 로직을 관리합니다.

•

View (뷰): 사용자 인터페이스를 담당하며, 데이터를 표시합니다.

•

Controller (컨트롤러): 사용자 입력을 처리하고, 모델과 뷰 사이의 상호작용을 조정합니다.

구성 요소	설명	역할
모델 (Model)	데이터와 데이터 처리 로직을 담당	- 데이터 관리 및 업데이트 - 비즈니스 로직 수행 - 데이터의 유효성 검사 및 유지 - 데이터베이스와의 상호 작용
뷰 (View)	사용자 인터페이스(화면)을 담당	- 데이터를 시각적으로 표시 - 사용자 입력 수집 및 전달 - 모델의 변경 사항을 반영하여 화면 갱신 - 사용자와 상호 작용하는 인터페이스 제공
컨트롤러 (Controller)	모델과 뷰 사이의 중개하는 역할	- 사용자 입력 해석 및 처리 - 모델 업데이트 및 관리 - 모델과 뷰 간의 상호 작용 관리 - 비즈니스 로직 및 흐름 제어

패턴? (Pattern)

모범 답안

선험자나 연구자가 시행착오나 연구 끝에 최선에 가까운 문제 해결 방안으로 자리 잡은 구조

아키텍처 패턴

소프트웨어 설계 구조에 대한 모범 답안

디자인 패턴

소프트웨어 설계의 코드에 대한 모범 답안

MVC vs REST

MVC 는 페이지 기반 웹 애플리케이션 설계를 목적으로 하며, REST 는 클라이언트-서버 구조에서의 리소스 기반 통신을 위한 설계 방식입니다.

주요 설명

•

MVC: 페이지 단위로 구성되며 주로 HTML 기반의 웹페이지 렌더링에 최적화되어 있습니다.

•

REST: HTTP 메서드를 통해 클라이언트-서버 간에 리소스를 주고받는 방식으로, 데이터 전송에 특화되어 있어 프론트엔드와 백엔드를 분리하기에 적합합니다.

예시

•

MVC
전통적인 웹 애플리케이션 설계 방식으로, 각 페이지마다 서버에서 HTML을 생성하여 반환.

•

REST
React와 같은 프론트엔드 애플리케이션에서 데이터만 요청하는 API 서버. 
GET /users 요청 시 JSON 데이터 반환.
프론트엔드 (React)  백엔드 (SpringBoot)

MVC는 언제 쓰이나?

MVC는 서버에서 직접 HTML을 렌더링해 사용자가 페이지를 이용할 수 있는 방식의 웹 애플리케이션에 사용됩니다.

주요 설명

MVC 패턴은 주로 콘텐츠 렌더링이 서버에서 이루어지고, 프론트엔드와 백엔드가 통합된 환경에서 유용합니다. 서버 사이드 렌더링을 통해 페이지가 완성되므로, 사용자가 페이지를 로드할 때 초기 응답 속도가 빠릅니다.

예시

•

쇼핑몰 웹사이트: 제품 목록, 상세 페이지, 장바구니 등 서버에서 렌더링된 페이지를 제공.

•

회사 홈페이지: 서버에서 직접 HTML 페이지를 렌더링하여 SEO에 유리하게 제공.

REST는 언제 쓰이나?

REST는 서버와 클라이언트 간 데이터를 JSON, XML 등의 형식으로 주고받는 API 설계에 사용됩니다.

주요 설명

REST는 프론트엔드와 백엔드가 독립적으로 구성되어야 할 때, 특히 다양한 클라이언트(모바일, 웹 등)에서 동일한 데이터를 활용해야 할 때 사용됩니다. 프론트엔드 애플리케이션이 동적인 페이지를 클라이언트 측에서 렌더링할 때 REST API는 데이터만을 반환하여 효율적으로 통신합니다.

예시

•

모바일 앱: 동일한 데이터를 제공하는 API 서버를 통해 모바일 앱과 웹 애플리케이션에서 데이터를 공유.

•

싱글 페이지 애플리케이션(SPA): React, Vue 같은 프론트엔드 프레임워크를 사용하는 경우 REST API 서버와 통신하여 JSON 데이터를 렌더링.

MVC Model1

MVC Model1은 Controller가 없는 구조로, JSP(또는 Servlet)에서 요청을 처리하고 View를 생성하여 클라이언트에 응답하는 방식입니다.

주요 설명

MVC Model1은 JSP 페이지에서 요청을 받아서 직접 비즈니스 로직을 처리하고 HTML을 생성하는 초기 형태의 MVC 구조입니다. Controller가 없기 때문에 코드의 모듈화가 어렵고, 유지보수성이 낮습니다.

예시

•

초기 JSP 기반의 웹 애플리케이션에서 요청이 JSP로 직접 전달되고, JSP에서 데이터 처리와 뷰를 동시에 담당.

MVC Model2

MVC Model2는 Controller가 추가된 MVC 구조로, 요청을 Controller에서 처리한 후 적절한 View를 선택하여 응답하는 방식입니다.

주요 설명

MVC Model2는 Model1의 단점을 보완한 구조로, JSP에서 비즈니스 로직을 분리해 Controller가 요청을 관리하게 합니다. 이를 통해 코드가 더 깔끔하고 모듈화되며, 유지보수성이 크게 향상됩니다. 대부분의 현대 MVC 패턴이 Model2를 따릅니다.

예시

•

Spring MVC 프레임워크: @Controller가 클라이언트 요청을 받고 필요한 데이터는 Model을 통해 처리한 후 View를 선택하여 응답.

Servlet/JSP 에서의 MVC

•

MVC 패턴 - model1

•

MVC 패턴 - model2

MVC 패턴 - model1

JSP 사용 종류

HTML + Java

: Controller 의 역할과 View 역할을 모두 담당

ex) 데이터 목록 화면 등

HTML

: View 역할만 담당

ex) 메인 화면, 로그인 화면 등

Java

: Controller 의 역할만 담당

ex) “xxx_pro.jsp” 이름으로 주로 요청 처리 담당하는 jsp

Controller 역할의 코드

•

사용자 입력 정보 추출

•

DB 연동 처리

•

화면 이동

model1 의 한계

: Controller 와 View 가 혼용된 jsp 페이지들이 있기 때문에, 자바 로직만 변경하거나 화면만 수정하는 등의 작업을 하기 어렵다. 즉, 유지보수성이 떨어진다.

MVC 패턴 mode1 방식의 한계를 해결 및 보완하기 위하여, 컨트롤러와 뷰를 혼용한 JSP 페이지에서 컨트롤러를 분리시킨 패턴이 MVC 패턴 model2 방식이다.

MVC 패턴 - model2

Model

: 데이터와 비즈니스 로직

•

Service 와 DAO 로 구성

•

DAO : 데이터 접근 객체로, 데이터베이스에 요청을 하고 처리 결과를 전달 받는 객체

•

Service :  비즈니스 로직을 처리하는 객체. 즉 기능(업무 프로세스)를 처리하는 객체

View

: 레이아웃과 화면

•

HTML, CSS

•

컨트롤러 기능이 없는 JSP

Controller

: 모델과 뷰를 제어

•

사용자 입력 정보 추출

•

화면 이동

•

DB 연동 처리