강의 내용을 따라 했는데도 안되는 문제

예를 들어, 검색값을 입력하고 엔터를 누를 때 콘솔에 출력하는 것이나, x버튼을 누르거나 검색 결과를 완전히 지우고 난 뒤에 콘솔에 출력하는 기능을 만들 때, 분명히 강의에서 해주시는 내용대로 따라하면 콘솔에 출력되지 않는 문제가 발생하네요.

브랜치를 이동해가면서 비교해보아도 뭐를 빼먹은 것 같지는 않은데, 기능이 구현된 브랜치에서는 잘 되던 것이 기능 구현 전 브랜치에서 강의 내용을 따라 치면 안 되는 이유가 무엇인지 알 수 있을까요?

아래는 FormView3 브랜치에서 실습 내용을 따라 적은 코드 입니다.

FormView.js

import View from './View.js'

const tag = '[FormView]'

const FormView = Object.create(View)

FormView.setup = function (el) {
  this.init(el)
  this.inputEl = el.querySelector('[type=text]')
  this.resetEl = el.querySelector('[type=reset')
  this.showResetBtn(false)
  this.bindEvents()
  return this
}

FormView.showResetBtn = function (show = true) {
  this.resetEl.style.display = show ? 'block' : 'none'
}

FormView.bindEvents = function () {
  this.on('submit', e => e.preventDefault())
  this.inputEl.addEventListener('keyup', e => this.onKeyup(e))
}

FormView.onKeyup = function (e) {
  const enter = 13
  this.showResetBtn(this.inputEl.value.length)
  if (e.keyCode !== enter) return
  this.emit('@submit', { input: this.inputEl.value })
}

export default FormView

MainControllers.js

import FormView from "../views/FormView.js";

const tag = "[MainController]";

export default {
  init() {
    FormView.setup(document.querySelector("form"))
      .on('@submit', e => this.onSubmit(e.detail.input))
      .on('@reset', e => this.onResetForm())
  },

  onSubmit(input) {
    console.log(tag, 'onSubmit()', input)
  },
  
  onResetForm() {
    console.log(tag, 'onResetForm()')
  }
};

Cộng đồng Hỏi & Đáp của Inflearn