SpringBoot 를 사용한 실시간 아이디 중복 검사(feat.ajax, jsp)

https://terianp.tistory.com/95

데이터 전달의 꽃 AJAX 다루기 - JS, JQuery, jsp(feat. 실시간 아이디 중복검사)

이전에 AJAX 를 다루면서 실시간 아이디 실시간 중복 검사 코드를 짜 보았다.

그런데 이전의 코드에서는 살짝 아쉬운? 부족한 점이 보인다. 바로 spring 을 사용하지도 않았고, 오직 JSP 로만 구현했었다는 점이다.

물론 이렇게 구현해도 크게 상관은 없다. 왜냐? 어쨌든 코드는 잘 동작하니까ㅎㅎ

다만 당연히도 Spring 이 대세인 현재 상황에서 jsp로만 코드를 짠다는 것은 분명 아쉽고 부족한 점이라고 생각한다.

따라서 이번에는 이전 글에서 작성했던 내용과 동일하게 실시간 아이디 중복 검사를 하되, Spring Boot 의 MVC 를 기반으로한 실시간 아이디 중복 검사 방법을 작성해보겠다.

 

본 포스팅에서 사용된 전체 코드는 아래 깃에서 확인하실 수 있습니다

https://github.com/SeJonJ/GoodJob

GitHub - SeJonJ/GoodJob: 취업정보 제공 GoobJob 사이트

 

1. Jsp 작성 

아래  jsp 및 javascript 코드는 전체 코드가 아닌 중복검사에 사용되는 일부 코드입니다

- 실시간 아이디 중복검사에서 가장 중요한 요소는 ajax 처리라고해도 무방하다. keyup 에 ajax 를 넣고 keyup function 이 동작할때마다 ajax 가 함께 동작하도록 한다.

- 아이디에 해당하는 input id 가 mid 임으로 jquery 를 사용해서 mid 를 가져와서 $mid 라는 변수로 지정한 후 $mid 에 keyup function 을 사용한다.

- keyup function 은 javascript 의 function 으로 키보드에서 손을 땠을 때 실행된다. 이를 통해서 손가락을 땔때마다 ajax 가 실행되고 컨트롤러의 /login/checkid url 로 post 방식으로 데이터를 보내준다.

- 통신이 성공한 후 success function 으로 넘어온 data 값이 1 인 경우 이미 존재하는 아이디 문구를 출력하고, data 값이 0 인 경우 사용 가능한 아이디라는 문구를 출력한다.

==> controller 에서 dao 조회 후 return 값이 1 이면 해당 아이디의 유저가 있음 -> view 로 1 return -> ajax 에서 return 에 맞는 문구 출력

<script>
var $mid = $("#mid");
// 아이디 정규식
		$mid.on("keyup", function() { // 키보드에서 손을 땠을 때 실행
			var regExp = /^[a-z]+[a-z0-9]{5,15}$/g;

			if (!regExp.test($mid.val())) { // id 가 공백인 경우 체크
				idchk = false;
				$id.html("<span id='check'>사용할 수 없는 아이디입니다.</span>");
				$("#check").css({
					"color" : "#FA3E3E",
					"font-weight" : "bold",
					"font-size" : "10px"
				})
			} else { // 공백아니면 중복체크
				$.ajax({
					type : "POST", // http 방식 
					url : "/login/checkid", // ajax 통신 url
					data : { // ajax 내용 => 파라미터 : 값 이라고 생각해도 무방
						"type" : "user",
						"id" : $mid.val()
					},
					success : function(data) {
						if (data == 1) { // 1이면 중복
							idchk = false;
							$id.html("<span id='check'>이미 존재하는 아이디입니다</span>")
							$("#check").css({
								"color" : "#FA3E3E",
								"font-weight" : "bold",
								"font-size" : "10px"

							})
							//console.log("중복아이디");
						} else { // 아니면 중복아님
							idchk = true;
							$id.html("<span id='check'>사용가능한 아이디입니다</span>")

							$("#check").css({
								"color" : "#0D6EFD",
								"font-weight" : "bold",
								"font-size" : "10px"

							})
							//console.log("중복아닌 아이디");
						}
					}
				})
			}
		});
</script>

<!------ html ------->
<div class="content bg-light">
   <div class="container">
      <div class="row justify-content-center">
         <div class="col-md-6 contents bg-white">
            <div class="col-md-8-custom member_register">
               <div class="mb-4">
                  <!-- <h3>회원가입</h3> -->
                  <img src="../images/logo.png" alt="" />
               </div>
               <form action="registerOkUser" name="frm" method="post" onsubmit="return formSubmit()">
                  <!-- <span>아이디</span> -->
                  <div class="form-group first">
                     <label for="mid" id="id">아이디를 입력해주세요 (5~15자 입력)</label> 
                     <input type="text" class="form-control" name="mid" id="mid">
                  </div>

 

