Hope Everyone Is Happy

7. MVC 패턴 본문

※ CS 스터디/디자인 패턴

7. MVC 패턴

J 크 2023. 8. 2. 16:31
728x90
반응형

본 게시글은  : 면접을 위한 CS 전공지식 노트 (출판사 : 길벗, 주홍철 지음) 을 참조하여 작성하였습니다. + 구글링


♣ MVC 패턴 (Model-View-Controler)

- MVC 패턴은 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴

- 화면과 데이터 처리를 분리해 코드간의 종속성을 줄이고 구성요소간의 역할을 명확하게 함으로써 코드 분리가 쉬움

-  코드의 가독성과 재사용성이 올라감으로써 협업에 용이

Ref : https://developer.mozilla.org/ko/docs/Glossary/MVC

▶ Model - 데이터와 비즈니스 관리

: 앱이 포함해야할 데이터가 무엇인지를 정의 

: 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻함.

: 뷰나 컨트롤러에 독립적인 구조로 View와 Controller에 의존하지 않아야함

: 일반적으로 뷰(View)에서 데이터를 생성하거나 수정하면 컨트롤러(Controller)를 통해 모델을 생성하거나 갱신

: Model 은 View 를 직접적으로 업데이트 불가

 

▶ View - 레이아웃과 화면을 처리

: 앱의 데이터를 보여주는 방식을 정의

: 쉽게 표현하면 사용자에게 보이는 화면 (UI) 

: 컨트롤러(Controller)로 부터 전달된 데이터의 출력과 HTML, CSS등을 통해 화면의 디자인을 처리하는 영역

: View가 업데이트 될 때마다 Model도 업데이트 됨 ( 의존성 발생 )

 

▶ Controller - 앱의 사용자로부터의 입력에 대한 응답으로 모델 or 뷰를 업데이트하는 로직을 포함

: MVC 패턴의 핵심으로 모든 사용자 요청의 중심에 위치

: 사용자가 어떠한 작업을 수행시에 컨트롤러에서 우선적으로 요청을 받아 들림

: 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할

: Controller는 View를 선택할 수 있으므로 1:N의 관계가 발생


♣ MVC 패턴 동작 과정 예시

MVC 패턴 예시 - 로그인 요청 시

 

1. 유저가 ID PW 입력 후 로그인 요청

2. 컨트롤러가 확인 후 모델에 로그인 데이터 확인 요청

3. 모델에서 ID/Password 유/무 확인

4. 모델 -> 컨트롤러에 확인 결과 전달

5. 컨트롤러 -> View로 확인 결과 전달

6. 구성된 UI에 맞추어 View 에서 결과를 출력

7. User 는 View단에서 생성된 UI로 결과를 확인


 MVC 패턴이 어떤 것인지에 대한 것과 관련 예시를 한 번 살펴 보았습니다. 지금은 MVC패턴이 Controller의 비중이 너무 큰 문제점이 있어, 이러한 문제점을 보완하기 위한 MVVM, MVP 패턴 등이 있는데 책에서도 다루고 있는 만큼 다음 글에 포스팅 하도록 하겠습니다.

 위의 글과 관련하여 추가적인 내용이나 피드백은 언제나 환영입니다 :)

'※ CS 스터디 > 디자인 패턴' 카테고리의 다른 글

8. MVP 및 MVVM 패턴  (0) 2023.08.02
6. 이터레이터 패턴  (0) 2023.08.02
5. 프록시 패턴 (Proxy pattern)  (0) 2023.08.02
4. 옵저버 패턴 (Observer Pattern)  (0) 2023.08.02
3. 전략 패턴 ( strategy pattern )  (0) 2023.08.02