IT 도서 리뷰/개발자가 되기 위해 꼭 알아야 하는 IT 용어

[PART1] 웹/디자인 - TERMS 14

goldenkiwi-coder 2024. 10. 28. 00:54

[ TERMS 14 ]  MVC

 

1. MVC(Model-View-Controller)의 정의

 앱 개발을 세 개의 영역으로 분할하고 각 요소에 고유의 역할을 부여하는 방식이다. MVC 패턴은 M(Model)은 데이터 영역, V(View)는 사용자에게 보여지는 UI영역, C(Controller)는 비즈니스 로직 처리 영역으로 분리해서 개발을 진행한다. MVC패턴을 도입하면 UI 영역과 도메인(비즈니스) 처리 영역이 분리되므로 서로 영향을 주지 않고 유지 보수 할 수 있다. MVC는 소프트웨어 디자인 패턴 중 하나이다. (디자인 패턴을 잘 활용하면 가독성과 간결성을 갖출 뿐만 아니라 설계적 측면에서도 이점이 있다. 즉, 확장과 유지 보수가 용이하여 효율적인 소스 코드를 작성할 수 있다.)

 

2. MVC는 어떻게 접하게 될까?

 MVC는 확장과 유지 보수가 용이한 덕분에 복잡한 웹 개발을 할 때 실무에서 자주 접하게 된다. 하지만 MVC의 구조 자체를 개발하는 데는 꽤 많은 시간이 소요된다. 따라서 'MVC 웹 프레임워크'를 활용한다. MVC 웹 프레임워크는 간단히 말하자면 MVC구조에 맞게 미리 만들어진 틀을 제공하는 기술이다. MVC 웹 프레임 워크는 프로그램 언어에 따라 다른 프레임워크를 갖는다. [ e.g. Java => spring, Python => Django, php => Laravel ]

 

3. MVC 알아보기

>  개념

MVC는 모델, 뷰, 컨트롤러의 의미가 함축된 용어로 개발 환경을 이 세가지로 분리하는 것이다. 즉 앱을 개발할 때 클라이언트에게 보이는 인터페이스와 데이터 로직으로 구분하는 방법론입니다. 이렇게 분리된 요소들은 MVC의 컴포넌트라고 한다.

 

>  각 컴포넌트의 역할

  • 모델

 모델은 앱이 무엇을 할 것인지 정의하는 역할을 수핸한다. 또한 데이터 저장소와 직접 연동하여 데이터를 어떻게 처리할지 결정한다. 모델을 통해서 나온 결과 값은 컨트롤러 또는 뷰에 제공된다.

[ e.g. 은행 업무 프로그램 : 계정, 고객 계좌 정보, 신용 정보, 인출, 입출금 등의 기능과 데이터가 필요 -> 데이터, 규칙, 기능등을 어떻게 활용할지를 정의하는 것이 모델]

 

 뷰는 모델로부터 받아온 데이터와 사용자가 원하는 결과값을 화면(UI)으로 보여 주는 역할을 수행한다. 우리가 웹 브라우저를 통해 보는 것들이 모두 뷰에 해당한다. 뷰를 구현할 떄 중요한 점은 뷰는 출력하는 역할만 수행해야 한다는 것이다. 즉, 데이터 로직을 다뤄서는 안된다. 그래서 데이터를 저장하고 관리하는 클래스, 변수, 인스턴스 변수가 필요 없다.

 

  • 컨트롤러

 컨트롤러는 모델과 뷰 사이를 연결하는 다리 역할을 수행한다. 프로그램의 작동 순서나ㅏ 모델에게 데이터를 어떻게 처리해야 할지 지시하고, 받아 온 결과값을 뷰에게 전달하는 역할을 한다.

 

컨트롤러에는 사용자의 요청을 직접 받고 모델과 뷰를 업데이트 하는 로직이 포함된다.  모델과 뷰는 다른 컴포넌트가 무슨 역할을 수행하는지 알 필요가 없지만, 컨트롤러는 뷰와 모델의 역할과 책임을 알고 있어야 한다. 덧붙이자면 MVC에서 컨트롤러는 상화에 따라 여러 개의 모델, 뷰와 연결될 수 있다.

