회원제 게시판(5)

1. 이메일 중복체크 

1-1. saveMember.html

html 파일의 일부만 들고 왔다. 

 

이메일을 작성하는 input 태그에 onkeyup 속성을 사용하여 emailCheck 함수를 호출한다. 

onkeyup 속성을 사용하면 사용자가 작성할 때마다 함수를 불러올 수 있다. (아래 1-2. 참고)

 

emailCheck 함수

1. ajax 사용

• 이를 사용하기 위해서는 head 태그에 작성해야 하는 scrpit가 있다.
• 해당 내용은 jQuery CDN 홈페이지에서 찾아서 head에 붙여넣는다.

2. 서버 측에 사용자가 입력하는 이메일을 전송

•  url : /member/email-check
• method : post 
• data : memberEmail 이름으로 사용자가 입력한 값 

3. 서버 측에서 받은 Boolen 값에 따라 사용 가능 여부를 판단한다. 

3-1. 사용가능 (res == True)

• 1. 문구 : 사용 가능한 이메일 
• 2. 색상 : 초록
• 3. 회원가입 버튼 : 활성화 

3-2. 사용 불가능 (res == False)

• 1. 문구 : 이미 사용중인 이메일 
• 2. 색상 : 빨강
• 3. 회원가입 버튼 : 비활성화 

<p>Post 방식</p>
<form action="/member/save" method="post">
    이메일: <input type="text" name="memberEmail" id="memberEmail" onkeyup="emailCheck()"> <br>
<!--    onkeyup="emailCheck()" : 입력할 때마다 emailCheck 힘수를 호출하는 속성 -->
    <span id="check-result"></span> <br>
    아이디: <input type="text" name="memberId"> <br>
    비밀번호: <input type="password" name="memberPassword"> <br>
    <input type="submit" value="회원가입" id="submitBtn" >
<!--    type="submit" 을 통해 form에 데이터를 담아서 서버에게 전송된다. -->
</form>


<script>
    function emailCheck() {
        const email = document.getElementById("memberEmail").value;
        const checkResult = document.getElementById("check-result");
        const submitBtn = document.getElementById("submitBtn");
        console.log("입력값 : " + email);

        $.ajax({
            // 요청 방식 : post, url : "email-check", data : 이메일
            type : "post",
            url : "/member/email-check",
            data: {
                "memberEmail" : email
            },
            success : function (res) {
                if(res) {
                    console.log("사용 가능한 이메일")
                    checkResult.innerHTML = "사용 가능한 이메일"
                    checkResult.style.color="green"
                    submitBtn.disabled = false
                }else {
                    console.log("이미 사용중인 이메일")
                    checkResult.innerHTML = "이미 사용중인 이메일"
                    checkResult.style.color = "red"
                    submitBtn.disabled = true
                }
            },
            error : function (err) {
                console.log("요청 실패",err);
            }
        })
    }
</script>

 

 

1-2. onkeyup 속성 특징

console을 보면 글자 하나당 출력되는 것을 볼 수 있다.

즉, 한 문자당 함수를 한번씩 호출하게 된다.

 

 

1-3. MemberController.java

emailCheck 함수 

1. 클라이언트 측에서 받아온 memberEmail 데이터를 매개변수 memberEmail로 받음 

2. Boolen 형태인 checkResult 변수를 통해 동일한 email 값 확인 

• memberService의 emailCheck 함수 호출하여 동일한 email이 존재하는지 확인 
• 존재 :  false
• 미존재 : true

3. 반환 값 : checkResult 

 

 

1-4. MemberService.java

emailCheck 함수 

1. 매개변수 memberEmail 이 DB에 이미 존재하는 값인지 확인 

2. memberEntity 변수 

• memberRepository의 findByMemberEmail 함수를 호출하여 이메일이 memberEmail 값과 동일한 Entity 반환
• 없으면 null 값 반환 

3. memberEntity 변수 값의 여부에 따라 반환 값 달라짐.

3-1. 결과 존재

• 결과가 이미 존재한다면 누군가 사용하여 사용할 수 없는 email임 
• 반환 값 : False

3-2. 결과 없음

• 결과가 없다면 사용할 수 있는 email임 
• 반환 값 : True

 

 

1-5. 결과화면 

 

 

1-6. 유튜브 영상

https://www.youtube.com/watch?v=u0vTKR57sCw&list=PLV9zd3otBRt5ANIjawvd-el3QU594wyx7&index=16

 

https://www.youtube.com/watch?v=AdlC25YfPtQ&list=PLV9zd3otBRt5ANIjawvd-el3QU594wyx7&index=17

 

 

2. Git 

https://github.com/ujin302/Board