2023-05-26 TIL

broken pipe 오류

🚫 문제 발생

프론트에서 로그인 기능을 구현하는데,
자꾸 broken pipe라는 오류가 뜨면서 로그인이 안됐다.

[26/May/2023 15:28:04,268] - Broken pipe from ('127.0.0.1', 51692)

정확한 오류메세지는 위와 같다.

구글링해서 검색해본 결과,
백엔드랑 프론트랑 네트워크 문제라고 한다.

근데 다른 건 잘 통신이 됨.. 뭐가 문제지??

✅ 해결

해결했다!!!
해당 블로그에서 아이디어를 받았다.

<form>
  <h2>Login</h2>
  ...
  <!-- 로그인버튼 -->
  <div class="loginbox">
    <button onclick="handleLoginButton()">
      Log in
    </button>
  </div>
</form>

원래 코드는 이렇다.
뭐가 문제냐면!!!

button type="button" 을 명시해주지 않은 것.

💡 왜 type="button"을 명시해주어야 하는가?

버튼의 type을 submit으로 명시해주거나 아예 명시해주지 않은 경우,
버튼을 누르면 폼 제출 동작이 발생하게 되고,
onclick과 충돌하게 된다.

따라서, form 기능을 이용해 제출할 것이 아니라
버튼의 onclick 함수를 통해 제출할 것이면

반드시! button type="button" 을 명시해주어야 한다.