자바스크립트 첫 과제를 진행하는데
버튼을 눌렀을 때 입력받은 input 값과 user의 값이 일치하면 다음 페이지로 넘어가게 하는 기능을 구현하는 과정에서
웹 서버에서 요청된 URL에 대해 HTTP 메서드를 허용하지 않을 때 발생 하는 405 에러가 발생했다.

🤔문제발생

처음엔 로직에 문제가 있는 줄 알고 콘솔창에 직접 함수를 입력하여 구동시켰더니 정상 작동을 했다.
원인을 찾기 위해 구글링을 했지만 나는 서버와 협업해서 하는 것이 아니기 때문에 검색된 결과들은 나에게 별 도움이 되지 않았다.

🧐원인발견

계속 문제가 무엇인지 찾다보니
<form action="URL" class="login-form" method="POST">에서
Http request를 시도했는데 정확한 서버도 아닌 있지도 않은 서버에게 요청을 해서 발생한 문제라는 걸 찾아냈다!!

😊문제해결

이제 문제를 찾았으니 js 함수를 수정해봤다.

//수정 전
function checkUser(checkId, checkPw) {
  if ((checkId.value === user.id) && (checkPw.value === user.pw)) {
    window.location.href = 'welcome.html';
  }else if(checkId.value.length === 0 || checkPw.value.length === 0) {
    throw new Error('아이디와 비밀번호는 필수 입력값입니다.. ')
  }
  else {
    throw new Error('찾을 수 없는 회원입니다')
  }
}
loginButton.addEventListener('click', ()=> {
  checkUser(emailInput, passwordInput);
})

로그인 버튼을 찾아와서 클릭 이벤트가 발생했을때 checkUser 함수를 실행하는 알고리즘을 작성했다.

---

// 수정 후
form.addEventListener('submit', (event) => {
  event.preventDefault();
  checkUser(emailInput, passwordInput);
});

기존 코드는 지운 후
1. loginButton이 아닌 form태그에 이벤트 함수를 작성해주었다.

2. 기존의 click이 아닌 폼의 제출을 감지하고 처리하기 위해서는 submit 이벤트를 사용해야 하기 때문에 submit으로 수정해주었다.

3. event.preventDefault();
어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정

• form의 경우, 제출(submit) 버튼을 클릭하면 기본적으로 폼 데이터를 서버로 전송하고 페이지를 다시 로드하는 동작이 수행되는데,
  지금 프로젝트에서는 서버가 없기 때문에 이 동작을 막아주기 위해 추가해줬다.
  

이렇게 변경한 후 다시 로그인 버튼을 눌러보면
다음 페이지로 잘 넘어가는 것을 확인할 수 있다!!