MVC패턴 정복하기

November 25, 2023 4 분 소요

📌 디자인 패턴

MVC 패턴을 공부하기전에 상위 개념인 디자인 패턴에 대해 알아보자.

디자인 패턴은 소프트웨어 개발중 자주발생하는 문제들을 해결하기 위한 일종의 재사용 가능한 설계 아이디어 모음이다. 이런 디자인 패턴들은 특정 문제에 대한 간편하면서도 효과적인 해결책을 제공한다.

디자인 패턴의 이점

특정한 상황에서 적용 가능한 일반적인 해결책을 제공하므로 이를 재사용하여 개발시간을 단축시킬 수 있다.
패턴을 따르는 코드는 일정한 구조를 갖고있기때문에, 코드를 이해하고 수정하는데 도움이 된다.
디자인 패턴을 사용하면 코드의 일관성이 유지되며, 다른 개발자들과 협업시에도 코드를 더쉽게 이해할수 있다.

🧩 컴포넌트

MVC 패턴을 공부하기전에 컴포넌트라는 용어에 대해 짚고 넘어가보자.

컴포넌트는 쉽게 말하여 소프트웨어에서 재사용 가능한 작은 기능 조각이라고 이해하면 쉽다.

예를 들어 온라인 상점 앱을 만든다고 가정해보자.

🛒 온라인 상점 애플리케이션

상품 추가 컴포넌트 : 상품 추가 및 상품의 정보를 관리하는 역할
주문 처리 컴포넌트 : 주문을 생성하고 주문을 처리하는 역할
결제 처리 컴포넌트 : 결제를 처리하는 역할

이렇게 각 컴포넌트는 독립적으로 개발이 되며 필요한 상황에 맞게 재상용 될 수 있다.

예를 들어 다른 프로젝트에도 상품 추가 기능이 필요하다면 해당 컴포넌트를 가져다가 사용할 수 있다.

자바에서는 주로 클래스가 컴포넌트의 단위가 된다.

클래스는 객체지향 프로그래밍에서 특정한 기능과 데이터를 함께 묶는 단위이며, 여러 클래스가 함께 작동하여 하나의 기능을 수행하면, 이를 하나의 논리적인 컴포넌트로 간주할 수 있다.

예를 들어 온라인 상점 애플리케이션에서 “상품 추가”를 담당하는 클래스, “주문 처리”를 담당하는 클래스 “결제 처리”를 담당하는 클래스 등이 각각의 컴포넌트가 될 수 있다. 이들은 서로 협력하여 전체 애플리케이션의 기능을 제공한다.

📁 MVC 패턴

MVC 패턴은 디자인 패턴중 하나로 애플리케이션을 세 가지 주요 부분으로 나누어 개발하는 디자인패턴이다.

세 가지 주요 부분은 MVC -> Model - View - Contoller 새 개의 컴포넌트로 이루어져있다.

각 부분은 독립적인 컴포넌트로 개발이되며, 서로의 의존성을 낮추고 독립적인 개발을 가능하게 한다.

다음 시나리오를 통해 MVC 패턴을 쉽게 이해해보자!

🐶 검색 애플리케이션

사용자가 구글에 ‘강아지’를 검색하고 검색결과를 얻는 과정을 MVC 패턴을 적용해서 설명한 것이다.

사용자의 검색(View)
- 사용자가 브라우저를 통해 구글에 ‘강아지’라고 검색한다.
- 사용자와 상호작용하는 부분은 View에 해당한다.
컨트롤러에 요청(Controller)
- 뷰(View)는 사용자의 검색 요청을 인식하고 이를 컨트롤러에 전달한다.
- 컨트롤러는 이 요청을 이해하고 해당하는 데이터를 모델에 요청한다.
데이터 요청(Model)
- 컨트롤러는 ‘강아지’에 대한 검색 결과를 얻기 위해 모델에 데이터를 요청한다.
- 모델은 검색결과를 얻기 위해 필요한 비즈니스 로직을 실행한다.
데이터 전달(Contollr)
- 모델은 검색 결과 데이터를 컨트롤러에게 전달한다.
- 컨트롤러는 받은 데이터를 뷰에게 전달한다.
데이터 표시(View)
- 뷰는 받은 검색 결과 데이터를 사용하여 웹 페이지 UI를 업데이트한다.
- 사용자가 보는 부분(UI)이 업데이트 되어 ‘강아지’에 대한 검색 결과를 시각적으로 표시한다.

MVC 패턴을 적용하면 각 컴포넌트들의 역할이 분리되어 있어, 다른 컴포넌트에 종속되지 않아 변경에 유리하다.

🧱 Model - View - Controller

우테코 프리코스에서 진행했던 숫자야구게임을 예로 들어 각각의 컴포넌트의 역할에 대해 알아보자!

⚾ 숫자 야구 게임

Model

