📝 이메일 중복 체크 기능

💡 VS Code

🔎 signUp.js

...
// 이메일 유효성 검사
const memberEmail = document.getElementById("memberEmail");
const emailMessage = document.querySelector("#emailMessage");

memberEmail.addEventListener("input", function(){
    
    // 입력이 되지 않은 경우
    if(memberEmail.value.trim().length == 0){
        emailMessage.innerText = "메일을 받을 수 있는 이메일을 입력해 주세요.";
        emailMessage.classList.remove("confirm", "error");

        checkObj.memberEmail = false; // 유효 X 기록
        return;
    } 

    // 입력된 경우
    const regExp = /^[\w\-\_]{4,}@[\w\-\_]+(\.\w+){1,3}$/;

    if(regExp.test(memberEmail.value)){ // 유효한 경우

        // ************* 이메일 중복 검사(ajax) 진행 예정 **************
        
        // $.ajax( {K:V , K:V} ); // jQuery ajax 기본 형태

        // 입력된 이메일 == memberEmail.value
        $.ajax({
            url : "emailDupCheck",
            // 필수 속성 url
            // 현재 주소 : /community/member/signUp
            // 상대 경로 : /community/member/emailDupCheck

            data : { "memberEmail" : memberEmail.value },
            // data속성 : 비동기 통신 시 서버로 전달할 값을 작성(JS 객체 형식)
            // -> 비동기 통신 시 input에 입력된 값을
            //    "memberEmail" 이라는 key 값(파라미터)으로 전달

            type : "GET", // 데이터 전달 방식 type

            success : function(result){
                // 비동기 통신(ajax)가 오류 없이 요청/응답 성공한 경우

                // 매개변수 result : servlet에서 출력된 result 값이 담겨 있음
                // console.log(result);
                if(result == 1){ // 중복 O

                    emailMessage.innerText = "이미 사용 중인 이메일입니다.";
                    emailMessage.classList.add("error");
                    emailMessage.classList.remove("confirm");
            
                    checkObj.memberEmail = false; // 유효 X 기록

                } else { // 중복 X

                    emailMessage.innerText = "사용 가능한 이메일입니다.";
                    emailMessage.classList.add("confirm");
                    emailMessage.classList.remove("error");
            
                    checkObj.memberEmail = true; // 유효 O 기록
                }

            },

            error : function(){
                // 비동기 통신(ajax) 중 오류가 발생한 경우
                console.log("에러 발생");

            }
        });

    }else{ // 유효하지 않은 경우
        emailMessage.innerText = "이메일 형식이 유효하지 않습니다."
        emailMessage.classList.add("error");
        emailMessage.classList.remove("confirm");
        checkObj.memberEmail = false; // 유효 X 기록

    } 
})
...

---

💡 Eclipse

🔎 EmailDupCheckServlet.java

package edu.kh.community.member.controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import edu.kh.community.member.model.service.MemberService;

@WebServlet("/member/emailDupCheck")
public class EmailDupCheckServlet extends HttpServlet {
	
	// 이메일 중복 검사(비동기 통신)
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		// 비동기 통신으로 전달된 파라미터(date 속성의 key값) 얻어오기
		
		String memberEmail = req.getParameter("memberEmail");
		
		try {
			
			// 이메일 중복 검사 서비스 호출 후 결과 반환 받기
			
			MemberService service = new MemberService();
			
			int result = service.emailDupCheck(memberEmail);
			
			// 보통 동기식 코드 작성 시
			// forward 또는 redirect를 이용해서 새로운 페이지가 보이게 동작함
			
			// *** 비동기 통신 시 응답은 화면이 아닌 데이터(String, XML, JSON, int, ...)
			// -> 응답용 스트림을 이용해서 단순 데이터 전달만 하면 된다.
			
			resp.getWriter().print(result);
			// 응답 스트림을 이용해서 result를 출력
			
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
}

---

🔎 MemberService.java

...
	/** 이메일 중복 검사 Service
	 * @param memberEmail
	 * @return result
	 * @throws Exception
	 */
	public int emailDupCheck(String memberEmail) throws Exception{
		
		Connection conn = getConnection();
		
		int result = dao.emailDupCheck(conn, memberEmail);
		
		close(conn);
		
		return result;
	}
...

---

🔎 MemberDAO.java

...
	/** 이메일 중복 검사 DAO
	 * @param conn
	 * @param memberEmail
	 * @return result
	 * @throws Exception
	 */
	public int emailDupCheck(Connection conn, String memberEmail) throws Exception {
		
		int result = 0; // 결과 저장용 변수
		
		try {
			// SQL 얻어오기
			String sql = prop.getProperty("emailDupCheck");
			
			// pstmt 생성
			pstmt = conn.prepareStatement(sql);
			
			// 위치홀더에 알맞은 값 세팅
			pstmt.setString(1, memberEmail);
			
			// SQL(SELECT) 수행 후 결과 반환 받기
			rs = pstmt.executeQuery();
			
			// rs.next()로 조회 결과를 확인
			if(rs.next()) {
				result = rs.getInt(1); // 1번 컬럼 결과를 result에 대입
			}
			
		} finally {
			close(rs);
			close(pstmt);
		}

		return result;
	}
...

---

🔎 member-sql.xml

...
	<!-- 이메일 중복 검사 -->
	<entry key="emailDupCheck">
		SELECT COUNT(*) FROM MEMBER
		WHERE MEMBER_EMAIL = ?
		AND SECESSION_FL = 'N'
	</entry>
...

---