[Spring Boot 게시판] 35일차

1. 회원가입시 로그인아이디 중복체크 (Ajax)

1) UsrMemberController getLoginIdDup()

@RequestMapping("/usr/member/getLoginIdDup")
	@ResponseBody
	public ResultData getLoginIdDup(String loginId) {
		if (Ut.empty(loginId)) {
			return ResultData.from("F-A", "아이디를 입력해주세요");
		}

		Member exsistMember = memberService.getMemberByLoginId(loginId);

		if (exsistMember != null) {
			return ResultData.from("F-A2", "이미 사용중인 아이디입니다.", "loginId", loginId);
		}

		return ResultData.from("S-1", "사용 가능한 아이디 입니다.", "loginId", loginId);
	}

• 로그인아이디 체크를 하는 메서드
• 입력받은 로그인아이디가 DB에 중복되는지 확인하여 ResultData로 반환

2) checkLoginIdDup()

	let loginIdDup = true;
	function checkLoginIdDup(el) {
		$('.loginId-msg').empty();
		const form = $(el).closest('form').get(0);

		$.get('../member/getLoginIdDup', {			
			loginId : form.loginId.value,
			ajaxMode : 'Y'
		}, function(data) {
			$('.loginId-msg').html('<div class="mt-2">' + data.msg + '</div>');
			if (data.success) {
				loginIdDup = false;
			} else {
				loginIdDup = true;
			}
		}, 'json');
	}

• 회원가입 뷰에서 Ajax사용하여 로그인 아이디 중복체크
• loginIdDup 변수 : Ajax통신을하여 가져온 ResultData를 바탕으로 변수 조작하여 submit제한
• ResultData의 isSuccess()메소드가 true라면 loginIdDup = false 즉, 중복되지 않음

2. 회원가입시 로그인아이디 중복수정 (Ajax)

1) checkLoginIdDup()

let validLoginId = "";
	if (form.loginId.value != validLoginId) {
			alert('사용할 수 없는 아이디입니다!');
			form.loginId.focus();
			return;
		}

function checkLoginIdDup(el) {
		const form = $(el).closest('form').get(0);
		
		if (form.loginId.value.length == 0) {
			form.loginId.focus();
			return;
		}

		$('.loginId-msg').html('<div class="mt-2">확인중...</div>');
		
		$.get('../member/getLoginIdDup', {			
			loginId : form.loginId.value,
			ajaxMode : 'Y'
		}, function(data) {
			$('.loginId-msg').html('<div class="mt-2">' + data.msg + '</div>');
			if (data.success) {
				validLoginId = data.data1;
			} else {
				validLoginId = '';
			}
		}, 'json');
	}

• Ajax통신후 아이디 중복이 아니라면 let validLoginId에 작성한 아이디를 대입,중복이라면 ''대입
• if (form.loginId.value != validLoginId) { 중복되지 않은 아이디 이면 valIdLoginId는 입력받은 아이디가 채워져있고
• 중복이라면 ''로 채워져있으므로 같지 않다면 중복된아이디이므로 submit을 하지않음

3. 로그인아이디의 변화가 없다면 중복체크 요청하지 않도록

1) checkLoginIdDup()

function checkLoginIdDup(el) {
		const form = $(el).closest('form').get(0);
		
		if (form.loginId.value.length == 0) {
			validLoginId = '';
			return;
		}
		
		if (validLoginId == form.loginId.value){
			return;
		}
		
		$('.loginId-msg').html('<div class="mt-2">확인중...</div>');		

• if (validLoginId == form.loginId.value){
  			return;}

• 키보드 입력시(onkeyup) Ajax통신 하고있으므로

• Insert키 ,방향키 등 입력한 아이디의 변경 되지 않아도 Ajax통신이 이루어지기 때문에

• 이를 방지하기위해 아이디의 변경이 되지않을시 Ajax통신을 하지 않게 구현

4. lodash debounce를 활용해서 로그인 아이디 중복체크시 ajax 통신 횟수를 줄임

checkLoginIdDupDebounced

const checkLoginIdDupDebounced = _.debounce(checkLoginIdDup,1000);	

• 키보드입력시마다 Ajax통신이 이루어 지므로 불필요하게 많은 통신을 하고있어
• lodash debounce를 활용하여 횟수를 줄임