[웹] MVC 패턴

MVC는 Model View Controller 의 약자로서 프로그래밍을

좀 더 구조적으로, 체계적으로 할 수 있도록 하는 접근법 중 하나이다.

이번 정리에서는 웹 개발을 하는데에 있어서

이러한 MVC구조가 어떻게 적용되는지를 정리하려고 한다.

 

1. 정적 웹과 동적 웹

MVC구조로 개발되는 웹 사이트는 대부분 동적 웹사이트라고 할 수 있다.

따라서, 정적 웹과 동적 웹을 먼저 구분해보겠다.

먼저 정적 웹사이트란 언제 접속해도 같은 리소스를 건네주는 웹사이트를 말한다.

미리 만들어 놓은 html, css, javascript 파일들을 클라이언트의 브라우저에 전달해 주는 웹사이트라고 생각하면 되겠다.

이때, '들어갈 때마다 매번 같은 화면이 보이는게 정적 웹사이트다'라고 오해하면 안된다.

(참고했던 유튜브 영상에서 내가 오해했던 부분을 콕 찝어서 지적해 주셨다.)

현재 시간과 날짜를 보여주는 페이지 또는 랜덤으로 다양한 화면을 보여주는 페이지 등은 자바스크립트로 구현된 정적 웹페이다.

이것이 가능한 이유는 클라이언트의 브라우저가 자바스크립트 코드를 이해할 수 있기 때문이다.

정리하자면 정적 웹사이트는 접속시마다 매번 같은 화면이 보이는 것이 아니라,

접속할때마다 받게되는 html, css, javascript 코드들과 이미지, 동영상 파일등이 항상 같은지가 기준이 된다.

코드에 따라 보여지는 화면은 달라 질 수 있다.

 

반면, 동적 웹사이트는 사용중에 서버에서 코드를 가공하여 내어주는 작업이 있는 사이트이다.

가장 대표적인 예로는 댓글 기능이 있는 블로그이다. 

댓글이 작성되는 순간 서버의 데이터베이스에 저장이되고, 서버는 새로 달린 댓글이 웹 페이지에 적용되도록 코드를 수정하여 클라이언트에게 내어준다. 이러한 페이지가 정적으로 만들어 진다면 개발자가 새로 달린 댓글을 직접 코드에 작성해 주어야한다. 생각만해도 끔찍하다.

 

MVC구조는 위와같이 서버가 동작하는 동적 웹페이지를 개발하는데에 사용되는 패턴이다.

 

2. MVC의 역할

MVC패턴은 애플리케이션을 3가지 역할로 구분하여 개발하는 방법론이다.

여기서, MVC의 Model View Controller가 각각 어떠한 역할을 하는지에 대해 정리해 보겠다.

• Model : 도메인 객체 또는 DTO로 화면에 전달하거나 화면에서 전달 받은 데이터를 담고 있는 객체이다. 데이터 베이스와 연관된 부분이라고 생각하면 쉽게 이해할 수 있을 것 같다.
• View : View는 데이터를 보여주는 역할을 한다. HTML, JSP, thymeleaf등의 코드들을 생각하면 되겠다.
• Controller : Controller는 사용자 입력을 받아 모델 객체의 데이터를 변경하거나 뷰에 전달하는 역할을 한다. 컨트롤러는 Model과 View사이에서 데이터를 주고받으며 전체적인 흐름을 조절하는 역할을 한다.

각각의 역할을 정리하면서, 이것을 제대로 이해하기 위해서는 직접 MVC구조를 적용한 개발을 해보는 수밖에 없다는 생각이 들었다.

그래도 좀 더 이해를 돕고자, 예시를 정리해 보기로 하였다.

사용자가 로그인을 하기 위해 아이디와 비밀번호를 입력하여 로그인 버튼을 눌렀다고 생각해보자.

1. 사용자가 원하는 기능을 처리하기 위한 모든 요청이 컨트롤러에게 전달된다.

2. 컨트롤러는 아이디와 비밀번호를 상태로 갖는 User라는 모델을 사용한다.

3. 모델은 해당 아이디와 비밀번호가 유효한지 데이터베이스에 접근하여 로직을 처리 하고, 그 결과를 컨트롤러에게 전달해준다.

4. 컨트롤러는 전달받은 결과를 사용자에게 보여주기 위한 뷰를 선택한다.

5. 선택된 뷰는 컨트롤러에게 받은 데이터를 알맞은 결과 화면틀에 담아서 사용자에게 보여준다.

