-
[게시판 만들기] 4️⃣ AJAX를 통한 검증 처리Spring Framework 2024. 5. 13. 15:15
https://github.com/jngsngjn/board-study
GitHub - jngsngjn/board-study: 게시판을 만들어 봅시다!
게시판을 만들어 봅시다! Contribute to jngsngjn/board-study development by creating an account on GitHub.
github.com
아이디 중복 확인
일반적인 웹 사이트를 떠올려보면 회원가입 시 아이디 중복 검사는 다음과 같이 이루어진다.
- 아이디 입력 → 중복 확인 버튼 클릭 → 사용 가능한 경우 사용 버튼을 클릭
- 여기서 중요한 점은 중복 확인 버튼을 클릭했을 때 별도의 페이지로 이동하는 것이 아닌 현재 페이지에서 아이디 중복 검사가 된다는 것이다.
- 이렇게 페이지 전환 없이 서버와 비동기적으로 통신하기 위해 주로 AJAX(Asynchronous JavaScript and XML)라는 기술을 사용한다.
- AJAX를 사용하면 페이지 전환 없이 서버와 통신할 수 있으므로 사용자 경험이 향상된다.
- jquery와 AJAX를 사용하여 아이디 중복 검사 로직을 구현해보았다.
registerForm.html
- 변경 버튼은 최초에 숨긴다.
<html lang="ko" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>회원가입</title> <link rel="stylesheet" type="text/css" href="/css/register.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="/js/register.js"></script> </head> <body> <form action="/register" method="post" th:object="${registerForm}" onsubmit="return validateForm()"> <input type="text" th:field="*{loginId}" placeholder="아이디" class="inputs" th:errorclass="error-input"> <button type="button" id="duplicateCheckButton" onclick="checkDuplicate()">중복 확인</button> <button type="button" id="changeButton" onclick="changeLoginId()" style="display: none; margin-left: 10px;">변경</button> <div class="error" th:errors="*{loginId}"></div> <br> <input type="password" th:field="*{password}" placeholder="비밀번호" class="inputs" th:errorclass="error-input"> <div class="error" th:errors="*{password}"></div> <br> <input type="text" th:field="*{name}" placeholder="이름" class="inputs" th:errorclass="error-input"> <div class="error" th:errors="*{name}"></div> <br> <input type="email" th:field="*{email}" placeholder="이메일" class="inputs" th:errorclass="error-input"> <div class="error" th:errors="*{email}"></div> <br> <input type="hidden" name="_csrf" th:value="${_csrf.token}"/> <button type="submit">회원가입</button> <a href="/boards">뒤로 가기</a> </form> </body> </html>register.js
- 중복 확인 버튼을 누를 시 서버와 통신을 하고 결과를 받아온다.
- url에 맞는 컨트롤러가 있어야 한다.
- 스프링 시큐리티를 사용할 경우 별도의 CSRF 설정을 하지 않았다면 CSRF 토큰을 포함시켜 서버에 요청해야 한다.
- 아이디를 사용하겠다고 응답할 경우 아이디 입력란을 읽기 전용으로 바꾼다. 또한, 중복 확인 버튼을 숨기고 변경 버튼을 보이게 한다.
- 변경 버튼을 클릭할 경우 아이디 입력란을 수정 가능으로 바꾼다. 또한, 변경 버튼을 숨기고 중복 확인 버튼을 보이게 한다.
let duplicateChecked = false; function checkDuplicate() { const loginId = $("#loginId").val().trim(); const csrfToken = $("meta[name='_csrf']").attr("content"); const csrfHeader = $("meta[name='_csrf_header']").attr("content"); if (loginId === "") { alert("아이디를 입력해주세요."); duplicateChecked = false; return; } $.ajax({ url: "/register/check-duplicate-id", type: "POST", data: {loginId: loginId}, beforeSend: function(xhr) { xhr.setRequestHeader(csrfHeader, csrfToken); }, success: function(response) { if (response) { if (confirm("사용 가능한 아이디입니다. 사용하시겠습니까?")) { // 사용 버튼을 클릭한 경우 추가 작업 수행 $("#loginId").prop("readonly", true); $("#duplicateCheckButton").hide(); $("#changeButton").show(); duplicateChecked = true; } } else { alert("이미 사용 중인 아이디입니다."); duplicateChecked = false; } }, error: function() { alert("중복 확인 중 오류가 발생했습니다."); duplicateChecked = false; } }); } function validateForm() { if (!duplicateChecked) { alert("아이디 중복 확인을 완료해 주세요."); return false; } return true; } function changeLoginId() { $("#loginId").prop("readonly", false); $("#duplicateCheckButton").show(); $("#changeButton").hide(); duplicateChecked = false; }RegisterController
- 아이디 중복 여부를 @ResponseBody를 통해 JSON 형식으로 반환한다.
@Controller @RequestMapping("/register") public class RegisterController { private final UserService userService; public RegisterController(UserService userService) { this.userService = userService; } @PostMapping("/check-duplicate-id") @ResponseBody public boolean checkDuplicateId(@RequestParam String loginId) { return !userService.isDuplicateId(loginId); } }
이번 실습을 통해 평소에 웹 페이지를 이용할 때는 몰랐던 많은 것들이 AJAX를 통해 구현되어 있음을 알게 되었다. 정말 간단한 실습이었지만 AJAX를 통해 어떻게 서버에 요청을 보내고, 서버 측에서 요청을 받고 처리하는 작업을 해보면서 어느정도 감이 잡힌 것 같다. @ResponseBody 어노테이션을 실제로 이렇게 활용해본 것은 처음이라 재밌었다!
'Spring Framework' 카테고리의 다른 글
[Spring Security] 로그인 실패 시 계정 잠금 (0) 2024.05.16 [게시판 만들기] 5️⃣ 이메일 인증 처리 (1) 2024.05.14 [게시판 만들기] 3️⃣ CSS 적용하기 (1) 2024.05.13 [게시판 만들기] 2️⃣ Spring Security 적용 (0) 2024.05.12 [게시판 만들기] 1️⃣ 설계와 CRUD 구현 (2) 2024.05.10