0. MVC란?

Dev StoryTeller·2020년 12월 1일

spring mvc

Spring 시리즈!

목록 보기

29/33

0. 개요

웹 개발을 한다!라고 하면 빠지지 않는 개발 방법의 대명사이다.

백엔드 개발에 관심이 있다면 누구나 배웠을 것이고, 아직 입문 단계의 사람들에게는 "저것만 배우면 나도 웹개발을..!"이라며, 선망(?)의 대상이 되는 개발 방법이다.

하지만 MVC는 단지 스타트이다.
DDD, TDD, 디자인 패턴 등 듣도보도 못한 방법론들이 마구 쏟아질 것이다.

그렇다고해도 웹개발에 대해 스타트를 끊기에 좋은 방법론이 아닌가 생각한다.
(물론 필자도 이제 막 MVC에서 벗어나 허우적 거리는 중이다 :ㅇ)

그럼 웹 개발의 스타트 라인이라고 불리는, MVC에 대해 알아보자

Model1 - Model과 View란?

맨처음에 MVC를 접할 때는 Model1과 Model2에 대해 먼저 배우고 들어간다. 이중 MVC는 Model2에 해당한다.

때문에 Model1에 대해 알 필요는 없지만, Controller를 이해하는데는 아주 좋은 예시이다. 우선 구조부터 알아보자.

View
우리가 웹사이트에 들어가면, 화면을 가장 먼저 본다.
"구조도 깔끔하고, 화면이 슬라이드로 넘어간다든지" 등 여러가지 눈이 즐거운 요소들이 많다.
이러한 부분을 겉으로 보여진다고 하여 "View"라고 부른다.

Model
하지만 예쁘더라도, 근본이 없으면 소용이 없다.
이런 멋있게 만들어진 페이지들에게 제공할 데이터들이 필요하다.
"상품 가격, 영화 티켓 정보 등"이 바로 그런 예시이다.
이런 부분을 데이터의 중심이라고 해서 "Model"라고 부른다.

Model1은 이 2가지 요소로 웹이 돌아가는 구조를 말한다.
다음을 보자.
(출처: 위키피디아)
위 그림에서 "Content Source"가 Model에 해당하고,
"JSP Page"는 View에 해당한다.
Model이 데이터를 제공하고, View가 그걸 화면에 보여준다.
언뜻보면 역활이 잘 분리된 괜찮은 구조라고 할 수 있다.

Model1의 문제점

하지만 다음과 같은 상황을 생각해보자.
Model인 상품 A와 B가 있다고 하자

class ItemA {
	private int id = 1;
	private String name = "상품 A";
	private int price = 9000;
	
	public int getId() {
		return this.id;
	}
	public String getName() {
		return this.name;
	}
	public int getPrice() {
		return this.price;
	}
    ...
}

class ItemB {
	private int id = 2;
	private String name = "상품 B";
	private int price = 8000;
	
	public int getId() {
		return this.id;
	}
	public String getName() {
		return this.name;
	}
	public int getPrice() {
		return this.price;
	}
    ...
}

우리는 상품의 합이 1만원 미만, 2만원 미만, 2만원 이상이면,
각각 2천원, 1천원, 무료의 배송비를 출력하고 싶다.
그러면 다음과 같이 코드를 짜야한다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="ItemA" %>
<%@ page import="ItemB" %>

<%
    ItemA A = new ItemA();
    ItemB B = new ItemB();
    
    // 각 아이템의 가격을 가져옴
    int a_price = A.getPrice();
    int b_price = B.getPrice();
    
    // 총 가격에 따라, 배송비를 부여
    int total_price = a_price+b_price;
    int delive_price;
    
    // 0원~1만원
    if(totla_price >= 0 && total_price <= 10000) {
    	delive_price = 2000;
    }
    // 1만~2만원
    else if(total_price <= 15000) {
    	delive_price = 1000:
    }
    // 2만원 이상
    else {
    	deliv_price = 0;
    }
%>

<!DOCTYPE html>
<html>
 <head>
 <title>배송비 출력</title>
 </head>
 <body>
 	<h1>배송비는 <%=delive_price%>원 입니다!
 </body>
</html>

