Spring) 아이디 중복 확인 기능을 구현해보자!

띠로링

오늘은 아이디 중복 확인을 구현해보겠다!!! :)

 

 

필요한 것

1. id를 입력한다

ㄴ입력하지 않으면 입력하라고 뜬다

2. 입력한 id를 정보를 받아서 select를 한다

ㄴ SELECT * FROM member_info WHERE id = ?

3. select가 잘 되면, id가 중복이라고 뜨게 한다

4. select가 안 되면, id를 써도 괜찮다고 한다

 

 

 

 

 

Controller

 

	@PostMapping("/signUp/id")
	@ResponseBody
	public String idCheck(@RequestBody MemberDto memberDto) throws Exception {
		// id값이 들어왔는지 확인
		System.out.println("id = " + memberDto.getId());
		MemberDto dto = service.form(memberDto.getId());
		// dto 값이 들어왔는지 확인
		System.out.println("dto = " + dto);
		String result = "";
		
		if(dto!=null) {
			result = "OTHER ID PLZ";
			return result;
		}
		result = "ID OK";
		return result;
	}

 

Controller로 정보를 받을 때, 주의할 점이 있다!

 

1) json으로 받는다면, map이나 DTO 클래스 등으로 받을 것

ㄴ json은 key 와 value 값으로 받기 때문에, 쌩 String으로 받으면 오류가 뜸ㅠㅠ

2) GET 방식이 아니라 POST 방식으로 받을 것

ㄴ GET 으로 받아버리면 URI에 ID 정보가 뜨는데, 그게 {id:"asdf"} 이런 식으로 떠버려서

매핑이 제대로 되지 않는다...

 

 

 

ajax 부분

 

      //아이디 중복 확인을 위한 함수
      $('#idBtn').click(function () {
        let id = document.getElementById("id").value;
        if (id=="") {
          alert("아이디를 입력해주세요");
          document.getElementById('id').focus();
          return false;
        }
        $.ajax({
          type: 'POST', //요청한 메서드
          url: '/signUp/id', //요청하는 url
          contentType : "application/json", //내 데이터는 JSON으로 보내는 거야
          data: JSON.stringify({id:id}), //JSON으로 직렬화(문자열화) 해준다
          dataType: 'text', //받을 땐 text로 받을 거야->자매품 json
          success: function (result) { //서버로부터 응답(result)가 도착하면 호출될 함수
            alert(result);
          },
          error: function (request, status, error) { //응답 실패하면 호출될 내용
            console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error)
            alert("확인 실패");
          }
        });

 

이런 식으로 POST 메서드로 정보를 보내주면 된다!

 

 

중복 아이디를 쳤을 때

 

중복이 아닌 아이디를 쳤을 때

 

 

 

그런데 아쉬운 점이 생긴다

아이디 중복 확인이 제대로 안 되었을 때

가입 버튼을 눌러버리면

그냥 가입 실패가 뜨고 첫 페이지로 가버리는 것ㅠㅠ

 

 

1) 아이디 중복 확인이 제대로 안 된 경우

ㄴ아이디 중복을 확인해달라는 메세지만 뜨고, 가입 실패 메시지는 뜨지 않게 한다

2) 중복 확인은 되었는데 가입 실패인 경우

ㄴ가입 실패 메시지만 뜨고, 아이디 중복 확인 메시지는 뜨지 않게 한다

3) 아이디 중복 확인을 하고 실패를 한 후 새 아이디를 작성했는데 아이디 중복 확인을 하지 않은 경우

ㄴ아이디 중복을 확인해달라는 메시지가 뜨게 한다

 

 

고민을 하다가 생각해낸 방법

1. 변수 하나를 주고 아이디 중복이 잘 되었다는 메시지가 떴을 경우 변수값을 바꾼다

2. 변수가 그대로라면 가입 실패 메시지만 뜨게 한다

3. 가입버튼을 눌렀을 때,

