- 백엔드나 풀스택 공부를 하고 계신 분들은 잘 알고있는 MVC라는 단어는 Model, View, Controller를 합친 개념인데요. 한 번 찍먹해봅시다.
🗒 MVC란?
-
앱 개발을 세 개의 영역으로 분할하고 각 요소에 고유의 역할을 부여하는 방식입니다. MVC 패턴에서 M은 데이터 영역, V는 사용자에게 보여지는 UI영역, C는 비즈니스 로직 처리 영역으로 분리해서 개발을 진행합니다.
-
MVC 패턴을 도입하면 UI 영역과 도메인 처리 영역이 분리되므로 서로 영향을 주지 않고 유지 보수가 가능합니다.
-
MVC는 소프트웨어 디자인 패턴 중 하나입니다. 소프트웨어 디자인 패턴이란 개발 방식을 공식화한 방법론을 말합니다. 과거부터 지금까지 개발하는 과정에서 발생한 동일한 문제들을 해결하는 방식이라고 말할 수 있죠.
-
디자인 패턴을 잘 활용하면 가독성이 좋아지고 간결성 역시 좋아집니다. 또한 설계적인 부분에서도 장점이 있죠. 즉, 확장과 유지 보수가 용이하여 효율적인 코드를 작성할 수 있습니다.
🗒 모델, 뷰, 컨트롤러 각각의 설명
📌 M (Model)
-
모델은 앱이 무엇을 할 것인지 정의하는 역할을 수행합니다. 또한 데이터 저장소와 직접 연동하여 데이터를 어떻게 처리하는 지도 결정하게 됩니다.
-
예를 들어 은행 업무 프로그램이 있다고 가정하겠습니다. 이 프로그램은 고객의 정보를 관리하고, 계좌 정보 활용 등등 은행 업무를 하는 프로그램입니다. 따라서 계정, 고객, 계좌 신용 정보 등등 여러 기능과 데이터들이 필요하게 되죠. 이 데이터와 요소 들을 어떻게 활용할 지 정의한 것이 모델입니다. 모델을 통해서 나온 결과 값은 컨트롤러 또는 뷰에 제공합니다.
-
모델은 데이터와 비즈니스 로직을 책임지는 부분이며, 데이터베이스, 파일 시스템, API 호출 등을 통해 데이터를 조작하고 관리하는 것을 말합니다. 여기서 모델은 사용자 인터페이스나 컨트롤러와 독립적으로 존재하며, 데이터의 유효성 검사와 데이터 변경을 처리하게 되죠
📌 V (View)
-
뷰는 모델로 부터 받아온 데이터와 사용자가 원하는 결과값은 화면에 보여주는 UI(User Interface) 역할을 수행하게 됩니다. 우리가 웹 브라우저를 통해 보는 모든 것들이 전부 뷰에 해당하게 되죠.
-
뷰는 출력하는 역할만 수행해야합니다. 데이터 로직을 다뤄서는 안되며, 클래스나 변수, 인스턴스 변수 등도 뷰에서는 전부 필요 없습니다.
-
뷰는 HTML, CSS, JS로 구성되며 GUI 애플리케이션에서는 사용자에게 보여지는 화면을 그리는 부분을 의미합니다. 여기서 뷰는 모델의 데이터를 표시하면서 사용자 입력을 받아 컨트롤러에 전달합니다.
📌 C (Controller)
-
컨트롤러는 모델과 뷰 사이를 연결하는 다리 역할을 수행합니다. 프로그램의 작동 순서나 모델에게 데이터를 어떻게 처리해야 할 지 지시하고, 받아온 결과 값을 뷰에게 전달하는 역할을 수행하죠.
-
컨트롤러는 사용자가 뷰에서 요청한 작업을 수행하기 위해 모델을 업데이트하거나, 새로운 뷰를 선택합니다. 그리고 모델의 변화를 감지하여 뷰에 전달하고, 뷰에서 발생한 사용자 입력을 해석하여 모델에 전달합니다.
-
컨트롤러에서는 사용자의 요청을 직접 받고 모델과 뷰를 업데이트하는 로직이 포함되게 됩니다. 무엇보다 컴포넌트는 뷰와 모델의 역할과 책임을 알고 있어야 합니다. 또한 MVC에서 컨트롤러는 상황에 따라 여러가지 모델, 뷰와 연결이 가능합니다.
🗒 MVC 패턴을 알아야하는 이유
-
웹이나 앱을 개발할 경우 MVC를 자주 마주합니다. 예를 들어서 MVC를 구분하지 않고 모든 코드가 적혀 있는 웹 사이트가 있다고 가정해보겠습니다. 만약 이 사이트에서 뷰 부분을 업데이트하거나 고치고 싶다면 데이터 관리나, 기능 부분을 전부 수정해야 하기에 쉽지 않고 오랜 시간이 소요됩니다. 반면 MVC는 각 컴포넌트들이 독립적이기 때문에 업데이트 할 부분만 수정하면 됩니다.
-
최근에는 기술을 재사용하는 부분도 중요하며 MVC 패턴이 이러한 재사용 부분에서도 이점이 있어 자주 쓰입니다.
