회원가입 / ajax 비동기 처리
회원가입 부분은 전 시간 로그인 기능 구현에서
index.jsp의 onclick="location.href='register'"> 이 부분과 연결되는 부분이라고 할 수 있다.
회원가입시 필요한 부분 : 아이디 중복 체크, 회원에 등록시키기
아이디 중복이 아닌 경우 => 사용 가능 아이디 팝업 뜨면서 가입 버튼 열림(ajax 처리)
아이디 중복인 경우 => 해당 아이디 존재 팝업 뜨면 가입 버튼 막힘(ajax 처리)
controller
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | /** register **/ @RequestMapping(value="/register", method=RequestMethod.GET) public void registerGet() throws Exception { System.out.println("******GET register"); } @RequestMapping(value="/register", method=RequestMethod.POST) public String memberRegister(MemberVO memberVO) throws Exception { logger.info("***********register POST"); int count = boardService.idCheck(memberVO.getMemberId()); try { if(count == 0) boardService.memberRegister(memberVO); } catch (Exception e) { logger.info("*****존재 하는 아이디"); } return "redirect:/"; } @ResponseBody @RequestMapping(value="/idCheck", method=RequestMethod.POST) public int IdCheck(@RequestBody String memberId) throws Exception { int count = 0; count = boardService.idCheck(memberId); return count; } | cs |
1. get / post 방식
회원가입 부분에서 get방식과 post방식을 나눈 이유는 역할을 나누는 게 효율적이기 때문이다.
get방식으로는 "화면만 보여주기"
즉, 리턴 주소를 따로 써주지 않아도 get방식이면 앞의 로그인 예제처럼 뷰를 리턴한다.
post방식으로는 "ajax를 통해 회원가입 유효성 체크/아이디 중복 체크"를 하기 위해서이다.
2. 회원가입시 필요한 두 개의 서비스 (idCheck와 memberRegister)
회원가입시 필요한 게 무엇일까?
바로 검증과 가입이다. 중복된 아이디가 있는데 가입할 수는 없다.
idCheck는 중복 아이디가 있는지 검증하고, 중복 아이디가 없을 경우는
memberRegister를 통해서 가입을 하게 해준다.
바로 이 내용들은 ajax를 통해 처리할 것이다.
3. /ajax와 통신하는 idCheck
이 부분은 비동기 방식으로 DB에 memberId가 있는지 없는지를 체크한다.
BoardService, BoardMapper(DAO), BoardMapper
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | //BoardService public int idCheck(String memberId) throws Exception { return boardMapper.idCheck(memberId); } public void memberRegister(MemberVO memberVO) throws Exception { boardMapper.memberRegister(memberVO); } //BoardMapper public int idCheck(String memberId) throws Exception; public void memberRegister(MemberVO memberVO) throws Exception; //BoardMapper.xml <select id="idCheck" parameterType="String" resultType="Integer"> SELECT count(*) FROM hello_member WHERE memberId = #{memberId} </select> <insert id="memberRegister"> INSERT into hello_member(memberId, memberPass, memberName) VALUES (#{memberId}, #{memberPass}, #{memberName}) </insert> | cs |
서비스단을 통해 idCheck와 memberRegister이 확실하게 나누어진다.
idCheck은 내가 쓴 memberId와 일치하는 아이디가 있으면 0개 이상의 수를 리턴한다.
그런 경우, 컨트롤러에서는 가입을 막는다.
파라미터는 memberId로, 반환타입으로는 int형 wrapper클래스로 정한다.
wrapper 클래스 참고 : https://yulfsong.tistory.com/54
memberRegister는 가입단계이기 때문에 MemberVO가 필요하고
insert를 통해 새로운 멤버로 등록해주면 된다.
register.jsp 전문
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script> <html> <head> <script type="text/javascript"> /* 회원가입 유효성 체크 */ function registerCheck() { if($.trim($('#memberName').val()) == '') { alert("이름을 입력해주세요."); return false; } if($.trim($('#memberId').val()) == '') { alert("아이디를 입력해주세요."); return false; } if($.trim($('#memberPass').val()) == '') { alert("비밀번호를 입력해주세요."); return false; } if(confirm("회원가입을 하시겠습니까?")){ alert("회원가입이 완료되었습니다. 감사합니다."); $("form").submit(); } } /* 아이디 중복 체크 : ajax 비동기처리 */ function idCheck() { var memberId = $("#memberId").val(); if(memberId.search(/\s/) != -1) { alert("아이디에는 공백이 들어갈 수 없습니다."); } else { if(memberId.trim().length != 0) { $.ajax({ async : true, type : 'POST', data: memberId, url: "/idCheck", dataType: "json", contentType: "application/json; charset=UTF-8", success: function(count) { if(count > 0) { alert("해당 아이디 존재"); $("#submit").attr("disabled", "disabled"); window.location.reload(); } else { alert("사용가능 아이디"); $("#submit").removeAttr("disabled"); } }, error: function(error) { alert("아이디를 입력해주세요."); } }); } else { alert("아이디를 입력해주세요."); } } } </script> <head> </head> <body> <h2>[회원가입]</h2> <form action='<c:url value='/register'/>' method="post"> <div>이름<input type="text" name="memberName" id="memberName" placeholder="이름을 입력하세요."></div> <div>아이디<input type="text" name="memberId" id="memberId" placeholder="아이디를 입력하세요."></div> <button type="button" onclick="idCheck()">아이디 중복확인</button> <div>비밀번호<input type="text" name="memberPass" id="memberPass" placeholder="비밀번호를 입력하세요."></div> </form> <button type="button" id="submit" disabled="disabled" onclick="registerCheck()">가입완료</button> <button type="button" onclick="location.href='/'">처음으로</button> </body> </html> | cs |
참고로 button은 form안에 포함시켜서 넣으면 안된다.
form 태그 안에서 button 클릭시 자동으로 onSubmit 이벤트가 발생한다.
회원가입 창에 진입하면 보이는 화면이다.
해당 회원가입 프로세스는 아이디 중복확인을 반드시눌러야 하며 중복이 아닌 경우만
가입완료 버튼이 활성화된다는 특성을 지니고 있다.
Ajax 처리 방식 뜯어보기
/* 아이디 중복 체크 : ajax 비동기처리 */
<button type="button" onclick="idCheck()">아이디 중복확인</button>
아이디 중복확인을 누르면 idCheck() 함수를 통해 자바스크립트의 function idCheck()로 진입한다.
$("#memberId").val();
제이쿼리 val() 함수는 해당 양식의 값을 가져오므로 내가 아이디에 codefree를 입력하면 그 값이 된다.
값을 쉽게 쓰기 위해 memberId에 담아준다.
memberId.search(/\s/) != -1
if(memberId.trim().length != 0)
공백인 아이디를 가입시키거나 빈값을 가입시키면 큰일나니까 해당 코드로 전부 막아준다.
이 부분은 DB에서 해결할 수도 있는데 나는 자바스크립트가 편해서 이렇게 해주었다.
$.ajax({
async : true, // true면 비동기방식을 사용하겠다는 의미.
type : 'POST', // post방식으로 보낼 건데,
data: memberId, // memberId라는 데이터를 보낼 것이다.
url: "/idCheck", // 컨트롤러의 /idCheck를 탈 것이다.
dataType: "json", // json형식의 데이터를 보낼 것이다.
contentType: "application/json; charset=UTF-8", // json형태로 보낼때는 application/json를 붙여줘야한다.
success: // 통신이 성공했을때 보여줄 내용, ()에는 데이터를 보낸 곳의 리턴값이 들어온다.
error: // 통신이 실패했을때 보여줄 내용
});
ajax를 사용하는 가장 큰 이유는 값을 기다렸다가 오면 해결하지 않고
페이지의 이동없이 실시간으로 통신할 수 있다는 장점때문이다.
여기서는 회원가입시 로딩이 너무 느리면 이용하기가 힘드니까
실시간으로 아이디를 체크하기 위해 사용한다.
만약 data에서 여러 json 데이터를 보낸다면 json의 문법에 맞게
{"memberId": "codefree", "name": "김코드"} 이런식으로 보내면 될것이다.
성공한 경우, 중복 아이디가 없는 경우 막힌 버튼이 풀어지지만
중복 아이디가 있으면 재로딩된다.
위 ajax 코드와 통신할 controller의 /idCheck
@ResponseBody
웬지 json 형태로 자바에 담길 때 그 데이터를 변환해주는 역할이 필요할 것 같지 않은가
ResponseBody는 서버로 보낸 json데이터를 자바 객체로 매핑한다.
@RequestBody
자바 객체를 HTTP 응답 body로 전송하기 위해 사용한다.
이 어노테이션을 빼먹으면 memberId는 null로 찍히게 되는데
우리는 null인 경우를 쿼리에서 처리해주지 않았기 때문에
혹시 모르는 일을 방지 하기 위해 if로 null 체크를 해두었다.
/* 회원가입 유효성 체크 */
모든 양식의 값이 입력되어야만 가입을 할 수 있도록 조치를 취해두었다.
전체적인 완성작은 해당 소스를 참고
github.com/yulfsong/spring-boot-hello-project
github.com
'프로그래밍 > SpringBoot' 카테고리의 다른 글
| [스프링 부트 게시판] 회원 탈퇴, 로그아웃 / ajax 비동기 처리 (0) | 2020.10.23 |
|---|---|
| [스프링 부트 게시판] 회원정보 수정 / ajax 비동기 처리 (0) | 2020.10.22 |
| [스프링 부트 게시판] 로그인 기능 / 세션 구현하기 (0) | 2020.10.15 |
| [스프링 부트 게시판] 게시글 삭제 만들기 (0) | 2020.09.30 |
| [스프링 부트 게시판] 게시글 수정 만들기 (0) | 2020.09.30 |
