[Spring][쇼핑몰 프로젝트][3] 아이디 중복 검사 기능

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

 이번 포스팅에선 아이디 중복검사 기능을 구현해보겠습니다. 해당 기능이 구현되는 상황은 다음과 같습니다.

 

     1. 회원가입페이지(join.jsp)에서 가입하고자 하는 아이디를 입력합니다.

     2. 해당 아이디가 이미 가입된 경우 아이디 입력란 안에 빨간색 경고표시가, 가입된 아이디가 없을 경우 초록색 경고 표시가 뜹니다.

 

순서

1. <span>태그 추가(+css)
2. 아이디 중복검사 메서드 작성 및 테스트(Javascript)
3. ajax 작성
4. controller 작성
5. mapper / service 작성
   5.1 mapper 작성 및 테스트
   5.2 service 작성
6. ajax success 작성
   6.1 success 코드 추가 및 테스트
   6.2 success  내용 추가
7. 최종 테스트
8. 정리

 

1. <span>태그 추가(+css)

 

   - 속성 클래스가 id_input_box인 div태그 아래에 span태그 두 개를 추가합니다.

   - 각각의 span태그에 class="id_input_re_1" 와 class="id_input_re_2" 속성을 추가합니다. 

   - span태그의 내용은 각각 "사용 가능한 아이디입니다.", "아이디가 이미 존재합니다."를 작성합니다. 

 

				<span class="id_input_re_1">사용 가능한 아이디입니다.</span>
				<span class="id_input_re_2">아이디가 이미 존재합니다.</span>

 

 

 

- join.css에 아래의 코드를 추가해줍니다.

 

	/* 중복아이디 존재하지 않는경우 */
	.id_input_re_1{
		color : green;
		display : none;
	}
	/* 중복아이디 존재하는 경우 */
	.id_input_re_2{
		color : red;
		display : none;
	}

 

 

 

2. 아이디 중복검사 메서드 테스트(Javascript)

 

   - join.jsp 하단의 <script>태그에 아래의 코드를 추가해줍니다.

   - 해당 메서드는 input 태그(class="id_input")에 변화가 있을 때마다 실행이 됩니다.

   - 정상적으로 작동하는지 확인하기 위해서 console.log코드를 작성하엿습니다.

 

//아이디 중복검사
$('.id_input').on("propertychange change keyup paste input", function(){

	console.log("keyup 테스트");	

});// function 종료

 

그림 2-1

 

   - 서버를 실행시켜서 해당 메서드가 정상적으로 실행되는지 확인합니다.

 

그림 2-2

 

3. ajax 작성 

 

   - 앞서 테스트를 위해 작성하였던 console.log()를 지우거나 주석 처리합니다.

 

   - 아이디 중복 검사 메서드에 아래의 코드를 추가해줍니다.

 

	var memberId = $('.id_input').val();			// .id_input에 입력되는 값
	var data = {memberId : memberId}				// '컨트롤에 넘길 데이터 이름' : '데이터(.id_input에 입력되는 값)'
	
	$.ajax({
		type : "post",
		url : "/member/memberIdChk",
		data : data
	}); // ajax 종료	

 

그림 3-1

 

