New 병아리 개발자

# MVC07_01~02 Ajax 기능을 이용한 아이디 중복체크

## MVC07 프로젝트 계획

• Ajax 적용
• 파일 업로드 & 다운로드

## MVC07 프로젝트 생성

• 기존에 작업한 MVC06 바탕으로 작업 진행

• MVC06 WAR file 다운로드 후 이클립스 실행 > Project Explorer 빈 공간 우 클릭 > Import > WAR file > 다운로드 받은 WAR file 찾고, Web project이름을 MVC07로 변경 후 Finish.

## Context 등록

• Servers 탭 > 톰캣 우 클릭 > Add and Remove 클릭 후 Available에 있는 MVC07을 선택 후 Add 클릭하여 Configured로 이동 후 Finish.

## Ajax (Asynchronous Javascript And Xml)

• Jquery에서 제공해주는 $.ajax() 를 이용, 클라이언트와 서버간의 통신 시 비동기 전송으로 데이터를 주고 받는 방법
• 페이지 이동 없이 데이터 처리 가능

## 아이디 중복확인 기능 작업

• 회원 가입 시 화면 이동 없이 중복확인 버튼을 클릭하여 중복여부 확인

1. memberRegister.jsp

• 아이디 중복확인 버튼 추가.
• 중복확인 버튼 클릭에 따른 스크립트 구현.

// 아이디 중복체크 버튼 클릭 시 실행
function doubleCheck() {
  if ( $("#id").val()=='' ) {
    alert("아이디를 입력하세요.");
    $("#id").focus();
    return;
  }

	var id = $("#id").val();

  $.ajax({
    url : "<c:url value='/memberDbcheck.do'/>", 	// 서버 경로(요청 url)
    type : "POST", 			// GET, POST
    data : {"id" : id}, 	// 서버 요청 시 넘기는 값
    success : dbCheck,		// callback 함수
    error : function() {	// 실패 시.
    	alert("error");
    }
  });
}

// 아이디 중복체크 ajax 성공 시 실행.
function dbCheck(data) {
  if ( data != "null" ) {
    alert("중복된 아이디 입니다.");
    $("#id").focus();
  } else {
    alert("사용 가능한 아이디 입니다.");
    $("#id").focus();
  }
}

2. HandlerMapping

package kr.bit.frontcontroller;

import java.util.HashMap;

import kr.bit.controller.Controller;
import kr.bit.controller.*;

public class HandlerMapping {
  private HashMap<String, Controller> mappings;
  public HandlerMapping() {
	  mappings=new HashMap<String, Controller>();
	  mappings.put("/memberList.do", new MemberListController());
	  mappings.put("/memberInsert.do", new MemberInsertController());
	  mappings.put("/memberRegister.do", new MemberRegisterController());
	  mappings.put("/memberContent.do", new MemberContentController());
	  mappings.put("/memberUpdate.do", new MemberUpdateController());
	  mappings.put("/memberDelete.do", new MemberDeleteController());
	  mappings.put("/memberLogin.do", new MemberLoginController());
	  mappings.put("/memberLogout.do", new MemberLogoutController());
	  mappings.put("/memberDbcheck.do", new MemberDbcheckController());
  }
  public Controller getController(String key) { // key=>/memberList.do
	  return mappings.get(key);
  }
}

3. MemberDbcheckController 생성

• 프로젝트 > src > kr.bit.controller > class 클릭 후 MemberDbcheckController 이름으로 생성

package kr.bit.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.bit.model.MemberDAO;

public class MemberDbcheckController implements Controller {

	@Override
	public String requestHandler(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		// $.ajax(); 에서 온 요청 처리.
		String id = request.getParameter("id");		// {"id" : id}	
		MemberDAO dao = new MemberDAO();	
		String dbDouble = dao.memberDbcheck(id);
		
		response.getWriter().print(dbDouble);
		
		return null;
	}

}

4. MemberDAO

• 중복 확인 관련 메서드 추가.

// 아이디 중복 확인
	public String memberDbcheck(String id) {
		SqlSession session = sqlSessionFactory.openSession();
		String dbId = session.selectOne("memberDbcheck", id);
		
		String idDouble = "NO";
		
		if ( dbId != null ) {
			idDouble = "YES";
		}
		
		session.close();
		return idDouble;		// YES(중복), NO(중복아님)
	}

5. MemberMapper

<!-- 아이디 중복확인 -->
    <select id="memberDbcheck" parameterType="memberVO" resultType="String">
        SELECT id
        FROM member
        WHERE id = #{id}
    </select>

# lodash 라이브러리

• lodash는 javascript 유틸리티 라이브러리이다.
• Debounce는 lodash에 있는 기능 중 하나이다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

## Debounce

• 특정 함수가 반복 실행 될 경우 사용, 지연시간을 설정하여 반복된 호출을 1번 호출하도록 제어해준다.
• 주로 회원가입 폼에서 많이사용, 회원가입 시 아이디 등 중복체크 기능을 사용할 경우 값이 매번 입력될 때마다 중복체크가 되어 서버 낭비가 발생하는 것을 방지해주기 위해 사용한다.

_.debounce(콜백함수, 시간)

## 예제

• 아이디 중복 체크 기능  Debounce 이용한 딜레이 설정
• 설정 후 확인 시 F12 > Network > XHR 에서 입력하면서 확인 가능

<div class="form-row">
  <div class="label">아이디</div>
  <div class="input">
    <input onkeyup="JoinForm__checkLoginIdDup(this);" type="text" name="loginId" maxlength="20" placeholder="회원 id 입력">
    <div class="message-msg"></div>
  </div>
</div>

<script>

	<!-- 회원가입 아이디 중복 체크 -->
	function JoinForm__checkLoginIdDup(input) {
		var form = input.form;

		form.loginId.value = form.loginId.value.trim();

		if (form.loginId.value.length == 0) {
			return;
		}

		$.get('getLoginIdDup', {
			loginId : form.loginId.value
		}, function(data) {
			var $message = $(form.loginId).next();

			// resultCode : 중복 체크 값 S- 중복 아님 / F- 중복
			if (data.resultCode.substr(0, 2) == 'S-') {
				$message.empty().append(
						'<div style="color:green;">' + data.msg + '</div>');
				JoinForm__validLoginId = data.loginId;
			} else {
				$message.empty().append(
						'<div style="color:red;">' + data.msg + '</div>');
				JoinForm__validLoginId = '';
			}
		}, 'json');
	}
    
    <!-- lodash 라이브러리 (debounce) 를 이용한 딜레이(1초) 설정  -->
	JoinForm__checkLoginIdDup = _.debounce(JoinForm__checkLoginIdDup, 1000);

</script>