📌 회원가입 기능 구현 중 발생한 에러 & 해결 과정 정리

🐞 1) 404 Not Found – 서블릿 경로 매핑 오류

Failed to load resource: the server responded with a status of 404 ()

📌 원인

• @WebServlet("/CheckServlet") 로 매핑했는데
• AJAX 요청은 /day037/Checkservlet (대소문자, 철자 불일치)
• servlet 오타 또는 경로 앞 /day037 누락 문제
• 에러해결이 안되서 서블릿 파일 삭제후 새로만듬 한번 오류났던 이름이라그런지 해결한되서 체크서블릿에서 체크로 변경함

📌 해결

• ⭐ URL 반드시 완전히 동일하게 통일

@WebServlet("/Check")

url : "/day037/Check"

🐞 2) Tomcat 서버 시작 불가 – Duplicate Servlet Mapping

이름이 [CheckServlet]과 [controller.CheckServlet]인 두 서블릿들... 
url-pattern [/CheckServlet]에 매핑되어 있는데 이는 허용되지 않습니다.

📌 원인

• web.xml에서 <servlet-mapping> 설정 + @WebServlet 어노테이션을 중복 사용함

📌 해결

• 한 쪽만 사용
  👉 @WebServlet 주석처리함

🐞 3) 500 Internal Server Error –  MID SQL 오류

ORA-00904: "MID": invalid identifier

📌 원인

• MEMBER 테이블의 컬럼명이 MID가 아니라 실제 DB에서는 이름이 다르게 작성
• 팀플작업 테이블 컬럼명이 겹쳐서 오류났던것임  

📌 해결

• 팀플 테이블 수정함

🐞 4) JSP Script Syntax Error – 괄호 불일치

 

Uncaught SyntaxError: Unexpected token 'function' Uncaught SyntaxError: Unexpected end of input

📌 원인

• $(function(){ }), $.ajax({ }), click(){ } 닫는 괄호 구조 깨짐
• 닫는 순서가 아래 구조와 다름

📌 정답 구조

$(function(){ 
	$("#btn").on("click", function(){ 
    	$.ajax({ 
        success:function(){},
        error:function(){} 
      }); // ajax 
    }); // click 
   }); // ready

→ 괄호를 이 구조에 맞춰 완전히 정리

🐞 5) 비밀번호 체크 함수 실행 안 됨

📌 원인

• id="mpw" / id="mpw2" 지정 없이 name 값만 사용했음
• selector 오류 → 이벤트 연결 안 됨 → 반응 없음

📌 해결

<input type="password" id="mpw"> 
<input type="password" id="mpw2">

🐞 6) 회원가입 버튼 활성화 안 됨

📌 원인

• ID 체크 / PW 체크 결과를 저장하는 boolean 변수를 제대로 관리하지 않음
• 버튼 활성화 제어가 여기저기 흩어져서 충돌

📌 해결

• 모든 활성화 조건은 updateJoinBtn()에서 한 번만 처리

function updateJoinBtn(){ 
	if(midValid && mpwValid){ 
     $("#joinBtn").prop("disabled", false); 
	} else { 
   	 $("#joinBtn").prop("disabled", true); 
	} 
  }

🐞 7) UI는 성공 상태인데 버튼은 비활성화되는 문제

📌 원인

• 이름 입력 여부 검사가 없었지만
  ID/PW OK 상태라도 다른 코드에서 disabled를 강제로 적용하고 있었음

📌 해결

• 중복된 $("#joinBtn").prop() 제거하고
  오직 updateJoinBtn()만 버튼 제어하는 구조로 수정

🎯 배운 점 (중요)

• AJAX URL은 정확한 매핑 필수
• 서블릿 중복 매핑은 Tomcat 자체가 작동하지 않음
• JS 괄호 구조는 항상 ajax → click → ready 순
• prop("disabled", true|false) 중복 사용하면 상태 충돌 남