Model은 애플리케이션의 핵심 부분으로써, 데이터와 비즈니스 로직을 처리하기 위한 역할을 한다.

숫자 야구 게임에서 데이터와 비즈니스 로직은 어떤것이 있을까?

데이터
- 사용자가 입력한 숫자
- 랜덤한 컴퓨터의 3자리의 수
- 이외에 게임 진행에 필요한 데이터들이 저장될 수 있다.
비즈니스 로직
- 사용자의 입력과 컴퓨터의 숫자를 비교하고 결과를 반환하는 로직
  - 같은 수가 같은 자리에 있으면 ‘스트라이크’ 이란 힌트를 얻는다.
  - 같은 수가 다른 자리에 있으면 ‘볼’ 이란 힌트를 얻는다.
  - 같은 수가 전혀없으면 ‘낫싱’ 이란 힌트를 얻는다.
- 이 외에 게임 진행에 필요한 핵심 비즈니스 로직이들이 저장될 수 있다.

Model은 데이터의 상태를 관리하고, 비즈니스 로직을 통해 게임의 핵심 규칙을 구현한다.

View

View는 사용자에게 Model의 데이터를 사용자에게 보여주는 역할을 한다.

즉 Model이 처리한 데이터나 작업 결과를 가지고 사용자에게 출력할 화면을 만든다.

숫자 야구 게임에서 어떤것을 사용자에게 보여줄 수 있을까?

출력
- 볼, 스트라이크, 홈런 등의 결과를 Model에서 받아와 사용자에게 출력한다.
- 숫자 야구 게임의 게임 결과를 출력할 수 있다.

View는 사용자와 상호작용을 하며 Model에서 받아온 데이터를 적절히 가공하여 사용자에게 제공한다.

Controller

Contoller는 Model과 View의 중개자의 역할을 한다.

클라이언트의 요청을 받으면 해당 요청을 실제 업무를 수행하는 Model을 호출한다.

Model이 수행이 완료되면 그 결과를 가지고 화면을 생성하는 View에게 데이터를 전달한다.

컨트롤러는 컴포넌트 들이 상호작용할 수 있도록 도와주며 전체 애플리케이션이 동작할 수 있도록 중개자 역할을 한다.

숫자 야구 게임의 컨트롤러의 역할

사용자 입력 처리
- Controller는 View를 통해 사용자로부터 임의의 숫자 3자리를 입력받는다.
Model 호출 및 결과 처리
- Controller는 사용자 입력을 받아 Model에 전달하고, Model이 처리한 결과(힌트)를 받아온다.
View에 데이터 전달
- Model이 수행한 결과 즉 힌트를 받아오고 View에게 전달하여 사용자에게 출력될 수 있도록 한다.
전체흐름관리
- Controller는 전반적인 게임 흐름을 관리하면서 사용자 입력에 따라 Model과 View를 적절히 연결하여 게임을진행한다.

MVC 패턴을 지키면서 코딩하는방법

Model은 Controller와 View에 의존하지 않아야한다.
- Model 내부에 Controller와 View에 관련된 코드가 있으면 안된다.
View는 Model에만 의존해야하고 Controller에 의존하면 안된다.
- View 내부에 Model의 코드만 있을 수 있고, Controller 코드가 있으면 안된다.
View Model로 부터 데이터를 받을때는, 사용자마다 다르게 보여주어야하는 데이터에 대해서만 받아야한다.
Controller는 Model과 View에 의존해도 된다.
View가 Model로 부터 데이터를 받을때는 반드시 Controller에서 받아야한다.

출처 [10분 테코톡] 🧀 제리의 MVC 패턴

MVC 패턴의 장점

장점

모듈화
- 각 컴포넌트(모델, 뷰, 컨트롤러)는 서로의 구현 내부를 몰라도 되므로 개발자들은 각 부분에 집중할 수 있다.
유지보수성
- 모듈화로 인해 유지보수성이 향상됩니다. 특정 부분에 변경이 필요한 경우 해당 부분만 수정하면 되므로 다른 부분에 영향을 미치지 않는다.
재사용성
- 각 컴포넌트는 독립적으로 개발되므로 재사용이 용이합니다. 특히 뷰나 컨트롤러를 다른 프로젝트에서도 재사용할 수 있다.
병렬 개발
- 여러 개발자가 MVC 각각의 컴포넌트에 대해 병렬적으로 작업할 수 있다.
- 각 컴포넌트가 독립적으로 개발되기 때문에 개발 작업을 효율적으로 분할하고 병렬로 진행할 수 있다.
의존성 감소 및 유연성
- 각 컴포넌트가 독립적으로 동작하므로 서로 덜 의존한다.
- 이는 하나의 컴포넌트를 변경할 때 다른 컴포넌트에 미치는 영향을 최소하하며, 시스템의 유연성을 높인다.

Twitter Facebook LinkedIn