TIL. 256 MVC란? (MVC design pattern)

MVC, MVVM 과 같은 키워드는 소프트웨어 설계와 관련된 디자인 패턴으로, 소프트웨어 공학에서의 ‘흔히 사용되는’ 설계 패턴을 의미한다.

❗️What is MVC

• Model View Controller (모델 뷰 컨트롤러)
• SW Architecture Design Pattern (SW 아키텍처 디자인 패턴)
• separates application functionalities (애플리케이션 기능 분리)
• promotes organized programming (조직화된 프로그래밍 작성)

❗️MVC란?

• MVC란 Model View Controller의 약자이다.
• MVC는 소프트웨어가 서비스하는 방식에 대한 패턴을 지칭한다.
• MVC는 어떤 프로임워크나 라이브러리를 지칭하는 것이 아니다.
• MVC는 서비스하는 방식에 대한 하나의 아이디어 디자인 패턴이다.
• 여러 유명한 웹 프레임워크에서는 MVC 컨셉을 사용하고 있다.
• (Laravel PHP, Django Python, Express JS, Angular JS 등)

❗️MVC 디자인 패턴 특징

• 소프트웨어가 서비스하기 위해서는 여러 과정과 처리가 필요한다.
• 그러한 처리들을 각 기능 단위 별로 나눠서 처리한다.
• 그러므로써 프로그래밍을 할 때 역할을 하는 정돈된 코드를 작성할 수 있다.
• 디버깅이나 코드 가독성을 높인다.

❗️MVC 디자인 패턴 흐름

1. Model

• 데이터베이스에서 데이터를 가지고 올 수 있고 데이터를 가지고 있을 수도 있다.
• 데이터베이스와 소통한다.
• 컨트롤러에게 데이터를 전달한다.
• 모델이 뷰와 직접 소통하는 일은 없다.

2. View

• 유저가 보는 화면을 보여주게 하는 역할이다.
• 데이터를 받고 그리는 역할을 수행한다.
• 모델이나 데이터베이스와는 소통하지 않고 컨트롤러와만 소통한다.
• 컨트롤러에게 엑션이나 데이터를 전달만 하고 전달 받기만 한다.

3. Controller

• 뷰에서 엑션과 이벤트에 대한 인풋 값을 받는다.
• 모델에게 전달해주기 전에 데이터를 가공할 수 있다.
• 뷰에게 모델에게 받은 데이터를 가공할 수 있다.

❗️MVC 디자인 패턴 수도 코드

http://yourapp.com/users/profile/1
/routes // 엔드포인트로 요청이 들어오면 라우터에 우선 걸린다.
  users/profile/:id = Users.getProfile(id)
/controllers // 모델을 통해 데이터를 받아오면(+가공) 뷰로 보낸다.
  class Users{
    function getProfile(id) {
      profile = this.UserModel.getProfile(id)
      renderView('users/profile', profile);
    }
  }
/models // 실제 데이터베이스에 접근해서 데이터를 받아온다.
  class UserModel {
    fucntion getProfile(id) {
      data = this.db.get('SELECT * from users WHERE id = id')
      return data;
    }
  }
/view // 받은 데이터를 다이나믹하게 이용해서 뷰로 보여준다.
  /users
    /profile
    <h1>{{profile.name}}</h1>
    <ul>
      <li>Email: {{profile.email}}</li>
      <li>Phone: {{profile.Phone}}</li>
    </ul>

출처 : https://hanamon.kr/mvc%EB%9E%80-mvc-design-pattern/