MVC 패턴은 디자인패턴으로 UI와 비지니스 로직을 분리하는데에 중점을 두고 있다. 그렇다면 디자인 패턴이란 무엇일까
디자인 패턴은
소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책 - 위키백과
이라고 한다.
즉, 해봤더니 이게 좋더라. 이거다.
디자인 패턴의 의미와 상통하게도.. 나는 남들이 좋다고 해서 쓰게 되었다.
나는 MVC패턴이란 참고용이라고 생각하고 MVC패턴에 대해 표면적인 이해만 구글링을 통해 진행하고 MVC 패턴이라고 주장하는 코드를 작성해왔다. 나의 지금까지의 MVC패턴에 대한 생각은
model
: 데이터view
: UI controller
: 이벤트 처리 이뿐이었다. 나는 MVC패턴이 좋다는 이야기를 들었고 그 이야기때문에 MVC패턴을 사용했는데 정작(?) 어떻게 써야하는지 몰랐다. 이전까지의 코드에서는 controller
에서 거의 모든 일을 했다고 해도 무방했다.
페어프로그래밍을 진행하면서 우리도 어느 순간부터 무의식적으로 MVC 패턴으로 코드를 작성하기 시작했고, 우리가 생각하는 MVC패턴이란 무엇이라고 생각하는지 정하고 그 패턴대로 코드 작성을 진행하기로 했다.
우리가 생각한 MVC패턴은 아래와 같다.
구글링과 갖고 있는 지식을 통해 작성해보았는데, 이전 미션에서 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),
);
...
}
Controller
에서는 on
을 통해 View
의 신호를 알아챈다. 이벤트가 발생했음을 감지하고 로또를 구매하는 로직을 실행한다. 이번에 Subscribe하는 형식의 코드를 작성해보면서 나의 MVC패턴에 대한 이해가 조금...아주 조금 깊어진 것 같다. 원래는 발톱담구기였다면, 지금은 발담구기 정도?
아직 어떤 코드가 좋은
코드인지 나는 전혀 모른다. 지금의 생각은 이게 MVC 패턴이 맞나요?
라는 질문을 하지 않는 사람이 되자는.. 결론.🤣
✚
언제 들어도 두근거리는 칭찬..페어덕에 듣게 되었다..
"언제 들어도 두근거리는 칭찬..페어덕에 듣게 되었다.." 박제 :D