Spring(회원가입 - 이메일 중복 체크)

회원가입 창이다.

 

회원가입 기능을 구현해보자

 

우선 미리 만들어놓은 js에 ajax를 만들어놨다. ajax를 이용하여 유효성 검사를 하는 컨트롤러들을 만들것이고 유효성 검사를 통과하게 되면 js에서  만들어놓은 checkObj 객체에서 모두 true를 반환받으면 회원가입이 되게끔 만들어보겠다. 

 

먼저 이메일 중복 검사부터 시작한다 참고로 이메일 인증은 구현하지 않을 예정이다.

 

MemberController 클래스로 가자

 

	//public String emailDupCheck(@RequestParam("memberEmail") String memberEmail) 생략 가능 ajax의 data와 변수명 같을경우만
	public String emailDupCheck(String memberEmail) {
		
		int result = service.emailDupCheck(memberEmail);
        
        return result
	}

다음은 서비스 인터페이스로 넘어가서

 

public abstract int emailDupCheck();

만들어준뒤

 

ServiceImpl 클래스로 넘어가자

// 이메일 중복검사 서비스
	@Override
	public int emailDupCheck(String memberEmail) {


		return dao.emailDupCheck(memberEmail);
	}

 

마지막으로 DAO로 넘어가서 코드들을 마저 작성해주자

public int emailDupCheck(String memberEmail) {

		return sqlSession.selectOne("memberMapper.emailDupCheck", memberEmail);
	}

코드들이 상당히 간단하다.

그런데 컴파일 에러가 하나 생긴다.

다시 MemberController 클래스로 넘어가보면

 

return result 구문을 보면 빨간줄이 뜰것이다. 이유는 emailDupCheck은 String인데 result는 int이기 때문에

에러가 나는것이다.

 

이때 @ResponseBody를 사용해준다

이유는

* 컨트롤러에서 반환되는 값은 forward 또는 redirect를 위한 경로인 경우가 일반적이다. 그 결과 반환되는 값은

경로로 인식된다.

그래서 이를 해결하기 위해 @ResponseBody가 존재한다.

이 ResponseBody는 반환되는 값을 응답의 몸통에 추가하여 이전 요청 주소로 돌아가는 기능을 한다.

=> 컨트롤러에서 반환되는 값이 경로가 아닌 "값 자체"로 인식되게 된다.

 

그래서 어노테이션을 추가하여 코드를 다시 작성하면

@ResponseBody // ajax 응답 시 사용
	@GetMapping("/emailDupCheck")
	//public String emailDupCheck(@RequestParam("memberEmail") String memberEmail) 생략 가능 ajax의 data와 변수명 같을경우만
	public int emailDupCheck(String memberEmail) {
    	
        int result = service.emailDupCheck;
        
		return service.emailDupCheck(memberEmail);
	}

더욱 간단한게 코드를 작성하면

@ResponseBody
@GetMapping("/emailDupCheck")
public int emailDupCheck(String memberEmail){

	return service.emailDupCheck(memberEmail);
    }

실행해보자

 

* 이메일 형식이 유효하지 않을 때 *

* 이메일이 중복될 때 *

* 사용 가능한 이메일을 입력했을때 *

아래는 email 충복체크 JavaScript이다.

 

const memberEmail = document.getElementById("memberEmail");
const emailMessage = document.querySelector("#emailMessage");

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

    // 입력이 되지 않은 경우
    if( memberEmail.value.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
            // 현재 주소 : /comm/member/signUp
            // 상대 경로 : /comm/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.remove("confirm");
                    emailMessage.classList.add("error");
                    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 기록
    }

});

다음은 member-mapper.xml 에 있는 emailDupCheck 코드이다

<select id="emailDupCheck" parameterType="string" resultType="_int">
	   		SELECT COUNT(*) FROM MEMBER_S
	   		WHERE MEMBER_EMAIL = #{memberEmail}
	   		AND SECESSION_FL = 'N'
	   </select>

id는 DAO에 써져있듯이 emailDupCheck로 설정해주었고 파라미터 타입은 memberEmail을 가져오기 때문에 

String, resultType은 카운트 결과를 가져와 AJAX에서 result 값을 if문 실행하는 데 쓰기때문에 int로 설정해주었다.

 

 

닉네임 중복체크도 이메일체크와 똑같기 때문에 생략하도록 한다.

 

다음시간은 input 창에 정보를 입력하고 js에있는 유효성 검사를 모두 통과하면 DB에 회원정보가

저장되는 기능을 구현해본다.