우아한테크코스 3기 프리코스 최종 미션(6) - View

화면을 구현하기 앞서 각 화면 컴포넌트들의 최상위 부모 객체를 만들어야 한다.

화면에서 각 컴포넌트들을 분리하고 MainController에서 이벤트를 처리하는데 메소드를 재사용하고 유지보수를 위해 View.js 부모객체를 만든다.

 

- View 클래스를 살펴보면 이벤트 발생시 init(el)메소드가 해당 element를 파라미터 값으로 받아서 초기화 한다.

- on메소드는 해당 요소에 대한 이벤트 리스너를 설정한다.

- emit메소드는 해당 이벤트가 발생할 때 원하는 이벤트를 실행시켜서 데이터를 보내를 수 있다.

 

나름 설명을 한다고 글을 섰지만 설명하는게 어렵다...다음 글들을 포스팅하면서 어떻게 사용되는지 설명하도록 하겠습니다.

View.js

export default class View {
  constructor() {
    this.tag = "[View]";
  }

  init(el) {
    if (!el) throw el;
    this.el = el;
    return this;
  }

  on(event, handler) {
    this.el.addEventListener(event, handler);
    return this;
  }

  emit(event, data) {
    const evt = new CustomEvent(event, { detail: data });
    this.el.dispatchEvent(evt);
    return this;
  }
}

github.com/intae92/woowacourse-precourse/commit/801ce5905370b6571cd52d18875239dbfcd61634

feat: View 설정 · intae92/woowacourse-precourse@801ce59

 

참고

im-developer.tistory.com/190

[JS/CustomEvent] 자바스크립트, 커스텀 이벤트 생성하기