HTML 에러

form 태그로 둘러져있는 input에 빈문자열을 넣고 Button을 클릭 시
Failed to load resource: the server responded with a status of 404 (Not Found)
에러가 발생하며 localhost:3000/? 위치로 이동됨.

"javascript:void(0);" 을 form action에 추가하여 해결

<form action="javascript:void(0);">
  ...
  <input type="text" value="">
  <button>Click</button>
</form>
  

javascript:void(0) 란?

1. javascript:

해당 구문이 스크립트로 평가되고 실행됩니다.

<a href="javascript:'테스트입니다.'">클릭</a> // 테스트입니다. 가 화면에 출력
<a href="javascript:console.log('test')">클릭</a> // 'test' 가 콘솔에 출력

2. void

연산자로서 표현식을 평가하고 undefined를 반환한다.

3.

보통 a tag의 href에서 많이 사용된다.

• href="#"
• href="javascript:void(0);"
  둘 의 차이점은 #의 경우 유저의 스크롤을 맨위로 이동시키며
  void(0)은 그렇지 않다.

출처

https://stackoverflow.com/questions/1818249/form-with-no-action-and-where-enter-does-not-reload-page

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/void

https://reiphiel.tistory.com/entry/href-javascript-void-or-hash