Spring Boot Board Project_05_01 이메일 유효성 검사

google 계정 관리 보안 탭 들어가서 2단계 인증 돼있어야 앱 비밀번호가 발급됨

앱 비밀번호 잘 저장해두기 (16자리) 한번 보여주고 두번 다시는 못 봄
앱 이름은 아무거나 해도 됨

1. main.html 에서 회원가입 버튼 눌렀을 때 페이지 이동 받아줄 Controller

main.html

<a href="/member/signup">회원가입</a>

MemberController

	@GetMapping("signup")
	public String signupPage() {
		return "member/signup";
	}

-> signup.html 로 이동됨 회원가입 폼 (css 연결)

회원가입할 때 중요한 게 유효성 검사

signup.html js 연결

0. 필수 입력 항목의 유효성 검사 여부를 체크하기 위한 객체 생성

• true == 해당 항목은 유효한 형식으로 작성된 거
• false == 해당 항목은 유효하지 않은 형식으로 작성된 거

signup.js

const checkObj = {
    "memberEmail" : false,
    "authKey" : false,
    "memberPw" : false,
    "memberPwConfirm" : false,
    "memberNickname" : false,
    "memberTel" : false
}

1. 이메일 유효성 검사에 사용될 요소 얻어오기

signup.js

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

2. 이메일이 입력될 때마다 유효성 검사 수행

input

memberEmail.addEventListener("input", e => {
    // 작성된 이메일 값 얻어오기
    const inputEmail = e.target.value;

입력된 이메일이 없을 경우

    if(inputEmail.trim().length === 0) {
        emailMessage.innerText = "메일을 받을 수 있는 이메일을 입력해주세요.";

        // 메세지에 색상을 추가하는 클래스 모두 제거
        emailMessage.classList.remove('confirm', 'error');

        // 이메일 유효성 검사 여부를 false로 변경
        checkObj.memberEmail = false;

        // 잘못 입력한 띄어쓰기가 있을 경우 없앰
        memberEmail.value = "";

        return;
    }

입력된 이메일이 있을 경우

    // 알맞은 형태로 작성됐는지 검사
    const regExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

    // 입력 받은 이메일이 정규식과 일치하지 않는 경우
    // (알맞은 이메일 형태가 아닌 경우)
    if(!regExp.test(inputEmail)) {
        emailMessage.innerText = "알맞은 이메일 형식으로 작성해주세요.";
        emailMessage.classList.add('error'); // 글자를 빨간색으로 변경
        // 이전에 한번 통과했다가 다시 돌아온 경우
        emailMessage.classList.remove('confirm'); // 초록색 제거
        checkObj.memberEmail = false; // 유효하지 않은 이메일임을 기록
        return;
    }

3. 이메일 중복 검사 (ajax)

유효한 이멩리 형식인 경우 중복 검사
비동기로 하는 이유는 입력할 때마다 새로고침 안되게, 아래 작성해둔 거 날아가지 않게
파라미터로 값 넘기기 fetch 요청 기본 GET 요청

    fetch("/member/checkEmail?memberEmail=" + inputEmail)

4. js 에서 넘긴 값 Controller 에서 받아서 처리

MemberController

	@ResponseBody // 응답 본문(요청한 fetch)으로 돌려보냄
	@GetMapping("checkEmail")
	public int checkEmail(@RequestParam("memberEmail") String memberEmail) {
		return service.checkEmail(memberEmail);
	}

MemberServiceImpl

	@Override
	public int checkEmail(String memberEmail) {
		return mapper.checkEmail(memberEmail);
	}

member-mapper.xml

탈퇴하지 않은 사람 중에서 이메일 중복 검사

	<select id="checkEmail" resultType="_int">
		SELECT COUNT(*)
		FROM "MEMBER"
		WHERE MEMBER_DEL_FL = 'N'
		AND MEMBER_EMAIL = #{memberEmail}
	</select>

sql 수행 후 돌아가서 Controller 에 수행 결과 return 해주면
Controller 에서 값 그대로 가지고 js로 돌려줌 (@ResponseBody)

5. js로 넘어온 값 처리

signup.js

    .then(resp => resp.text())
    .then(count => {
        // count : 1 or 0
        // 1 이면 중복, 0 이면 중복 X
        if(count == 1) { // 중복 O
            emailMessage.innerText = "이미 사용중인 이메일 입니다.";
            emailMessage.classList.add('error');
            emailMessage.classList.remove('confirm');
            checkObj.memberEmail = false; // 중복은 유효하지 않음
            return;
        }

        // 중복이 아닌 경우
        emailMessage.innerText = "사용 가능한 이메일 입니다.";
        emailMessage.classList.add('confirm');
        emailMessage.classList.remove('error');
        checkObj.memberEmail = true;
    })
    .catch(error => {
        console.log(error);
    });
    // fetch() 수행 중 예외 발생 시 처리
    // 발생한 예외 출력