[Spring, JS] AJAX 사용하지 않고 아이디 중복 체크 구현하기

회원가입 폼 예제를 만들면서 아이디 중복 체크를 구현하게 되었는데

 

아직 AJAX에 대해서는 배우지 않아서 😅 AJAX를 이용하지 않고 자바 스크립트로 구현하게 되었다.

 

1. DB에서 가져온 ID 데이터를 자바 빈과 List를 이용해 2차원 배열에 담아와 출력하는 방법과

 

2. 자바 빈을 이용하지 않고 1차원 배열에 담아와 출력하는 방법

 

2가지 방법을 이용해 구현에 성공했다 :D

 

자바 빈과 List로 2차원 배열에 담아 출력하기

public class Bean {
	private String id;
	
	public void setid(String id) {
		this.id=id;
	}
	
	public String getid() {
		return this.id;
	}
}

서버 설정을 모두 마친 뒤 Bean 파일은 id를 반환할 수 있도록 간단히 작성해주었다.

 

@Controller
public class control {
	
	@Autowired
	server s;
	
	@GetMapping("/")
	public String getmain(HttpServletRequest request, Model mo) {
    try {
    	// DB에서 ID 가져오기
		ResultSet result=s.serv().executeQuery("SELECT ID FROM FORM");
		
        // Bean에 가져온 ID 데이터를 차례대로 담아 List에 저장(2차원 배열)
		List<Bean> list=new ArrayList<Bean>();
		while(result.next()) {
			Bean bean=new Bean();
			bean.setid(result.getString("ID"));
			list.add(bean);
		}	
		mo.addAttribute("get_id", list); // 저장한 List를 Model을 이용해 html에 전송
	}catch(Exception e) { e.printStackTrace(); }
		
		return "index";
	}
}

executeQuery문으로 ID 데이터를 가져와 ResultSet에 저장하고

 

while(.next()) 문을 통해 데이터가 있을 경우 자바 빈에 차례대로 담은 뒤 빈 객체를 다시 List에 담았다.

 

그리고 Model을 이용해 get_id라는 이름으로 html 파일에 전송해주었다.

 

이제 html 파일로 이동해 java script로 입력 값과 가진 데이터의 값이 중복될 때 알림창을 띄워보자 😀

 

<form action="" method="post" onsubmit="return sub();">
	<div>아이디</div>
    <input placeholder="아이디를 입력해주세요" class="id" name="id">
    <button id="check_id" type="button">중복 체크</button>
</form>

<script th:inline="javascript">	
	let get=[[${get_id}]]; // model로 받아온 데이터를 변수에 저장
	let log = false; // 중복 여부를 확인해 줄 변수
	$("#check_id").on("click", function(){ // 중복 체크 버튼을 누르면 작동
		get.some(function(item){
			let id=document.forms[0].id;
			if(id.value!=null){
				log = (item.id == id.value); 	
			}
			if(log===true) {alert("아이디가 중복됩니다."); return true;}
			else return false;
		});
		if(log===false) alert("아이디를 사용할 수 있습니다."); 
	});	
</script>

model로 받아 온 get_id는 반복문을 통해 값을 하나씩 가져와 비교해야 하는데

 

일반 for문으로는 가져올 수가 없었다.

 

js와 jquery의 충돌......? 아무튼 for문으로 가져오려고 하면 아예 오류가 발생했다😥

 

그래서 자바 스크립트의 반복문인 forEach문으로 수정을 했으나 중복이 있을 경우 반복을 멈추고 빠져나오기 위해서

break문을 사용해야 하는데 forEach문에서는 break를 사용할 수 없다는 문제가 생겼다.

 

그래서 방법을 찾아본 결과! Array some() 구문을 이용하게 되었다.

 

배열의 요소 중 하나의 요소라도 조건을 만족하는지(or) 확인해서

 

하나라도 true일 시 나머지 요소는 더이상 비교하지 않고 true를 반환, 종료하는 함수이다.

 

예제의 경우 input ID 칸에 입력한 값이 있을 때

 

입력한 값과(id.value) get 배열에서 가져온 id 요소(item.id)가 중복이라면 변수 log의 값이 true로 바뀐다.

 

그리고 log의 값이 true이면(중복이 있으면) 중복 알림을 띄우고 true를 return해 종료,

 

아니면 false를 return해 다음 요소로 비교를 반복한다.

 

모든 요소를 비교하고 빠져나왔을 때 중복이 한 번도 없었을 경우 log의 값은 false이고

 

이 때는 아이디를 사용할 수 있다는 알림을 뜨게 했다.

 

우선 알림창만 구현을 했는데 같은 방법으로 아이디가 중복일 경우 전송이 안되도록 해서

 

회원 가입이 진행되지 않도록 할 수도 있을 것 같다.

 

 

1차원 배열에 담아 출력하기

훨씬 간단한 1차원 배열을 이용하는 방법이다 😊

 

@GetMapping("/")
public String getmain(HttpServletRequest request, Model mo) {
    try{
        ResultSet result2=s.serv().executeQuery("SELECT ID FROM FORM");		
        List<String> list2=new ArrayList<String>();
        while(result2.next()) {
            String id = result2.getString("ID");
            list2.add(id);
        }
        mo.addAttribute("get_id2", list2.toArray());
    }
    catch(Exception e) { e.printStackTrace(); }
    return "index";
}

마찬가지로 ResultSet에 ID 데이터만 가져와 저장한 뒤 이번에는 String 배열을 받는 List를 선언해준다.

 

while(.next())문을 이용해 ID 데이터가 있을 때 차례대로 데이터를 가져와 변수 id에 저장하고

 

이 변수를 리스트에 저장해 아이디 데이터가 저장된 1차원 배열을 만들어 주었다.

 

아이디 배열 데이터를 Model을 이용해 html 파일로 전송해주고 html 파일로 이동한다.

 

<script th:inline="javascript">	
	$("#check_id").on("click", function(){
        let id=document.forms[0].id;
        let get2=[[${get_id2}]];
        let count=0; // 중복인 횟수를 체크할 변수

        for(let i=0; i<get2.length; i++){
            if(id.value==get2[i]) {alert("아이디가 중복됩니다."); count++; break;}
        }
        if(count==0) alert("아이디를 사용할 수 있습니다.");
	});
</script>

1차원 배열이기 때문에 일반 for문으로 데이터를 하나씩 가져올 수 있다.

 

가져온 ID 데이터와 입력한 값(id.value)를 차례대로 비교해 같을 때(중복될 때)

 

아이디가 중복된다는 알림을 띄우고 변수 count의 값을 증가시킨 뒤 break를 통해 빠져나온다.

 

반복문을 완료하고 빠져나왔을 때 중복이 없었다면 count의 값이 계속해서 0일 것이므로

 

이 때는 아이디를 사용할 수 있다는 알림을 띄우도록 했다.

 

 

헤매는 시간이 길었지만 아무튼 중복 체크 구현 완료 😊

 

따란