<h1>
  v19.1
</h1>

<input id="x" />
<pre id="y"></pre>

<script type="text/javascript">
  let debounceTimeout; // 디바운스를 위한 타이머

  document.querySelector("#x").addEventListener("keyup", (e) => {
    clearTimeout(debounceTimeout); // 기존 타이머가 있다면 취소

    debounceTimeout = setTimeout(() => {
      fetch("/message", {
        method: "POST",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: "message=" + encodeURIComponent(e.target.value)
      });
      document.querySelector("#y").textContent = e.target.value;
    }, 200); // 0.5초 후에 함수 실행
  });
</script>