📝 닉네임 중복 체크 기능

💡 VS Code

🔎 signUp.js

...
// 닉네임 유효성 검사
const memberNickname = document.getElementById("memberNickname");
const nicknameMessage = document.getElementById("nicknameMessage");

memberNickname.addEventListener("input", function(){

    // 입력되지 않은 경우
    if(memberNickname.value.trim().length == 0){
        nicknameMessage.innerText = "영어/숫자/한글 2~10글자 사이로 작성해주세요.";
        nicknameMessage.classList.remove("confirm", "error");
        checkObj.memberNickname = false; // 유효 X 기록
        return;
    }

    const regExp = /^[a-zA-Z0-9가-힣]{2,10}$/; 

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

        // ************* 닉네임 중복 검사(ajax) 진행 예정 *************

        //  /community/member/nicknameDupCheck
        $.ajax({

            url : "nicknameDupCheck" ,  // 필수 작성 속성
            data : {"memberNickname" : memberNickname.value} , // 서버로 전달할 값(파라미터)
            type : "GET" , // 데이터 전달 방식 (기본값 GET)

            success : function(res){  // 비동기 통신 성공 시 (에러 발생 X)

                // 매개변수 res : Servlet에서 응답으로 출력된 데이터가 저장 

                if(res == 0 ){ // 닉네임 중복 x
                    nicknameMessage.innerText = "사용 가능한 닉네임 입니다.";
                    nicknameMessage.classList.add("confirm");
                    nicknameMessage.classList.remove("error");
                    checkObj.memberNickname = true; // 유효 O 기록

                }else { // 닉네임 중복 o

                    nicknameMessage.innerText = "이미 사용중인 닉네임 입니다.";
                    nicknameMessage.classList.add("error");
                    nicknameMessage.classList.remove("confirm");
                    checkObj.memberNickname = false; // 유효 x 기록
                }

            },

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

    } else{
        nicknameMessage.innerText = "닉네임 형식이 유효하지 않습니다.";
        nicknameMessage.classList.add("error");
        nicknameMessage.classList.remove("confirm");
        checkObj.memberNickname = false; // 유효 X 기록
    }
});
...

---

💡 Eclipse

🔎 NicknameDupCheckServlet.java

package edu.kh.community.member.controller;

import java.io.IOException;

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;

// 닉네임 중복 검사 (AJAX)
@WebServlet("/member/nicknameDupCheck")
public class NicknameDupCheckServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		// 파라미터 얻어오기(data 속성의 값)
		String memberNickname = req.getParameter("memberNickname");
		
		try {
			MemberService service = new MemberService();
			
			// 닉네임 중복 검사 Service 호출 후 결과 반환 받기
			int result = service.nicknameDupCheck(memberNickname);

			// 동기식		-> forward 또는 redirect로 응답 (화면 전환)
			// 비동기식	-> 응답용 스트림을 이용해 데이터 전달 (데이터가 현재 화면 추가)
			resp.getWriter().print(result);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

---

🔎 MemberService.java

...
	/** 닉네임 중복 검사 Service
	 * @param memberNickname
	 * @return result
	 * @throws Exception
	 */
	public int nicknameDupCheck(String memberNickname) throws Exception{
		
		Connection conn = getConnection();
		
		int result = dao.nicknameDupCheck(conn, memberNickname);
		
		close(conn);
		
		return result;
	}
...

---

🔎 MemberDAO.java

...
	/** 닉네임 중복 검사 DAO
	 * @param conn
	 * @param memberNickname
	 * @return result
	 * @throws Exception
	 */
	public int nicknameDupCheck(Connection conn, String memberNickname) throws Exception{
		
		int result = 0; // 결과 저장용 변수
		
		try {
			
			String sql = prop.getProperty("nicknameDupCheck");
			
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setString(1, memberNickname);
			
			rs = pstmt.executeQuery();
			
			if(rs.next()) {
				result = rs.getInt(1);
			}
			
		} finally {
			close(rs);
			close(pstmt);
		}

		return result;
	}
...

---

🔎 member-sql.xml

...
	<!-- 닉네임 중복 검사 -->
	<entry key="nicknameDupCheck">
		SELECT COUNT(*) FROM MEMBER
		WHERE MEMBER_NICK = ?
		AND SECESSION_FL = 'N'
	</entry>
...

---