DIMORIN BLOG

디자인 패턴

소프트웨어의 개발 방법을 공식화 한 것이다. 소수의 뛰어난 엔지니어가 해결한 문제를 다수의 엔지니어들이 처리할 수 있도록 한 규칙이면서, 구현자들 간의 커뮤니케이션의 효율성을 높이는 기법이다.

MVC

Model View Controller의 약자로 애플리케이션을 세가지의 역할로 구분한 개발 방법론이다. MVC 사용자가 Controller를 조작하면 Controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달한다.

MVC 단점

View와 Model이 서로 의존적이다.

MVVM

Model + View + ViewModel mvvm

  1. View에 입력이 들어오면 Command 패턴으로 ViewModel에 명령을 합니다.
  2. ViewModel은 필요한 데이터를 Model에 요청합니다.
  3. Model은 ViewModel에 필요한 데이터를 응답합니다.
  4. ViewModel은 응답 받은 데이터를 가공해서 저장합니다.
  5. View는 ViewModel과의 Data Binding으로 인해 자동으로 갱신됩니다.
const h1 = document.createElement('h1');
document.body.appendChild(h1);
const viewModel = {};
let model = '';
Object.defineProperty(viewModel, 'model',{
    get(){return model;},
    set(val){
        model = val;
        h1.innerHTML = model;
    }
});

viewModel.model = 'hello world';
viewModel.model = 'chris';

← npm →