mvc 패턴을 설명하는 이미지(출처 : https://medium.com/@udaypatil318/mvc-framework-ffe8b9faf970)

 

4. MVC를 알아야 하는 이유

 웹 또는 앱을 개발할 때 MVC를 자주 마주한다. 만약 뷰, 모델, 컨트롤러가 구분되지 않은 코드가 적힌 웹에서 뷰에 해당하는 부분을 업데이트 한다면 데이터, 관리, 기능 부분을 전부 수정해야 하기 때문에 쉽지 않은 것은 물론이고 오랜 시간이 소요된다. 반대로 MVC를 사용했다면 각 컴포넌트의 역할이 독립적이기 때문에 업데이트할 부분만 수정하면 된다. 최근에는 기술을 재사용하는 경우가 많기에 컴포넌트의 연결성을 낮출수록 많은 이점을 가질 수 있다. 따라서 실무에서는 MVC와 같은 디자인 패턴이 매우 중요하게 활용되고 있다.

 

5. MVC  더 알아보기

>  MVC의 한계

mvc 패턴의 한계를 보여주는 이미지(출처 : https://medium.com/hcleedev/web-react-flux-%ED%8C%A8%ED%84%B4-88d6caa13b5b)

 MVC의 가장 큰 특징은 구성요소를 독립시킴으로써 개발 효율성을 높인다는 것이다. 이런 특징은 장점이 되기도 하지만 한편으로는 한계가 되기도 한다. 다수의 모델 또는 뷰가 하나의 컨트롤러에서 수행되기 때문에 모델과 뷰는 완전히 분리되기가 쉽지 않다. 특히 프로그램 구조가 커질수록 모델과 뷰가 복잡하게 연결되는 상황이 발생한다. 이런 의존성 문제를 보완하기 위해서 MVC에서 다양한 패턴이 파생되었다.

 

>  MVC에서 파생된 패턴

  • MVP(Model-View-Presenter)

MVP패턴을 설명하는 이미지(출처 : https://anshul-vyas380.medium.com/model-view-presenter-b7ece803203c)

모델, 뷰, 프레젠터(Presenter)로 구성된 디자인 패턴이다. MVP의 특징은 뷰와 모델이 프레젠터를 통해서만 동작하도록 설계된다는 것이다. MVC에서는 모델이 뷰로 데이터를 직접 전달하거나 뷰가 모델에서 데이터를 가져올 수도 있었지만 MVP에서 뷰와 모델은 프레젠터를 통해서만 데이터를 교환할 수 있다.

 

  • MVVM(Model-View-View-Model)

모델, 뷰, 뷰모델(View Model)로 구성된 디자인 패턴이다. MVVM의 뷰모델은 모델과 뷰 사이에 위치한다. 뷰 모델은 뷰에서 보일 데이터와 비즈니스 로직을 갖고 있다.

[ e.g. 앱에서 버튼을 눌렀을때 사용자의 이름을 출력하는 버튼이 존재한다고 가정하였을때 버튼과 버튼을 눌렀을 때의 결과를 UI에 나타나게 하는것은 뷰의 역할이다. 그리고 버튼을 클릭했을 때 발생하는 기능과 사용자 이름은 뷰모델에서 정의한다. 이때 뷰모델의 데이터가 변경되면 뷰에서 보이는 데이터 값도 변경된다. 이를 다른 말로는 데이터 바인딩이 되었다고 표현한다.]

 

 MVVM 모델은 뷰와 뷰모델을 신경쓸 필요가 없고 단지 데이터를 어떻게 가지고 있을지만 생각하면 된다. 즉, 비즈니스 로직과 사용자에게 보여지는 UI는 전혀 신경 쓸 필요가 없다. 여기서 뷰모델은 모델을 위한 역할도 한다. 뷰모델에서 데이터 변화가 일어나면 모델을 업데이트해주는 것이다. 이와 같이 MVVM은 코드를 간략화해 준다는 장점과 로직의 은닉화라는 특징이 있다.

 

>  함께 알아 두면 좋은 용어

  • Servlet
  • Bean
  • 데이터베이스
  • DAO(Data Access Object)
  • DTO(Data Transfer Object)
  • Command 패턴