은돌1113 2023. 3. 27. 09:17

내 머릿속에 MVC 패턴은 백엔드에서 사용하는 아키텍처로써 Model, View, Controller가 있다고 알고 있었는 데, 막연히 Spring과 같은 백엔드에서만 사용하는 것이다라고 생각하며 3년이라는 시간이 지나자 이제는 MVC 패턴이 프런트에서도 사용되고 있다는 것을 알게 되어 새로운 마음으로 MVC 패턴에 대해 알아보았다.

 

 

프론트엔드의 MVC

아키텍처와 디자인 패턴 > 내가 건축가가 되어서 직접 집을 짓는다고 생각해보자. 눈에 보이는 집의 구조는 같은 집일지라도 단독주택으로 집을 짓는 것과, 빌라로 집을 짓는 것과, 고층 건물로

velog.io

위 글에서 MVC 패턴에 대한 설명과 프론트에서는 MVVM, MV*과 같은 MVC에서 파생된 개념들도 잘 정리되어 있기 때문에 한번 읽어보면 개념 잡는 데 많은 도움이 될 것 같다.

 

  프론트 백엔드
M(Model) Ajax를 통해 받은 데이터와
그 데이터를 통해 변경될 수 있는 상태
데이터베이스
V(View) HTML, CSS로 만들어진 화면 HTML, CSS, JavaScript
C(Controller) JavaScript가 View에서 호출되는 이벤트를 통해 서버에 데이터를 전달하고,
다시 전달받은 데이터로 Model을 변경하는 역할
라우터를 통해 데이터를 처리하고
새로운 HTML 파일을 만들어서 보여주는 영역

 

위 블로그를 보면서 핵심이라고 생각했던 부분

  • 개발은 집 짓기와 비슷하다.
    : 어떤 집을 짓느냐에 따라 내부 설계가 다르고, 개발도 어떤 규모의 프로젝트를 진행하느냐에 따라 내부 설계를 달리 해야 한다.
  • MVC는 디자인 패턴을 따르는 아키텍처 중 하나이다.
    : 원래 웹개발 외에 다른 소프트웨어 설계에도 등장하는 개념인데, 요즘은 주로 웹개발에 사용되는 개념이다.
  • MVC 외에도 MVVM, MVP 등과 같은 다양한 아키텍처들이 존재하고, 대부분 MVC에서 유래되거나 발전된 형태이다.
    고로 MVC 패턴을 알아두면 다른 패턴들도 쉽게 접할 수 있을 것이다.