응답은 잘 왔지만 아이디가 중복이어서 오류가 뜬 경우 아이디 중복을 확인하라는 메시지가 뜨게 한다

4. 아이디 값이 바뀌었을 경우 무조건 아이디 중복확인을 해야 한다고 뜬다

ㄴ 검색을 하니 $("#id").change 를 이용할 수 있다고 한다

$("#id").change 란?

ㄴ input 의 값이 바뀌었을 경우 감지해주는 기능을 가지고 있다!

이거 아님.. 무조건 input을 벗어나는 순간 값이 바뀜 ㅠㅠ

 

이거 말고

$("#id").on("propertychange change keyup paste input", function() {})

ㄴ 이건 input 값이 바뀌는 것만 감지함

ㄴ 관리자모드에서 바꾸는 것도 감지 가능

 

 

바로 시도해보자 ^0^/

 

 

input id의 text값이 변경됐을 경우 실행되는 함수

oldVal 함수는 전역변수로 생성해줍니다!

//id값 변경을 감지하는 함수
$("#id").on("propertychange change keyup paste input", function() {
  var currentVal = $(this).val();
  if(currentVal == oldVal) {
    return;
  }
  oldVal = currentVal;
  check = 0;
});

 

 

중복 확인 버튼(idBtn)을 클릭했을 때 실행되는 함수

      //아이디 중복 확인을 위한 함수
      $('#idBtn').click(function () {
        let id = document.getElementById("id").value;
        if (id=="") {
          alert("아이디를 입력해주세요");
          document.getElementById('id').focus();
          return false;
        }
        $.ajax({
          type: 'POST', //요청한 메서드
          url: '/signUp/id', //요청하는 url
          contentType : "application/json", //내 데이터는 JSON으로 보내는 거야
          data: JSON.stringify({id:id}), //JSON으로 직렬화(문자열화) 해준다
          dataType: 'text', //받을 땐 text로 받을 거야->자매품 json
          success: function (result) { //서버로부터 응답(result)가 도착하면 호출될 함수
            //중복이 없을 경우에만 적용
            if(result=="ID OK") {
              alert(result);
              check=1;
            } else {
              //중복일 경우
              alert(result);
              document.getElementById('id').focus();
            }
          },
          error: function (request, status, error) { //응답 실패하면 호출될 내용
            console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error)
            alert("확인 실패");
          }
        });

      })

 

 

 

가입 버튼을 눌렀을 때 실행되는 함수의 ajax

      $.ajax({
        type: 'POST', //요청한 메서드
        url: '/signUp', //요청하는 url
        contentType : "application/json", //내 데이터는 JSON으로 보내는 거야
        data: JSON.stringify(info), //JSON으로 직렬화(문자열화) 해준다
        dataType: 'text', //받을 땐 text로 받을 거야->자매품 json
        success: function (result) {
          //check가 0이라면 중복확인을 안 한 것
          if(check==0) {
            alert("아이디 중복 확인 하세요");
            return false;
          }
          if(result=="SignUp OK") {
            alert("가입 성공");
            location.href="/";
          } else {
            alert("가입 실패");
          }
        },
        error: function () { //응답 실패하면 호출될 내용
            alert("가입 실패");
        }
      });

 

 

id값이 변경되었는데 중복 확인을 안 했을 경우 뜨는 조건문

if($("#id").change) {
          alert("아이디 중복 확인을 해주세요");
          return false;
        }

 

 

결과는?

 

 

 

아이디가 중복인데 가입 버튼을 눌렀을 때

 

 

아이디 중복 확인을 했는데도 불구하고 가입이 실패했을 때

 

아이디 중복확인이 완료된 후, 다시 새 아이디(중복아이디)를 썼는데 그걸 중복확인을 안 했을 때

 

 

 

 

 

내가 생각하는 경우의 수들을 전부 구현했다 :)

기부니가 좋다...