페어프로그래밍과 MVC패턴

movie·2022년 2월 27일

wtc

MVC 패턴은 왜 쓰게 되었는가? 🤔

MVC 패턴은 디자인패턴으로 UI와 비지니스 로직을 분리하는데에 중점을 두고 있다. 그렇다면 디자인 패턴이란 무엇일까

디자인 패턴은

소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책 - 위키백과

이라고 한다.

즉, 해봤더니 이게 좋더라. 이거다.

나는 MVC 패턴을 왜 쓰게 되었는가?

디자인 패턴의 의미와 상통하게도.. 나는 남들이 좋다고 해서 쓰게 되었다.

완벽하게 MVC 패턴을 사용하고 있었는가?

나는 MVC패턴이란 참고용이라고 생각하고 MVC패턴에 대해 표면적인 이해만 구글링을 통해 진행하고 MVC 패턴이라고 주장하는 코드를 작성해왔다. 나의 지금까지의 MVC패턴에 대한 생각은

model : 데이터
view : UI
controller : 이벤트 처리

이뿐이었다. 나는 MVC패턴이 좋다는 이야기를 들었고 그 이야기때문에 MVC패턴을 사용했는데 정작(?) 어떻게 써야하는지 몰랐다. 이전까지의 코드에서는 controller에서 거의 모든 일을 했다고 해도 무방했다.

페어와의 MVC 토론(?)

페어프로그래밍을 진행하면서 우리도 어느 순간부터 무의식적으로 MVC 패턴으로 코드를 작성하기 시작했고, 우리가 생각하는 MVC패턴이란 무엇이라고 생각하는지 정하고 그 패턴대로 코드 작성을 진행하기로 했다.

우리가 생각한 MVC패턴은 아래와 같다.

Model

데이터를 관리한다.
데이터를 수정하는 메서드를 가지고 있다.
캡슐화되어 있다.
View와 Controller에 의존하지 않는다.

View

사용자가 보는 화면을 관리한다.
데이터를 DOM에 출력한다.
사용자가 발생한 이벤트를 처리한다.
이벤트 발생을 인지한다.
이벤트 발생을 컨트롤러에게 알린다.
데이터를 가지고 있으면 안된다.
Model과 Controller에 의존하지 않는다.

Controller

서로 분리된 Model과 View를 연결한다.
View의 이벤트 발생 여부가 전달되면 이벤트에 따라 Model이 데이터를 관리하도록 시킨다.
Model이 갖고 있는 데이터를 View에게 전달하여 화면에 출력하도록 시킨다.

구글링과 갖고 있는 지식을 통해 작성해보았는데, 이전 미션에서 MVC패턴이라고 주장하던 코드는 MVC패턴이 전혀 아니였다는 생각이 들었다. 지금까지 View가 해야했던 일을 Controller가 죄다 하고 있었고, 의존하지 않아야하는 요소끼리 의존하고 있었다.

기존 나의 코드

자동차 경주 미션에서의 Controller 중 하나인 UserManager를 참고하면 Controller라고 만들어 놓은 class임에도 불구하고 이벤트를 이 곳에서 바로 감지하고 입력을 바로 가져와 처리를 해주고 있다. 사실상 Controller에서 모든 일을 하고 있었다.

이번 미션에서 바뀐 나의 코드

이번 미션에서는 emit과 on을 사용해서 View에서 이벤트를 감지하고 이벤트가 감지되었을 때 controller에게 알리는 식의 코드를 작성했다. (멋진 페어의 갓아이디어..👏)

즉, 이벤트를 Subscribe하는 형식의 코드를 작성했다.

export const emit = (target, eventName, detail) => {
  const event = new CustomEvent(eventName, { detail });
  target.dispatchEvent(event);
};

export const on = (target, eventName, handler) => {
  target.addEventListener(eventName, handler);
};

emit : 이벤트를 발신한다.
on : 이벤트를 수신한다.

이를 구현하기 위해 CustomEvent를 사용했는데, 임의로 만든 이벤트를 보내고 받는다고 생각하면된다.

// View

  bindEvents() {
    on(this.$purchaseForm, 'submit', (e) => this.handleSubmit(e));
  }

  handleSubmit(e) {
    e.preventDefault();
    const money = this.getMoneyToPurchase();
    emit(this.$purchaseForm, '@submit', { money });
  }

View에서는 진짜 이벤트를 등록하고 이벤트가 발생하면 handleSubmit함수를 통해 이벤트가 발생했음을 Controller에게 알린다. (emit - custom event)

// Controller

  subscribeViewEvents() {
    on(this.purchaseView.$purchaseForm, '@submit', (e) =>
      this.purchaseLotto(e.detail.money),
    );
    ...
  }