이번에 구현할 기능은 회원가입을 할 때나 로그인을 할 때 필요한 아이디 중복체크기능을 구현하겠습니다.
1. 아이디 체크를 위한 처리는 ajax로 처리해 페이지 전환없이 바로 확인 할 수 있도록 만들어 줬습니다.
- 사용이 가능한 아이디
- 중복된 아이디 값
이 두가지가 보이는 기능을 구현 했습니다.
2. ajax를 위한 jsp는 registerForm.jsp를 사용해서 구현 했습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script type="text/javascript">
function daumpost() {
new daum.Postcode({
oncomplete : function(data) {
// R : 도로명, J : 지번
console.log("data.userSelectedType : " + data.userSelectedType)
console.log("data.roadAddress : " + data.roadAddress)
console.log("data.jibunAddress : " + data.jibunAddress)
console.log("data.zonecode : " + data.zonecode)
var addr = ""
if (data.userSelectedType === 'R') {
addr = data.roadAddress
} else {
addr = data.jibunAddress
}
document.getElementById("addr1").value = data.zonecode
$("#addr2").val(addr)
$("#addr3").focus()
}
}).open();
}
function register() {
email_1 = $("#email").val()
email_2 = $("#email_2").val()
emailAll = email_1 + "@" + email_2
$("#email").val(emailAll)
addr1 = $("#addr1").val()
addr2 = $("#addr2").val()
addr3 = $("#addr3").val()
addr = addr1 + "/" + addr2 + "/" + addr3
$("#addr1").val(addr)
fo.submit()
}
function idChk() {
$.ajax({
url : "idChk",
type : "GET",
datatype : "json",
data : { "id" : $("#id").val() },
success : function(data){
console.log(data.result)
if(data.result == 1) {
$("#idChk").css('color', 'red')
$("#idChk").text("중복된 아이디 입니다")
}else if(data.result == 0) {
$("#idChk").attr("value", "Y")
$("#idChk").css('color','blue')
$("#idChk").text("사용 가능한 아이디 입니다")
}
}
})
}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>회원 가입 페이지 입니다.</h1>
<form id="fo" action="${contextPath }/user/register" method="post">
<input type="text" name="id" id="id" placeholder="가입 할 아이디 ">
<input type="button" onclick="idChk()" value="아이디 중복 체크"><br>
<span id="idChk"></span>
<br>
<input type="password" name="pw" placeholder="가입 할 비밀번호"> <br>
<input type="text" id="email" name="email" placeholder="가입 할 이메일">
@
<select id="email_2" name="email_2">
<option selected>선텍하세요!</option>
<option value="naver.com">naver.com</option>
<option>daum.net</option>
<option>google.com</option>
</select>
<input type="hidden" name="address">
<input type="hidden" name="email">
<input type="text" id="addr1" name="addr1" readonly placeholder="우편번호" >
<input type="text" id="addr2" name="addr2" readonly placeholder="주소" ><br>
<input type="text"id="addr3" name="addr3" placeholder="상세주소"><br>
<input type="button" onclick="daumpost()" value="우편번호 찾기"><br>
<input type="button" onclick="register()" value="회원가입">
</form>
</body>
</html>ajax에서 사용이 가능하다면 파란색글씨로 중복되었다면 빨간글씨로 처리를 해주었고
button을 사용해 즉각적으로 확인이 가능하도록 <span>태그 안에 결과 같이 보여지도록 만들어 주었습니다.
그리고 GET매핑으로 경로는 idChk로 보내주고 보내줄 데이터에는 id의 값을 넣어주어 보내주었습니다.
3. 그리고 나서 Controller에서 받아 줄 때는
@GetMapping(value = "user/idChk",produces="application/json; charset=utf-8")
@ResponseBody
public String idChk(@RequestParam("id") String id) {
System.out.println("idChk : " + id);
MemberDTO dto = ms.getUserData(id);
if(dto != null) {
return "{\"result\" : 1}";
}
return "{\"result\":0}";
}
이렇게 받아 주었고 @ResponseBody태그를 붙어 주어야 restController를 따로 부여를 안해도 결과 값을 보내줄 수 있고 produces="application/json; charset=utf-8";을 붙여 주어야 ajax를 사용해 json형태로 값을 처리할 수가 있습니다.
결과 값으로 ms의 getUserData를 선언해 id값을 넘겨주고 그 해당 id의 정보가 있다면 result의 값으로 1을 반환하여 해당 id가 있다는 것을 표현 했고 if문에 dto로 선언되 값이 담겨있다면 이라고 표현 되어 있습니다.
그리고 그게 아니라면 result의 반환 값으로 0을 리턴해주어 해당 id의 정보가 없다는 것을 표현 해주었습니다.
4. MemberSerivce의 영역에서 구현은
@Override
public MemberDTO getUserData(String id) {
return mapper.getUserData(id);
}값을 MemberDTO의 값을 리턴 해주기 때문에 타입을 MemberDTO로 설정 해주었고 단순한 id의 값을 DTO로 매핑시켜 값을 주기 때문에 다른 기능은 부여하지 않았습니다.
5. MemberMapper에서는 데이터베이스에 연결 시키기 위한 메소드를 getUserData로 선언 해주었고 타입을 MemberDTO로 선언 해주었습니다.
6. memberMapper.xml에서는 sql의 select 문을 사용해 해당 id의 정보만을 가져오는 메소드를 작성했습니다.
select 문을 사용하기 위해서는 resultMap으로 데이터베이스의 컬럼값과 MemberDTO의 변수를 매핑 시켜주어야 하고 그 후에 select 문에 사용함으로써 값을 잘 얻어오는 것을 알 수 있습니다.
'벡엔드 > spring' 카테고리의 다른 글
| [완벽 정리] Docker + Tomcat + Spring Boot 호환성 문제 해결 가이드 (0) | 2025.06.19 |
|---|---|
| [Spring boot] Layout Dialect로 공통 레이아웃 쉽게 구성하기 (Spring Boot + Thymeleaf) (0) | 2025.05.30 |
| SPRING(16) 회원 관리 기능 구현_프로필 사진 등록 (0) | 2022.02.01 |
| SPRING(15) 회원 관리 기능 구현_회원가입 기능 (0) | 2022.01.26 |
| SPRING(14) 로그인 팝업창으로 만들기 (0) | 2022.01.26 |
