[javascript] 프론트엔드에서의 MVC란

Yongwoo Cho·2021년 12월 18일

JavaScript TIL

TIL

목록 보기

53/98

디자인 패턴

디자인 패턴이란 소프트웨어 공학에서 사용되는 방법론입니다. 적합한 디자인 패턴의 선정은 개발하는 데 있어 협업 및 유지보수를 용이하게 합니다.

디자인 패턴에는 수많은 종류가 있는데, 그 중 2개 이상의 패턴을 결합하여 사용하는 컴파운드 패턴(Compound Pattern)이라 부릅니다. 이러한 컴파운트 패턴 중 가장 많이 쓰이는 패턴이 MVC입니다.

정적 웹 vs 동적 웹

정적 웹

웹 서버에 이미 저장된 html 문서를 클라이언트에게 전송하는 웹 페이지
사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 됨
모든 사용자는 같은 결과의 웹 페이지를 서버에 요청하고 응답 받음.
Ex) 홈페이지에 회사소개, 음식메뉴, 포트폴리오 등 내용이 변하지 않고 고정적인 페이지.

동적 웹

요청 정보를 처리한 후에 제작된 HTML 문서를 클라이언트에게 전송하는 웹 페이지
사용자는 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 됨
같은 페이지라도 사용자마다 다른 결과의 웹 페이지를 서버에 요청하고 받을 수 있음
Ex) 네이버 블로그, 티스토리, 홈페이지 게시판 등

MVC구조는 서버가 동작하는 동적 웹페이지를 개발하는데에 사용되는 패턴으로 MVC구조로 개발되는 웹 사이트는 대부분 동적 웹사이트라고 할 수 있습니다.

MVC란 ?

MVC란 Model, View, Controller의 약자로서 프로그래밍을 좀 더 구조적으로, 체계적으로 할 수 있도록 하는 접근법 중 하나로 하나의 애플리케이션을 구성할 때 그 구성요소를 세가지의 역할로 구분한 패턴입니다.

Model

애플리케이션의 정보, 데이터를 나타냅니다. 일반적으로 애플리케이션에서 필요한 데이터들과 들어오는 데이터의 추가, 관리, 삭제 등의 요청이 구현되어 있습니다.

Model의 범주는 아키텍쳐에 따라 달라지는데 javascript의 객체일수도 있고, 서버의 API로 받는 데이터일수도 있고, 서버에 있는 DB일 수도 있습니다.

View

view는 사용자에게 보여주는 화면을 담당하고 있습니다. 예를 들어 input 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타냅니다. 즉, 데이터 및 객체의 입력, 그리고 보여주는 출력을 담당하는 부분입니다.

웹 프론트에서는 대개 최종적으로 HTML과 CSS로 만들어지는 결과물을 의미합니다.

Controller

Controller는 Model과 View사이에서 데이터를 주고받으며 전체적인 흐름을 조절하는 역할을 합니다.

즉, 사용자가 데이터를 클릭하고, 수정하는 것을 포함한 "이벤트"들을 처리하는 부분을 뜻합니다. javascript의 이벤트 핸들러를 controller로 볼 수 있습니다.

사용자가 직접적으로 건드릴 수 있는 부분으로 컨트롤러를 통해 데이터의 변경이 가능합니다. controller가 데이터를 변경하면 변경된 데이터를 view로 전달해주는 것도 controller의 역할이고, model이 변경되지않는다고 해도 사용자의 요청에 따라 controller에 의해 view가 바뀔 수도 있습니다.

예시

📌 사용자가 로그인을 하기 위해 아이디와 비밀번호를 입력하여 로그인 버튼을 누른 상황

사용자가 원하는 기능을 처리하기 위한 모든 요청이 controller에게 전달됩니다.
controller는 아이디와 비밀번호를 상태로 갖는 User라는 model을 사용합니다.
model은 해당 아이디와 비밀번호가 유효한지 데이터베이스에 접근하여 로직을 처리 하고, 그 결과를 controller에게 전달해줍니다.
controller는 전달받은 결과를 사용자에게 보여주기 위한 view를 선택합니다.
선택된 view는 controller에게 받은 데이터를 알맞은 결과 화면틀에 담아서 사용자에게 보여줍니다.

왜 MVC 패턴을 사용해야 할까?

👉 사용자가 보는 페이지, 데이터처리, 그리고 이 2가지를 중간에서 제어하는 컨트롤러, 이 3가지로 구성되는 하나의 애플리케이션을 만들면 각각 맡은바에만 집중을 할 수 있게 됩니다.

각 기능별로 모듈화를 하여 파일이 따로 존재하기 때문에 우선 동시다발적인 개발이 가능해집니다. 파일이 나누어져 있기 때문에 프론트엔드 개발자와 백엔드 개발자가 독립적으로 개발을 진행할 수 있게 되는것입니다. 또한 view, model, controller가 각각 독립적이기 때문에 서로 낮은 의존도를 갖게 할 수 있고 이것은 책임이 명확히 구분되는 것을 의미하므로 어떠한 오류가 발생했을 때 잘못된 부분을 찾기 쉽습니다. (코드 수정에 용이)