2. Controller 작성 : view 의 ajax 와 통신하는 요청/응답 controller

- view ajax 에서 post 방식으로 요청을 보냈기 때문에 여기도 당연히 postMapping 어노테이션을 사용한다.

- ResponseBody 어노테이션은 자바 객체를 http 요청의 바디에 매핑하여 클라이언트로 전송한다. 

- 즉 @responseBody 를 사용하게 되면 controller 가 리턴에 해당하는 view 파일을 찾는게 아니라 return 하는 값을 그대로 갖고 요청에 따른 응답을 하게 되는 것이다. 따라서 controller 를 통해 json/xml 형식의 내용을 전달할때 주로 사용된다

- REST API 는 자동적으로 @responseBody 어노테이션이 붙어서 실행되기 때문에 요청에 따른 값을 전달할때 매우 유용하다.

   
	@Autowired
	MemberService ms; // 서비스 class
   
   // 아이디 중복 검사
   @PostMapping("login/checkid")
   @ResponseBody
   public int checkid(@RequestParam("id") String id, @RequestParam("type") String type) {

//    System.out.println("ajax 완료 : "+id);
//    String check = service.checkID(id);
//    System.out.println("중복검사 : "+a);

      if (id.equals(ms.checkID(id, type))) {
         return 1;
      }
      return 0;
   }

 

3. Service class 작성 : DB 와 Controller 을 이어주는 다리

- 이전과는 다르게 Controller 와 DAO 사이에 Service 에 해당하는 클래스 파일을 작성한다.

-  Service class 를 작성하는 이유는 사실 간단하다. 바로 기능에 따라서 클래스를 나누기 위해서이다. 이는 spring 에서 사용되는 MVC 패턴을 생각하면 더 이해하기가 쉽다.

- 애초에 MVC 는 데이터를 담는 model, 데이터를 보여주는 view, 데이터의 전송을 담당하는 controller 로 각각 나누어 보다 코드를 효율적이고 재사용 가능하도록하기 위해 사용하는 패턴이다. 그런데 사실 여기서 중요한 문제가 발생한다. MVC 를 기반으로 model에 데이터를 담는 코드는 어디에 작성하면 좋을까? 정확히는 DB 와 연결해서 model 에 데이터를 담는 코드를 어디에 작성하면 될까? 라는 것이다.

- 보통 이런 DB 와 연결하는 DAO 코드를 작성하고 @repository 어노테이션을 붙인 후 바로 Controller 에서 불러와서 사용한다. 물론 DB와 연결하는 간단한 코드들은 사실 상관없다. 그러나 DB에서 데이터를 가져와서 controller 에 넘어온 값과 비교후 연산된 결과를 model 에 담는 경우는 어떨까? 듣기만 해도 복잡한 코드이고, 이런 긴 코드를 사실 controller 에 작성하기에는 무리가 있다. 심지어 이 코드를 유지보수하면서 추가/수정해줘야 하는 경우에는 더욱 복잡해질 수 밖에 없다

- 따라서 Service 계층이 필요한 것이다. Service 계층을 통해서 Service 계층에서 DB 와 연결 후 필요한 데이터를 나누고 연산 후 return 한다. controller 에서는 추가 코드 없이 service 의 메서드를 불러온 후 return 받은 값을 model 에 담아 view 로 전달하게 된다. 이를 통해 각 소스의 목적이 명확해지고, 역할 분담이 확실해지며, 추후 유지보수하기 좋은 코드 작성이 가능하다.

// 아이디 중복 검사
public String checkID(String mid, String type) { 
   if(type.equals("user")) {
      return mdao.checkIdUser(mid);
   }else if(type.equals("com")) {
      return mdao.checkIdCom(mid);
   }
   
   return null;
}

 

4. DAO 작성 : DB 와 연결 후 Query 를 날려 해당 결과를 얻어오는 class

- SpringBoot 와 함께 Mybatis 를 사용하여 DAO 를 작성하였다. 정확히는 MyBatis 를 사용하되 xml 파일이 아닌 mapper 를 사용해서 쿼리문을 작성하고 db 와 연결해서 아이디를 기준으로 해당 유저가 있는지 확인하였다.

- mapper 어노테이션의 사용법은 이전에 작성한 글 참고!!

// 일반 유저 아이디 중복 검사
@Select("SELECT MID FROM member WHERE MID= #{mid}")
String checkIdUser(@Param("mid")String mid);

---

결과 확인

아주 깔끔하게 바로바로 실시간 중복검사!

 

---

- Reference

https://cheershennah.tistory.com/179

[Spring] @RequestBody / @ResponseBody 어노테이션 이란?

https://memostack.tistory.com/243

Spring @ResponseBody를 이용하여 데이터 반환 (API 개발)

https://devlog-wjdrbs96.tistory.com/209

[Spring] 스프링 웹 계층이란?