Eggs Sunny Side Up
본문 바로가기
프레임워크(Framework)/Spring

[Spring] 회원가입할 때 아이디 중복 체크

by guswn100059 2023. 7. 16.

signUp.jsp

<div>
	<span>회원가입</span>
</div>
<div class="id_wrap">
	<div class="id_name">아이디</div>
	<div class="id_input_box" >
		<input class="id_input" type="text" name="u_id" id="u_id">
		<div id="id_check"></div>
	</div>
</div>

=> 아이디 일치 여부를 나타내기 위한 div 태그를 설정

 

js

/*아이디 중복 체크*/
$(document).ready(function(){
		var input = $('#u_id');
		input.on("input", idCheck);
	});
	
	function idCheck(){
		
		var value = $(this).val();
		/*console.log(value);*/
		
		$.ajax({
			url : 'idCheck.com',
			type : 'post',
			data : {
				"u_id" : value
			},
			success : function(res){
				/*console.log(res);*/
				
				var p = $('#id_check');
				
				if(res == "true"){
					p.html('사용이 가능한 아이디 입니다.');
					p.css("color", "green"); // css("style 이름", "값")
				}else {
					p.html("사용이 불가능한 아이디 입니다.").css("color", "red");
				}
				
			},
			error : function(e){
				alert("요청 실패");
			}
		});
	}

=> 아이디를 입력하는 input 태그의 id와 아이디 사용가능 여부를 나타내는 태그의 id를 이용하여 ajax 함수 선언

 

Controller

// 회원가입 아이디중복 체크
	@PostMapping("/idCheck.com")
	public @ResponseBody String idCheck(@RequestParam("u_id") String u_id) {
//		System.out.println(u_id);
		String res = "";
		if(mapper.idCheck(u_id) == null) res = "true";
		else res = "false";
		return res;
	}

=> res 변수를 return 해주기 위해서 메소드 데이터 타입은 String으로 맞춰주기

=> ajax로 받을 데이터는 u_id이기 때문에 requestParam으로 어노테이션하여 받아줌!

 

Mapper.xml

<!-- 아이디 중복 체크 -->
	<select id="idCheck"
	resultType="kr.mds.entity.User">
		SELECT * FROM tb_user WHERE U_ID=#{u_id}
	</select>

=> 아이디 중복을 체크할 sql 쿼리문 작성

 

Mapper.java

public interface UserMapper {

	// 아이디 중복 체크
	public User idCheck(String u_id);

=> MyBatis sql 쿼리문과 Controller를 연결해줄 DAO 메소드 작성


(시험용 코드라 행이 안맞는 건 일단 넘어가기)


회원가입할 때 아이디 또는 이메일을 중복 체크할 때 사용하는 방법 중

MyBatis에서 select 쿼리문을 

SELECT COUNT(*) FROM 테이블 WHERE ~로 입력해주는 경우가 많았다.

이때 resulttype=integer로 표현하여 DAO, Controller에 있는 메소드 데이터 타입까지 int로 선언해줘야한다.

하지만 나는 int를 사용하지 않고 String 데이터 타입을 이용하여 아이디 중복을 체크하였다.

구글링하여 나온 방법과는 다르게 시도하느라 조금 애를 먹었지만 그래도 코드구현에 성공!

 

 

댓글