MVC 패턴

nais·2021년 12월 18일
0
post-thumbnail

MVC 생겨나게된 이유

저는 어떠한 것이 생겨나게된 이유를 알게되면 그 개념이 더 잘 이해가되는 경험이 많았습니다 저의 공감 능력 덕분일까요...(?) 그래서 이러한 패턴이 생겨나게된 이유를 우선적으로 적어보고 시작하려고 합니다.

과거 많은 개발자 선배님들도 코드가 많아지고 길어질수록 파악하기도 힘들고 기능을 수정할 때 마다 대부분의 코드를 다시짜야하는 경우가 많았겠죠? 하지만 사람은 또 머리를 쓰는 동물이다보니 괜찮은게 있다면 따라서 하게 되었을 것 입니다.

이렇게 코드 구성을 하다보니 유지보수가 편하더라 하는 일정한 패턴 규칙성들이 생겨나게 되었고

이러한 패턴을 하나의 규칙으로 정해서 사용해보자하고 공식적으로 발표를 한것이라고 합니다

결론적으로

  • 유지보수가 편해지는 코드의 구성 방식(규칙)이다 !!!라고 생각하면 좋을것 같습니다.
  • 세 영역으로 나누어서 맡은 바의 역할을 처리하면 효율적이기 때문
  • 분리한 영역으로 인해 유지보수, 확장성, 유연성(클라이언트의 요구를 최소한의 비용으로 대처),중복코딩의 문제점 사라짐

MVC 패턴이란 뭘까?

👩‍🏫 Model-View-Controller 3가지로 나눈 소프트웨어 개발 방법론

출처:XESCHOOL

많은 프레임워크에 자체 적용되어 있고 우리가 이미 자연스럽게 접하고 있다고 하는데 ?

어떤 점이 적용되어있는지 살펴보고 이해해보는 시간을 가져보려고 합니다

View(화면)

HTML 과 CSS 파일로 만들어지는 결과물들을 view 라고 볼수 있습니다. 즉 사용자에게 데이터를 보여주고 동적 데이터를 수집

Model(데이터 & 데이터 Mutator )

처음에 todo list 를 만들 때 저는 정보를 뿌려주고 그리기만 하는 웹 페이지를 만들었지만, 실제 우리는 화면 어딘가에 사용자가 요청한 데이터들을 뿌려주고 이 데이터들을 가공 및 변경(Mutator) 하기도 합니다. 이렇게 데이터들을 관리하는 영역을 Model 이라고 합니다

Controller(컨트롤러)

javascript가 중간에서 서버의 데이터를 받아서 화면을 바꾸고 이벤트를 처리해서 서버에 데이터를 전달하는 Controller의 역할을 수행
(이벤트 핸들러가 작동하는 부분)

동작의 순서

1) 사용자가 어플리케이션과 상호작용 action 발생
2) controller 의 이벤트 핸들러가 작동
3) controller는 model로 부터 데이터를 요구하고, 그 결과를 뷰로 전달
4) view 는 데이터를 사용자에게 보여준다


MVVM - angular, react, vue

그런데 MVC 패턴은 웹 프론트엔드라는 분야가 생기기 전에 나타난 개념이기에 백엔드에 초점이 맞춰져 있었습니다 하지만 최근 이런 프론트엔드 분야의 관점으로 생겨난 MVVM 이 있고 이를 기반으로한 프레임 워크들이 바로 angular, react, vue 입니다.

점점 기술이 진화하면서 우리가 사용하고 있는 하나의 서비스는 엄청나게 크고 복잡한 형태로 변하게 되었습니다. 때문에 MVC패턴에는 한계가 있을 수 밖에 없었습니다. 즉 모든 데이터를 서버에서 처리한다는 것은 매우 많은 서버 비용과 부담이 컸기 때문이죠.

이를 보완하기 위하여 웹 화면상에서 데이터를 처리하고 이를 바로 실시간으로 동적으로 화면의 구조를 변화시킬 수 있도록 하도록 패턴을 바꿔야 했죠. 그래서 MVVM형태가 등장하게 되었습니다.

MODEL

MVC 패턴처럼 애플리케이션에서 사용하는 데이터의 일반적인 포맷

VIEW

MVC 패턴처럼 사용자에게 데이터를 표시한다.

VIEWMODEL

뷰와 관련 모델 사이의 변화를 조정하는 뷰의 추상적인 개념이다. MVC 패턴에서 는 특수 컨트롤러의 역할이었지만 MVVM에서는 해당 뷰가 사용하는 데이터 바인딩과 공식을 뷰모델이 직접 관리

  • (react는 mvc 패턴만을 사용하다가 flux 패턴도 씁니다.(redux))
  • (react는 mvc 프레임워크는 아니고 View만 신경쓰는 라이브러리입니다. 다른 웹프레임워크와는 달리 ajax, 데이터 모델링, 라우팅 같은 것이 없습니다. 그저 뷰만 신경쓴다.)
  • 리액트는 단방향 데이터 흐름으로 데이터 변경에 관한 DOM객체만 변경해주는 체계, 데이타가 변경되면 양방향 데이터 바인딩처럼 모델 변경 > 뷰변경이 아니라 특정함수를 실행시킴으로써 DOM객체를 갱신한다고 합니다

결론

이러한 다양한 기술들을 습득하고 배워 나가는 과정이 필요할거 같다고 생각했습니다.

Reference

https://www.infragistics.com/community/blogs/b/todd_snyder/posts/mvc-or-mvp-pattern-whats-the-difference

https://velog.io/@teo/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-MV-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

profile
왜가 디폴트값인 프론트엔드 개발자

0개의 댓글