MVC 패턴이란?!

김영우·2022년 11월 19일

우아한테크코스

우테코 5기 프리코스

목록 보기

8/16

우테코 프리코스를 진행하며 미션이 종료되면 다른 지원자 분들의 코드를 읽어보곤 했다. 다양한 기술들을 사용한 다른 지원자분들을 보며 앞으로의 학습 과정을 그려보는 것은 새롭고 즐거운 과정이었다.

다른 지원자 분들의 코드를 보다보니 익숙하지만 자세히 알지 못하는 그런 친구가 자주 눈에 띄었다. 바로 MVC 패턴이다.

MVC 패턴은 평소에 조금씩 챙겨보던 테코톡에서도 매년 다룰 정도로 중요한 개념인듯 했다. 하지만 이를 적용해볼 생각을 하지도 않고 기억속에서 잊혀졌다가 다른 지원자분들의 코드를 보고 이를 적용하고자 했다.

1. MVC 패턴이란?

1-1. MVC 패턴의 정의

mdn web Docs에 따르면 MVC는 소프트웨어 디자인 패턴이라고 한다. 디자인 패턴...? 이건 또 뭔지 찾아보았다.

1-2. 소프트웨어 디자인 패턴의 정의

wikipedia에서 내린 소프트웨어 디자인 패턴의 정의는 위와 같다. 간단히 말해 문제를 해결하는 방식이라고 생각하면 될 것 같다.

정리해보자면 MVC 패턴은 소프트웨어 디자인 패턴이고, 소프트웨어 디자인 패턴은 문제를 해결하는 방식이므로

MVC 패턴 = 문제를 해결하는 방식

이라고 이해하면 될 것이다. 이제 MVC 패턴이 그래서 어떻게 문제를 해결하는지 알아보자.

2. MVC 패턴의 구성요소

2-1. M (Model)

MVC 패턴의 구성요소 첫번째 M은 Model을 나타낸다. 모델은 앱이 포함해야할 데이터가 무엇인지를 정의하는 역할을 한다. 다시말해 MVC 패턴으로 구성된 소프트웨어에서 데이터를 갖고 있는 요소는 모델일 것이다.

모델은 다음과 같은 규칙을 가지고 있다.

사용자가 편집하고자 하는 모든 데이터를 포함해야한다.

뷰, 컨트롤러에 대한 어떤 정보도 알지 못해야 한다.

변경이 일어날 때 이를 처리할 방법을 구현해야 한다.

2-2. V (View)

MVC 패턴의 구성요소 두번째 V는 View를 나타낸다. 뷰는 앱의 데이터를 보여주는 방식을 정의하는 역할을 한다. 다시말해 MVC 패턴으로 구성된 소프트웨어를 사용하는 사용자에게 보여지는 영역에 관한 로직은 뷰가 실행한다고 할 수 있다.

뷰는 다음과 같은 규칙을 가지고 있다.

모델이 가지고 있는 정보를 따로 저장하지 않는다.

모델, 컨트롤러에 대한 어떤 정보도 알지 못해야 한다.

변경이 일어날 때 이를 처리할 방법을 구현해야 한다.

2-3. C (Controller)

MVC 패턴의 구성요소 세번째 C는 Controller를 나타낸다. 컨트롤러는 앱의 사용자로부터의 입력에 대한 응답으로 모델, 뷰를 업데이트 하는 역할을 수행한다. 다시말해 MVC 패턴으로 구성된 소프트웨어에서 사용자의 입력과 같은 특정 이벤트가 발생했을 때 모델과 뷰의 상태 변경을 시켜주는 로직은 컨트롤러가 실행한다고 할 수 있다.

컨트롤러는 다음과 같은 규칙을 가지고 있다.

모델, 뷰에 대한 정보를 알고있어야 한다.

모델, 뷰의 변경을 모니터링해야 한다.

3. MVC 패턴의 장단점

3-1. 장점

비즈니스 로직과 UI 로직을 분리하여 유지보수를 독립적으로 수행할 수 있다.
모델과 뷰가 다른 컴포넌트들에 종속되지 않아 애플리케이션의 확장성, 유연성에 유리하다.

3-2. 단점

뷰는 컨트롤러에 연결되어 화면을 구성하는 단위이므로 구현하고자 하는 서비스의 규모가 커지면 뷰의 개수가 많아질 수 있다.
컨트롤러에 의해 하나의 뷰에 여러 모델이 연결될 수 있기 때문에 모델과 뷰가 의존성을 띄게되어 컨트롤러에 다수의 모델과 뷰가 복잡하게 연결될 수 있다.

4. 적용

우테코 5기 프리코스 4주차 미션 MVC 적용기

5. Reference

김영우

불편한 일들을 개발로 풀어내고 싶은 프론트엔드 개발자입니다!