MVC 모델이란

 

 MVC 아키텍처 패턴은 복잡한 애플리케이션 개발을 훨씬 다루기 쉽도록 해준다. 그리고 많은 수의 개발자들이 동시에 일할 수 있도록 한다. 

 

내가 처음 MVC 패턴에 대해 배울때에는 관련 영역에 대해 상당히 위화감을 느꼈었다. 그리고 실제로 적용하면서 더욱 그러한 느낌을 받았다. 

 

하지만 조금 뒤로 물러나 MVC에 대해 집중해서 그것이 어떤 목적을 가지고 있는지 이해한다면 이 패턴을 실제 어플에 적용하기 훨씬 쉬워질 것이다. 

 

MVC 모델이란

MVC는 모델-뷰-컨트롤러의 줄임말로 아래와 같이 정의할 수 있다. 

• Model: 모든 데이터 로직을 가지고 있는 백엔드
• View: 프론트엔드 혹은 GUI
• Controller: 어떻게 데이터가 디스플레이되어야 할지 컨트롤하는 애플리케이션의 뇌

MVC의 개념은 데스크탑 애플리케이션 GUI 개발을 위한 방안으로 Trygve Reenskaug에 의해 처음 공개되었다.

 

오늘날 MVC 패턴은 확장가능성과 유지보수성에서 뛰어나 많은 모던 웹 어플에서 사용되고 있다.

 

왜 MVC를 사용해야 하는가?  

관심사의 분리(seperation of concern), 혹은 줄여서 SoC라고도 한다.

 

MVC 패턴은 프론트엔드와 백엔드 코드를 별도의 컴포넌트로 나눌 수 있도록 한다. 이러한 방식으로 MVC 패턴은 이 둘이 서로 상호작용하지 않고도 양 사이드 간의 데이터 변화를 만들고 관리하는 것을 더욱 쉽게 만든다.

 

하지만 말하기는 쉽지 실제 실행하기는 쉽지 않다. 특히 여러명의 개발자들이 비대한 애플리케이션을 업데이트하고 수정하며 디버깅할 때는 말이다. 

 

MVC를 어떻게 사용하는가

MVC 패턴을 자세히 설명하기 위해서 아래 실제 코드를 통해 알아보자. 

 

아래 코드는 the Car Clicker 라는 애플리케이션 코드다.

 

Model(data)

모델의 역할은 간단하게 데이터를 관리하는 것이다. 데이터가 데이터베이스, API, JSON 객체이든 모델은 이를 관리한다.

 

아래 어플에서, 모델 객체는 어플이 필요한 모든 자동차 정보를 담고 있다. 

 

또한 초기값이 null로 설정된 currentCar 변수도 관리한다. 

 

const model = {
    currentCar: null,
    cars: [
        {
            clickCount: 0,
            name: 'Coupe Maserati',
            imgSrc: 'img/black-convertible-coupe.jpg',
        },
        {
            clickCount: 0,
            name: 'Camaro SS 1LE',
            imgSrc: 'img/chevrolet-camaro.jpg',
        },
        {
            clickCount: 0,
            name: 'Dodger Charger 1970',
            imgSrc: 'img/dodge-charger.jpg',
        },
        {
            clickCount: 0,
            name: 'Ford Mustang 1966',
            imgSrc: 'img/ford-mustang.jpg',
        },
        {
            clickCount: 0,
            name: '190 SL Roadster 1962',
            imgSrc: 'img/mercedes-benz.jpg',
        },
    ],
};

 

Views (UI)

뷰의 역할은 유저가 스크린에서 무엇을 어떻게 볼 것인지 결정하는 것이다. 

 

const carListView = {
    init() {
        // store the DOM element for easy access later
        this.carListElem = document.getElementById('car-list');

        // render this view (update the DOM elements with the right values)
        this.render();
    },

    render() {
        let car;
        let elem;
        let i;
        // get the cars to be render from the controller
        const cars = controller.getCars();

        // to make sure the list is empty before rendering
        this.carListElem.innerHTML = '';

        // loop over the cars array
        for(let i = 0; i < cars.length; i++) {
            // this is the car we've currently looping over
            car = cars[i];

            // make a new car list item and set its text
            elem = document.createElement('li');
            elem.className = 'list-group-item d-flex justify-content-between lh-condensed';
            elem.style.cursor = 'pointer';
            elem.textContent = car.name;
            elem.addEventListener(
                'click',
                (function(carCopy) {
                    return function() {
                        controller.setCurrentCar(carCopy);
                        carView.render();
                    };
                })(car)
            );
            // finally, add the element to the list
            this.carListElem.appendChild(elem);
        }
    },
};

 

Controller (Brain)

컨트롤러의 역할은 유저에게 데이터를 당겨오고, 변형하고, 제공하는 것이다. 필수적으로 컨트롤러는 뷰와 모델을 이어주는 역할을 하게 된다. 

 

getter와 setter 함수를 통해, 컨트롤러는 모델로부터 데이터를 당겨와 뷰를 초기화한다. 

 

만약 뷰에 변화가 있다면, setter 함수를 통해 데이터를 변형한다.