• [ Design Patterns ] MVC 패턴이란 ?

    2021. 7. 13.

    by. KimBangg

    탄생 배경

     

    웹 초기에는 적은 양의 코드와 페이지를 통해 구축이 가능 했습니다.

    저를 포함한 초보자 분들이 공감 할 수 있는 시점에서 말씀을 드리자면, "개발을 완성 했던 것"만으로도 기쁘고 즐거웠던 것이죠. 그만큼 현재와 비교해 그 당시의 개발은 영/유아기가 아니였을까요?  :D ( 물론 저도 그 때는  청소년..? )

     

    그렇기 때문에, 작성한 코드에 문제가 발생하거나 보수/유지를 해야 할 때는 "모든 코드를 갈아 엎는" 방식을 사용 했다고 합니다. 우리가 만든 도미노만 부셔도 ^^.. 화가 나는데 저걸 처음부터 다시 할 생각에 다시 개발자 분들이 많이 힘드셨겠죠.
      

      

     

    그래서 보수/유지가 가능한 코드를 만들고자, 다양한 방법을 적용 하였고 그 중 화면, 로직, 데이터를 분리 하는 방법인 MVC 패턴이 인기를 끌어 현재까지 전달이 되고 있습니다.

     

      

      

    MVC 패턴이란?

     

    자, 그렇다면 MVC 패턴이란 무엇일까요?  위에서 이야기 드린 것처럼, 웹 어플리케이션을  "화면 / 로직/ 데이터" 으로 분리를 하는 것인데요. 여기서 "화면은 뷰" "로직은 컨트롤러",  "데이터는 모델" 에 해당합니다.

     

    아래의 그림과 같이 동작을 할 때, 고객으로부터 요청이 들어오면

     

    1) 컨트롤러는 모델에게 데이터를 요청합니다.

    2) 모델에서 얻어온 데이터를 뷰에게 전달합니다.

    3) 뷰는 컨트롤러로 받은 내용을 정리해서 클라이언트 전달합니다.

     

    다음과 같은 3가지로 나누어 진행이 됩니다.

      

     

     

      

    MVC 패턴을 지키면서 코딩 하는 법

     

    1. Model은 Controller 와 view에 의존 하지 않아야 한다.

     

    의존이라는 말이 어렵지만, 쉽게 말해서 모델 내부에 컨트롤러와 뷰와 관련된 코드가 있으면 안됩니다.

     

    아래의 코드는 "모델" 과 관련된 코드입니다. 완전히 분리가 되어있죠 :D

      

     

    2.  View는 모델에만 의존하고, 컨트롤러에는 의존 X

      

      

     

    3. 뷰가 모델로부터 데이터를 받아 올 때, 사용자마다 다르게 보여주어야 하는 데이터만 받아온다.


    4. 컨트롤러는 뷰와 모델에 모두 의존 할 수 있다.

    'Develop > FrontEnd' 카테고리의 다른 글

    [ JavaScript ] 스코프 & 클로저 ( Scope & Closer )  (0) 2021.07.13
    CSS-in-Js 에 대해서 ARABOJA  (0) 2021.07.13
    CORS 란?  (0) 2021.07.08
    브라우저에 google.com을 검색하면 무슨 일이 생기나요? [2]  (0) 2021.07.05
    JWT란?  (0) 2021.07.04

    댓글