MVC 패턴 구조

1. MVC 구조란?

MVC 구조는 Model, View, 그리고 Controller로 구성된 구조이다. MVC 구조를 이용하게 되면 웹페이지를 구성하는 요소들(시각적인 요소, 데이터를 담당하는 요소)들끼리의 간섭없이 각각 독립적으로 개발함으로서 큰 효율을 낼 수 있다는 장점이 있다. 

2. Model 이란 무엇인가? (feat. 데이터를 다루는 주방장)

그렇다면 MVC 구조를 구성하는 구성요소들에 대하여 알아보자. 먼저 Model이다. Model은 데이터를 처리하는 역할을 담당한다. Controller에서의 명령을 받고 DataBase에서의 데이터를 저장하거나 삭제, 업데이트, 변환등의 작업을 수행한다.

Model은 세 가지의 규칙을 갖고 있다고 한다. 

1. 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 함. 즉, 화면 안의 네모박스에 글자가 표현이 되도록 사용자가 설정을 하였다면, 네모박스의 위치, 크기, 글자의 내용, 글자의 위치 등의 정보를 가지고 있어야 한다.

 

2. View나 Controller에 대해서 어떤 정보도 알지 말아야 함. 즉, Model은 오로지 데이터와 관련된 작업을 하기 때문에 Model이 화면의 UI를 변경할 수는 없다.

 

3. 변경이 발생하면, 변경 통지에 대한 처리 방법을 구현해야 함. 누군가 모델을 변경을 요청하는 이벤트를 보냈을 때, 이를 받을 수 있는 방법을 구현해야함. 모델은 재사용이 가능해야 하며 다른 인터페이스에서도 변하지 말아야 한다.

3. View란 무엇인가? (feat. 주방장이 내온 데이터를 세팅하는 직원)

그다음은 View이다. View는 우리말로 '보다'라는 의미를 가지고 있는 것처럼, 시각적인 부분, 화면을 담당하는 역할을 한다. 자세히 말하면 '모델의 데이터를 어떤 방식으로 사용자에게 보여줄까?'를 연구하는 요소이다. 

 화면의 뼈대를 담당하는 html, 이를 예쁘게 스타일링하는 css, 그리고 이들이 보다 동적으로 작동할 수 있도록 도와주는 javascript를 이용하여 View를 만들어낸다. 

4. Controller이란 무엇인가?(feat. 데이터의 흐름을 관리하는 매니저)

마지막으로 Controller이다. Controller는 사용자가 접근하려는 URL에 따라서 요청하상을 파악한 후, 그 요청에 맞는 Moel의 데이터를 의뢰하고 데이터를 View에 반영해서 사용자에게 알려준다. 한마디로 전반적인 제어를 담당하는 역할을 하고 이는 java와 같은 언어의 프로그래밍으로 이루어진다. 

 

 예시를 들어보면 다음과 같다. 사용자가 네이버에 접속을 한다. 화면에 보이는 네이버 창은 View로 인해 다루어진다. 사용자가 웹툰을 보고 싶어 웹툰 버튼을 클릭하였다. 웹툰 버튼을 클릭하면 웹툰과 관련된 많은 양의 데이터를 Model로부터 불러와야 한다. 이렇게  View와 Model 사이에서 사용자의 요청을 분석하고 이에 맞는 데이터를 불러오는 작용 중간에서 매개하는 요소가 바로 Controller인 셈이다. 

5. Website에서의 MVC구조

1. 사용자가 웹사이트에 접속한다. (Uses)

2. Controller는 사용자가 요청한 웹페이지를 제공하기 위해서 Model에서 데이터를 호출한다. (Manipulates)

3. Model은 데이터베이스나 파일과 같은 데이터 소스를 제어한 후에 그 결과를 리턴한다.

4. Controller는 Model이 리턴한 결과를 View에 반영한다. (Updates)

5. 데이터가 반영된 VIew는 사용자에게 보여진다. (Sees)

6. 출처

https://asfirstalways.tistory.com/180

https://www.youtube.com/watch?v=AERY1ZGoYc8

https://asfirstalways.tistory.com/180

https://yngmanie.space/posts/mvc

http://developern.com/developern/2017/01/10/understanding-the-mvc-structure/

https://opentutorials.org/course/697/3828