https://youtu.be/j3LkMxW_d1E?si=X688POC-UDMj1x6F
이 글은, 코딩레시피 님의 <스프링 부트 쉽게 해보기> 영상을 참조하였으며, 해당 영상을 공부하며 겪었던 오류들과 관련 지식들을 정리했습니다.
01. 이메일 중복체크 추가 (front)
- save.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>save</title>
</head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<body>
<!-- action 속성 : from에 작성한 데이터를 어디로 보낼지 지정-->
<form action="/member/save" method="post">
<!-- name 속성 : 서버로 전송할 때 변수 이름의 역할 -->
이메일: <input type="text" name="memberEmail" id="memberEmail"
onblur="emailCheck()"> <br>
<span id="check-result"></span>
비밀번호: <input type="password" name="memberPassword"> <br>
이름: <input type="text" name="memberName"> <br>
<input type="submit" value="회원가입">
</form>
</body>
<script th:inline="javascript">
const emailCheck = () => {
const email = document.getElementById("memberEmail").value;
const checkResult = document.getElementById("check-result");
console.log("입력값: ", email);
$.ajax({ // jquery를 쓰는 이유
// 요청 방식: post, url: "email-check", 데이터: 이메일
type: "post",
url: "/member/email-check",
data: {
"memberEmail": email
},
success: function(res){
console.log("요청성공", res);
if (res === "ok"){
console.log("사용 가능한 이메일");
checkResult.style.color = "green";
checkResult.innerHTML = "사용가능한 이메일";
}else{
console.log("이미 사용중인 이메일");
checkResult.style.color = "red";
checkResult.innerHTML = "이미 사용중인 이메일";
}
},
error: function (err){
console.log(err);
}
})
}
</script>
</html>
javaScript와 jQuery를 사용해서 이메일 중복 확인을 수행하는 함수인 emailCheck를 정의한다.
jQuery를 사용해서 AJAX 요청을 보낸다.
이때 AJAX 요청이란, Asynchronous JavaScript and XML의 약자로, 비동기적으로 서버와 브라우저 간의 데이터를 교환하기 위한 기술이다. 기본적으로 웹 페이지를 새로고침하지 않고도 서버로부터 데이터를 가져오거나 서버로 데이터를 보낼 수 있게 해준다.
코드에서는 요청 방식은 POST, 요청 URL은 "/member/email-check", 데이터는 memberEmail 키에 이메일 값을 가진 객체로 구성한다.
AJAX 요청이 성공하면 서버에서 받은 응답에 따라 처리를 한다. 응답이 ok인 경우, 사용 가능한 이메일로 간주하고 이에 맞게 결과를 표시한다. 응답이 ok가 아닌 경우, 이미 사용중인 이메일로 간주하고 이에 맞게 결과를 표시한다.
AJAX 요청이 실패한 경우, 에러를 콘솔에 출력한다.
02. 이메일 중복체크 추가 (back)
- memberController
@PostMapping("/member/email-check")
public @ResponseBody String emailCheck(@RequestParam("memberEmail") String memberEmail){
System.out.println("memberEmail = "+ memberEmail);
String checkResult = memberService.emailCheck(memberEmail);
if (checkResult != null){
return "ok";
}else{
return "no";
}
}@ResponseBody : 메서드가 반환하는 데이터가 직접 HTML 응답의 본문으로 사용되도록 한다. 즉 클라이언트에게 HTML이나 뷰가 아닌 순수한 데이터를 전달하기 위해 사용한다. (ok/no)
@RequestParam("memberEmail") : HTTP 요청의 파라미터중에서 memberEmail이라는 이름의 값을 추출하여 memberEmail 변수에 할당한다.
memberService를 통해 이메일 중복하는 메서드를 호출하고, 그 결과를 문자열 형태로 변환하여 checkResult에 저장한다.
이메일 중복 확인 결과에 따라 ok 또는 no를 반환한다. 이는 클라이언트 측에서 이메일 중복 여부를 판단하는 데 사용된다.
- memberService
public String emailCheck(String memberEmail) {
Optional<MemberEntity> byMemberEmail = memberRepository.findByMemberEmail(memberEmail);
if (byMemberEmail.isPresent()){
// 조회 결과가 있다 -> 사용할 수 없다.
return null;
}else{
// 조회 결과가 없다 -> 사용할 수 있다.
return "ok";
}
}
주어진 이메일이 이미 데이터베이스에 존재하는지 여부를 확인하는 메서드를 작성한다.
1편에 작성했던 memberRepository의 findByMemberEmail 메서드를 사용했다.
조회 결과가 있으면 사용할 수 없으므로 null을 반환하고, 조회 결과가 있으면 ok를 반환한다.
03. 결과
회원가입시 이미 사용중인 이메일을 입력할 경우
콘솔 창 :
html파일을 수정하는 과정에서, 이메일 input 속성 값 중 하나를 바꿀 수 있다.
onkeyup="emailCheck()"인데, 이는 입력 키가 하나씩 변할 때마다 emailCheck 함수를 호출한다는 뜻이다.
예를 들어, 이메일 창에 g - o - o - d 라고 입력하면, g,o,o,d 각각의 키 하나마다 함수를 호출한다.
다만 현재의 코드는 onblur = "emailCheck()"이다. 해당 칸의 변화가 끝나면 그때 emailCheck 함수를 호출한다는 뜻이다.
이메일을 입력한 후 다음 칸을 클릭하면 그때 함수를 한 번 호출한다.
예를 들어, 이메일 창에 good 이라고 입력하고 다음 칸(비밀번호나 이름)을 클릭하면 그때 emailCheck 함수가 한 번 호출된다.
따라서 서버의 과부화를 줄이기 위해 onblur을 사용하는 것이 좋은 방안 같다.
+) 이미 사용중인 이메일을 입력했을 때, 회원가입이 안되도록 처리가 따로 필요하다. 현재는 경고 문구만 나오고 가입이 불가능하지는 않다.
'Heute lerne ich > Java' 카테고리의 다른 글
| [스프링부트 게시판 프로젝트] 목록/조회/수정/삭제 (0) | 2024.03.29 |
|---|---|
| [스프링 부트 게시판 프로젝트] 게시글 작성 (0) | 2024.03.26 |
| [스프링부트 회원 프로젝트] 로그아웃 (1) | 2024.03.24 |
| [스프링부트 회원 프로젝트] 회원목록 출력/상세 조회/수정/삭제 (1) | 2024.03.23 |
| [스프링부트 회원 프로젝트] 로그인 (0) | 2024.03.21 |