전체 적인 흐름은 위와 같다.(정리하면서도 이해가 잘 가지 않았지만 직접 간단한 예제를 따라해보면 금방 이해가 갔다...)

아는 것을 말로 풀어 쓴다는건 정말 어려운 것 같다...

 

아무튼 한마디로 정리하자면

Model은 데이터베이스와 관련된 로직을 처리할 때 사용되는 부분. (이때 사용되는 DTO또는 VO는 따로 정리해야겠다.)

View는 사용자에게 보여줄 결과 화면을 처리하는 부분.

Controller는 사용자의 요청에 따른 응답을 만들어 내기 위해 전체 흐름을 통제하는 부분.

이라고 해두고 넘어가겠다. 이후에 더 나은 정리로 업데이트 해야겠다.

 

3. MVC의 장점

그렇다면 위와 같이 복잡하게 파트를 나누어 개발하는 것의 장점은 무엇일까?

기존의 모델1 개발방식에 대해 생각해 보면 확실하게 깨달을 수 있을 것이다.

모델1 개발방식은 하나의 파일에 model, view , controller코드가 모두 담겨있는 형태이다.

장점은 html안에 자바코드와 각종 태그를 모두 넣어 개발하기 때문에 개발속도가 매우 빠르다는 점이다.

하지만, 여러 언어를 한 파일에 넣어 관리하기 때문에 유지보수가 굉장히 힘들다.

여러 글에서도 계속해서 말하지만, 이제는 유지보수가 용이하게 코드를 작성하는 역량이 매우 중요하다고 생각한다.

이러한 측면에서 모델2로 불리우는 MVC구조는 최적화 되어있다.

각 기능별로 모듈화를 하여 파일이 따로 존재하는 것이다. 

이렇게 하면 우선 동시다발적인 개발이 가능해진다.

파일이 나누어져 있기 때문에 프론트엔드 개발자와 백엔드 개발자가 독립적으로 개발을 진행할 수 있게 되는것이다.

또한 뷰, 모델, 컨트롤러가 각각 독립적이기 때문에 서로 낮은 의존도를 갖게 할 수 있고

이것은 책임이 명확히 구분되는 것을 의미하므로 어떠한 오류가 발생했을 때 잘못된 부분을 찾기 쉽다.(코드를 수정하는데에도 용이하다.)

결론적으로, MVC구조로 코드를 작성하면 코드의 재사용성이 높아질 뿐만 아니라 협업시에도 커뮤니케이션을 쉽게 할 수 있도록 도와준다.

 

4. 스프링에서의 MVC

MVC 패턴에 대해 글과 강의로 접했을때, 감은 잡았지만 찝찝한 느낌이 강했다.

마치 주입식 교육처럼 각각의 특징을 외우게 되는 느낌이었기 때문이다.

나는 내가 사용하는 자바의 스프링 프레임워크를 이용하여 간단한 개발을 해보며 이해를 더했다. 

직접 개발에 적용해보니, 훨씬 이해가 쉽고 필요성을 더 느낄 수 있었다.

더 깊은 이해를 기반으로 스프링 프레임워크에서의 MVC 흐름에 대해 간단히 정리하게 되었다. 

스프링 프레임워크 MVC 구조

1)     DispatcherServlet은 요청받은걸. HandlerMapping한테 보내준다.

2)     HandlerMapping은 해당 요청을 해결할 controller를 선택해서 DispatcherServlet에게 보내준다.

3)     DispatcherServlet이 HandlerAdapter에게 해당 Controller를 알려준다.

4)     HandlerAdapter는 해당 controller의 메소드중 요청을 처리하기에 알맞은 메소드를 정해서 데이터를 처리하게하고(service와 dao등을 이용하여 데이터 처리) 결과가 담긴. model과 view를  DispatcherServlet에게 넘겨준다.

5)     DispatcherServlet은 ViewResolver에게 view를 표현하기 적합한 jsp페이지를 선택해달라고 요청한다.

6)     ViewResolver는 적합한 jsp페이지를 알려준다.

7)     DispatcherServlet은 해당 jsp 페이지에 응답을 생성하고

8)     생성된 응답은 클라이언트에게 보내진다. (jsp형태)

 

5. 그 외...

MVC패턴을 적용하여 개발을 하다 보면, Model View Controller외에도 Service나 DAO, DTO, VO등에 대한 개념도 접하게 된다.

MVC와 전혀다른 개념이라기 보다는 그 흐름 속에서 사용되는 작은 개념정도로 생각하면 될 것같다.

이에 대해서는 따로 정리를 해봐야겠다.