어떤가? 너무 지저분해 보인다.
분명 View는 화면 출력에만 집중해야 하는데,
배송비를 결정하는 로직까지 모두 담당하고 있다.

아니 로직이니까 왠지 Model이 담당해야 할 것 같다.
과연 그럴지 코드를 한번 짜보자

*/*/ Model 코드 /*/*

class ItemA {
    private int id = 1;
    private String name = "상품 A";
    private int price = 9000;
	
    public int getId() {
        return this.id;
    }
    public String getName() {
        return this.name;
    }
    public int getPrice() {
        return this.price;
    }
    
    public int calc_DelivePrice(ItemB b) {
        int total_price = a.price+b.getPrice();
        int delive_price;
    
        // 0원~1만원
        if(totla_price >= 0 && total_price <= 10000) {
    	delive_price = 2000;
        }
        // 1만~2만원
        else if(total_price <= 15000) {
    	    delive_price = 1000:
        }
        // 2만원 이상
        else {
    	    deliv_price = 0;
        }
        return delive_price;
    }
}


*/*/ View 코드 /*/*
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="ItemA" %>
<%@ page import="ItemB" %>

<%
    ItemA A = new ItemA();
    int delive_price = A.calc_DelivePrice(new ItemB());
%>

<!DOCTYPE html>
<html>
 <head>
 <title>배송비 출력</title>
 </head>
 <body>
 	<h1>배송비는 <%=delive_price%>원 입니다!
 </body>
</html>

View 코드는 원하던 대로 상당히 깔끔해졌다.
하지만 문제는 Model 코드이다.

Model은 데이터 제공만을 담당해야 한다.
그런데 저렇게 동작 메소드가 담기는 것 옳지 못하다.

그리고 Model은 가능한 변치 말아야 한다.
하지만 배송비는 항상 변할 수 있는 값이다.

배송비 전체를 1천원씩 올릴 수도 있고, 혹은 이벤트로 배송비 자체를 무료로 할 수도 있다.
그럼 그때마다 Model 코드를 수정해야 하는데, 이는 객체지향적이지 못하다.

그리고 View 코드도 좋은 것은 아니다.
외부로 드러나면 안될 Model 코드를, 어떤 Model의 무슨 메서드를 쓰는지까지 드러나 있으니 좋지 않다.

View도 아니고 Model도 아닌 저 코드,
어떻게 처리할 좋은 방법이 없을까?

MVC - Controller의 등장

이럴때 컨트롤러가 등장한다.
Controller란 이름 그대로 "제어하는 장치"로,
View와 Model이 본래 업무에 집중할 수 있도록 위와 같은
중간 작업을 담당하는 부분이다.
뭔가 허전했던 바로 "동작의 중심"을 맡는다.
구조는 다음과 같다.
(출처: 위키피디아)
딱 봐도 중간에서 열심히 뛰는 Controller를 볼 수 있다! :D

그럼 Controller로 코드가 어떻게 달라지는지 보자.

class deliveController {
    private ItemA a;
    private ItemB b;
    
    public int delivePrice(ItemB b) {
        int total_price = a.price+b.getPrice();
        int delive_price;
    
        // 0원~1만원
        if(totla_price >= 0 && total_price <= 10000) {
    	delive_price = 2000;
        }
        // 1만~2만원
        else if(total_price <= 15000) {
    	    delive_price = 1000:
        }
        // 2만원 이상
        else {
    	    deliv_price = 0;
        }
        return delive_price;
    }

애매한 부분의 코드를 Controller 클래스를 만들어 작성하였다.
그럼 이제 Model과 View 코드를 보면,

*/*/ Model 코드 /*/*

class ItemA {
    private int id = 1;
    private String name = "상품 A";
    private int price = 9000;
	
    public int getId() {
        return this.id;
    }
    public String getName() {
        return this.name;
    }
    public int getPrice() {
        return this.price;
    }
}


*/*/ View 코드 /*/*
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="ItemA" %>

<%
    DeliveController control = new DeliveController();
    
    int delive_price = control.delivePrice();
%>

<!DOCTYPE html>
<html>
 <head>
 <title>배송비 출력</title>
 </head>
 <body>
 	<h1>배송비는 <%=delive_price%>원 입니다!
 </body>
</html>