4. Controller 작성

 

   - MemberController.java에 아이디 중복검사 실행하는 메서드(memberIdChkPOST)를 작성합니다.

 

   - 해당 메서드의 반환 타입은 void로 해줍니다.(테스트 진행 후 String 타입으로 변경합니다.

 

   - 여기서 주의해야 할 점은 @ResponseBody 어노테이션입니다. 해당 코드를 추가해주지 않는다면 join.jsp로 메서드의 결과가 반환되지 않습니다.

 

   - join.jsp에서 작성한 ajax의 요청을 memberIdChkPOST메서드가 수신받는지 확인하기 위해 logger.info()를 추가해주었습니다. 

 

	// 아이디 중복 검사
	@RequestMapping(value = "/memberIdChk", method = RequestMethod.POST)
	@ResponseBody
	public void memberIdChkPOST(String memberId) throws Exception{
		
		logger.info("memberIdChk() 진입");
		
	} // memberIdChkPOST() 종료	

 

그림 4-1

 

   - 테스트를 진행합니다.

 

그림 4-2

 

   - 테스트를 정상적으로 통과하였다면 테스트를 위해 작성하였던 logger.info()를 지우거나 주석 처리합니다.

 

   - 메서드의 반환 타입을 void에서 String으로 변경해줍니다.

 

   - memberIdChkPOST메서드에 아래의 코드를 추가해줍니다.

 

   - memberservice.idCheck(memberId)의 결과를 int형 변수 result에 저장합니다. (존재한다면 '1', 존재하지 않는다면 '0'을 반환하게 됩니다.)

 

   - result의 결과가 0이 아니면 "fail"을 반환하고, result의 결과가 1이 아니면 "success"을 반환합니다. 

 

		logger.info("memberIdChk() 진입");
		
		int result = memberservice.idCheck(memberId);
		
		logger.info("결과값 = " + result);
		
		if(result != 0) {
			
			return "fail";	// 중복 아이디가 존재
			
		} else {
			
			return "success";	// 중복 아이디 x
			
		}	

 

그림 4-3

 

* idCheck가 빨간색 경고표시가 뜨는 이유는 아직 memberservice에서 해당 메서드를 만들지 않았기 때문입니다.

 

5. mapper /service 작성

5.1 mapper 작성 및 mapper메서드 테스트

 

   - MemberMapper.xml에 아래의 코드를 추가해줍니다.(Oracle / MySQL 코드 동일)

 

  	<!-- 아이디 중복검사 -->
  	<select id="idCheck" resultType="int">
  	
  		select count(*) from book_member where memberId = #{memberId}
  	
  	</select>

 

 

그림 5-1

 

   - MemberMapper.java 인터페이스에 아래의 코드를 추가해줍니다.

 

	// 아이디 중복 검사
	public int idCheck(String memberId);

 

 

그림 5-2

 

   - 작성한 mapper메서드가 작동하는지 확인하기 위해서 MemberMapperTests.java에 코드를 추가하여 테스트를 진행합니다.

 

   - 기존 회원가입 테스트를 진행하였던 MemberJoin()메서드는 주석처리를 진행한 후 코드를 추가 해준 후 테스트를 진행합니다.

 

	// 아이디 중복검사
	@Test
	public void memberIdChk() throws Exception{
		String id = "admin";	// 존재하는 아이디
		String id2 = "test123";	// 존재하지 않는 아이디
		membermapper.idCheck(id);
		membermapper.idCheck(id2);
	}

 

 

그림 5-3

 

 

그림 5-4

 

5.2 service 작성

 

   - MemberService.java에 코드를 추가해줍니다.

 

	// 아이디 중복 검사
	public int idCheck(String memberId) throws Exception;

 

 

그림 5-5

 

   - MemberServiceImpl.java 에 코드를 추가해줍니다.

 

	@Override
	public int idCheck(String memberId) throws Exception {
		
		return membermapper.idCheck(memberId);
	}

 

 

그림 5-6

 

6. ajax success 작성

6.1 success 코드 추가 및 테스트

 

   - 작성한 ajax에 success 코드를 추가해줍니다. 코드는 아래와 같습니다.

 

   - success 메서드에 먼저 controller로부터 데이터가 정상적으로 넘어오는지 확인하기 위해서 console.log()를 작성합니다.

 

,
		success : function(result){
			 console.log("성공 여부" + result);
			
		}// success 종료

 

그림 6-1

 

   - 서버를 구동시켜 id란에 문자를 기입하여 테스트를 진행합니다.

 

rmfla 6-2

 

6.2 success 내용 추가

 

   - 정상적으로 테스트가 성공했을 경우 console.log()를 삭제 혹은 주석 처리합니다.

 

   - success 메서드의 내용에 아래의 코드를 추가해줍니다.

 

			// console.log("성공 여부" + result);
			if(result != 'fail'){
				$('.id_input_re_1').css("display","inline-block");
				$('.id_input_re_2').css("display", "none");				
			} else {
				$('.id_input_re_2').css("display","inline-block");
				$('.id_input_re_1').css("display", "none");				
			}

 

그림 6-3

 

7. 최종 테스트

   - 존재하는 아이디 삽입 경우

 

그림 7-1

 

   - 존재하지 않는 아이디 삽입 경우

 

그림 7-2

 

8. 정리

 

그림 8-1

 

 

DATE

• 2020.08.25 작성