SPRING

[spring] 회원가입 - 아이디 중복 체크하기

라텐느 2024. 10. 13. 18:51
반응형

회원 가입을 할 때 아이디를 생성하게되는데 이때 기존의 사용자와 아이디를 겹치지 않게 해야한다. 이때, 사용하는 중복체크 로직이다.

 

1.fetch방식 사

	// 아이디 중복 체크
	@RequestMapping(value = "/CheckDuplication", method = RequestMethod.GET)
	@ResponseBody
	public String checkDuplication(String userid) {
	    UserVo user = userMapper.getUser(userid); // DB에서 해당 아이디로 조회
	    if (user == null) {  
	        return "가능";  // 아이디가 존재하지 않으면 가능
	    }
	    return "불가능";  // 아이디가 존재하면 불가능
	}

 

이때, String userid는 jsp파일에서의 name속성과 이름이 일치해야한다.

      const  useridEl     = document.querySelector('[name=userid]');
      const  checkDuplicationEl   = document.querySelector('#checkDuplication');

checkDuplicationEl.onclick = function() {
    const useridInput = useridEl.value.trim(); // 공백 제거
    console.log('User ID Input:', useridInput); // Debugging line

    if (useridInput == '') {
        alert("아이디를 입력하세요");
        useridEl.focus();
        return;
    }

    //url='https://localhost:9090/Users/CheckDuplication?userid=${useridInput}'
    fetch('/Users/CheckDuplication?userid=' + useridInput)
    .then((response) => response.text())
    .then((data) => {
        if (data.trim() == "가능") {
            alert('사용 가능한 아이디입니다.');
            checkDuplicationEl.setAttribute("data-checked", "true"); // 중복 확인 성공 시 표시
        } else {
            alert('이미 존재하는 아이디입니다.');
            checkDuplicationEl.setAttribute("data-checked", "false");
        }
    })
    .catch(error => {
        console.error('Error during duplication check:', error);
    });

참고: [jquery] Axios와 Fetch

data-checked: HTML5 표준에서 data-로 시작하는 속성을 사용하여 사용자 정의 데이터를 저장할 수 있다.

checkDuplicationEl.dataset.checked = "true";
이렇게 바꿔서 작성할 수도 있다.

2. 새 창 방식 중복 확인

	// /Users/DupCheck?userid=sky
	@RequestMapping("/DupCheck")
	public  ModelAndView  dupCheck(UserVo vo) {
		// 중복확인을 위한 조회
		UserVo  userVo  =  userMapper.getUser2(vo);
		
		// 결과를 새창에 출력할 jsp 를 리턴 
		ModelAndView  mv  = new ModelAndView();
		mv.setViewName("users/dupcheck");   // 새창에 보여줄 jsp 
		mv.addObject("userVo", userVo);   // 새창에 보여줄 결과    
		return        mv;
	}

Controller

<style>
  .green { color:green; }
  .red   { color:red; }
</style>

<body>
  <main>
   <form action="/Users/DupCheck" method="post">
    <h2>Id 중복확인</h2>
    <input type="text"    name="userid" value="${ param.userid }" />
    <input type="submit"  value="검색" /> 
   </form>
   <div style="height:20px;"></div>
   <c:choose>
    <c:when test="${ userVo eq null }">
     <p class="green">
      ${ param.userid }는 사용가능한 아이디입니다
      <input type="button" id="btnClose" value="ID 사용하기" /> 
     </p>
    </c:when>
    <c:otherwise>
     <p class="red">${ param.userid }는 사용할 수 없는 아이디입니다</p>
    </c:otherwise>
   </c:choose>
  </main>   
  
  <script>
     const  btnCloseEl = document.getElementById('btnClose')
     btnCloseEl.onclick = function() {
        // 넘겨줄 창의 userid 에 조회괸 결과를 보낸다
        // 넘겨줄 창(내창을 open한 window) : window.opener -> mf
        // 내창 : window                                   -> cf
        const  mfUseridEl =  window.opener.document.querySelector('[name=userid]');
        const  cfUseridEl =  window.document.querySelector('[name=userid]')
        mfUseridEl.value  =  cfUseridEl.value;
        window.close();
     }
  
  </script>
</body>

dupcheck.jsp

  • param.userid: html창에서 입력한 userid를 form(DupCheck)으로 전송했을때, 그 userid값을 가져온다.
  • <c:when> 블록 내에서 userVo가 null일 때 사용가능한 아이디이다. mybatis에서 가져온 userid에 userVo가 없는 것이다. 이때, form태그를 통해 입력받은 userid값이 /DupCheck로 전송된 것이다.
// 중복확인(새창) 버튼이 클릭되면
	const  dupCheckEl   = document.querySelector('#dupCheck');

        dupCheckEl.onclick = function() {
		    // 새창을 연다
		    let  html     = '/Users/DupCheck?userid=' +  useridEl.value
		 		   // 새 창에 보여줄 html(jsp) 파일
		    let  name     = 'dupcheck';  // 이름을 주면 새창은 한번만 열림
		    let  features = 'height=300,width=500,top=250,left=800';
		    window.open(html, name, features)		
		}

write.jsp

 

3. ajax방식 중복확인

	// http://localhost:9090/Users/IdDupCheck?userid=aaa
	@RequestMapping(
		value   = "/IdDupCheck",
		method  = RequestMethod.GET,
		headers = "Accept=application/json" )  // 결과를 json 으로 처리 
	@ResponseBody                              // json 문자열 리턴하겠다
	public  UserVo   idDupCheck(String userid) {
		String  result = "";  // 조회결과
		//  db 조회
		UserVo  userVo = userMapper.idDupCheck( userid  );		
		return  userVo;
	}

@ResponseBody : jsp 파일명이 아닌 결과문자열(json)로 리턴한다. 

// 중복확인 버튼이 클릭되면 
      const  idDupCheckEl   = document.querySelector('#idDupCheck');
      let   dupCheckClicked = false;  
       idDupCheckEl.onclick = function() {
           //  아이디를 중복확인 
    	   dupCheckClicked = true;  
       }
      $( function() {
           $('#idDupCheck').on('click', function() {
        	   $.ajax({
                   url  : '/Users/IdDupCheck',
                  // data : '?userid=' + $('[name=userid]').val()  
                   data : { userid : $('[name=userid]').val()  }  
        	       // data :  넘겨주는 파라미터를 담는 변수
               })
               .done( function( data ) { 
                   // data : 서버가 보내준 결과 (json)   
                   console.log(data)
                   if( data == '' ) {
                     let html = '사용가능한 아이디입니다'; // + data.userid
                     dupCheckClicked = true;
                     $('#dupResult').html(html).addClass('green')
                   }  else  {  
                     let html = '사용할수 없는 아이디입니다'
                     dupCheckClicked = false;
                   	 $('#dupResult').html(html).addClass('red')
                   }
               })
               .fail( function(err) {
                   console.log(err)
               }) 
           })
       })

let dupCheckedClicked: false로 초기화되어 있다. 이는 사용자가 아직 중복 확인을 하지 않았음을 나타낸다.

반응형