[TIL] MVC Design Pattern

이재훈·2020년 10월 27일
1

What I Learned Today :)

  📌 MVC pattern 

MVC pattern

Mode
View
Controller

MVC 패턴이란 Mode, View, Controller의 줄임말이고,
일련의 소프트웨어가 돌아가는 방식에 대한 하나의 패턴이다. 특정 라이브러리를 지칭하는 것이 아닌 이러한 패턴으로 만들어진 라이브러리들이나 프레임워크들이 많다고 한다.

여기서 잠깐!

🙋🏻‍♂️ 라이브러리와 프레임워크가 헷갈립니다!

  • 라이브러리(library)
      프로그래머가 개발하는데 필요한 것들을 모아둔 것으로 사용자가 편리하게 사용할 수 있는 도구들의 모음, 집합소라고 표현한다. React가 라이브러리였다는...사실..방금 알았다..!!
  • 프레임워크(frame-work)
      frame의 말 그대로 틀, 뼈대가 구성되어져 있어 나머지 살들을 붙여나가는 작업만 하면된다. ExpressJS, Spring, Ruby 등등이 프레임워크라고 한다.

다시 MVC패턴 이야기를 이어가자면!!
네이버 혹은 다음과 같은 복잡하고 동적인 웹사이트를 코드가 쓸데없이 길어져 난해해지는 것을 방지하고자 효율적으로 특정 기준으로 분리, 모듈화를 한 것을 말한다.

그렇다면 Mode, View, Controller의 각 역할은 무엇일까?


위의 사진과 같이 실생활로 예를 들자면 이렇게 표현할 수 있다.

  • Model: 식품창고 관리, 조리
  • View: 주방장이 내온 음식을 플레이팅하는 직원
  • Controller: 주문, 서빙하는 홀 직원

다시 정리하자면 요렇게,

  • Model
    데이터에 관련된 것으로, 데이터베이스의 정보들을 지정, 저장, 불러오는 역할. 따라서 database와 관계를 가지며 database로부터 받아온 정보를 controller로 던져준다.

  • View
    말 그대로 눈에 보여지는 것을 말한다.
    Controller와만 소통한다.
    사용자의 특정 액션이나 이벤트를 전달한다던지, Controller에게 받아온 값을 사용자에게 볼 수 있도록 모니터로 보여지는 화면을 구성한다던지 등의 기능을 한다.
    View는 그저 그릴 뿐!
      ex) CSS, HTML

  • Controller
    실질적으로 프로그래밍이 많이 이루어지는 부분.
    사용자의 요청을 직접 받아 그 요청에 대한 것을 model에게 물어보거나 model에게 해당 정보등을 받는 역할을 한다.

  또한 사용자에게 직접 요청을 받은거라 model에게 요청을 하기 전에 model이 알아들을 수 있도록 일련의 가공과정을 거칠 수 있고, 그 가공처리된 요청으로 모델은 데이터를 가지고와 controller에게 반환하게 한다.
그 model로부터 받아온 정보를 사용자가 눈으로 볼 수 있게 해줘야하니 view로 던지는데 이 때도 view가 읽을 수 있도록 한번 혹은 여러번의 가공처리를 한 후 던져준다. (JSON.parse라던지 등..)

아래와 같이 VScode로 보면 디렉토리가 나눠지는데 리액트에서 컴포넌트 나눴던 것처럼 이 역시도 기능별로 역할 별로 디렉토리와 .js파일을 나눈 것을 확인할 수 있다.

  즉, MVC 패턴은 어떤 서비스들이 돌아가기 위해 어떤 과정과 어떤 처리들이 필요한데, 그런 처리들을 각 기능별로 나눠서 Model은 모델 역할, Controller는 컨트롤러 역할, View는 뷰 역할 등 각 역할에 충실하고 있게 하는 것이다.
  즉 하나의 코드베이스에서 모든 것들을 하는 것이 아니라, 정돈되고 의도된 코드들을 특정 역할에서 할 수 있다는 것이 큰 특징이다.

  이렇게 역할들이 나눠져 가독성 및 관리성 등 퀄리티가 높아질 뿐만 아니라, 오류가 발생하면 해당 오류를 발생한 부분을 쉽게 찾을 수 있는 등 유지보수 또한 편하다고 한다.



⭐️  ORM - Sequelize 포스트 바로가기







[참고]
얄팍한 코딩사전
https://mangkyu.tistory.com/4

[좀 더 읽어보기]
https://blog.coderifleman.com/2015/06/19/mvc-does-not-scale-use-flux-instead/

profile
코딩에서 인생을 배우다.

0개의 댓글

관련 채용 정보