🌷 회원 가입
이번에는 회원 가입 기능을 구현해 보자!
👀 코드로 살펴보기
🌼 VS Code
🌱 signUp.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<link rel="stylesheet" href="/resources/css/member/signUp-style.css">
</head>
<body>
<main>
<%-- header.jsp include --%>
<%-- 다른 JSP 코드를 현재 위치에 포함
webapp부터의 jsp 경로를 작성 --%>
<jsp:include page="/WEB-INF/views/common/header.jsp"/>
<section class="signUp-content">
<form action="/member/signUp" method="POST" name="signUpFrm" id="signUpFrm">
<!-- 이메일 입력 -->
<label for="memberEmail">
<span class="required">*</span> 아이디(이메일)
</label>
<div class="signUp-input-area">
<input type="text" name="memberEmail" id="memberEmail"
placeholder="아이디(이메일)" maxlength="30" autocomplete="off">
<button id="sendAuthKeyBtn" type="button">인증번호 받기</button>
</div>
<span class="signUp-message" id="emailMessage">메일을 받을 수 있는 이메일을 입력해주세요.</span>
<!-- 인증번호 입력 -->
<label for="emailCheck">
<span class="required">*</span> 인증번호
</label>
<div class="signUp-input-area">
<input type="text" name="authKey" id="authKey" s placeholder="인증번호 입력" maxlength="6" autocomplete="off" >
<button id="checkAuthKeyBtn" type="button">인증하기</button>
</div>
<span class="signUp-message" id="authKeyMessage"></span>
<!-- 인증번호가 일치하지 않습니다 -->
<!-- 비밀번호/비밀번호 확인 입력 -->
<label for="memberPw">
<span class="required">*</span> 비밀번호
</label>
<div class="signUp-input-area">
<input type="password" name="memberPw" id="memberPw"
placeholder="비밀번호" maxlength="20" >
</div>
<div class="signUp-input-area">
<input type="password" name="memberPwConfirm" id="memberPwConfirm"
placeholder="비밀번호 확인" maxlength="20" >
</div>
<span class="signUp-message" id="pwMessage">영어,숫자,특수문자(!,@,#,-,_) 6~20글자 사이로 입력해주세요.</span>
<!-- 닉네임 입력 -->
<label for="memberNickname">
<span class="required">*</span> 닉네임
</label>
<div class="signUp-input-area">
<input type="text" name="memberNickname" id="memberNickname" placeholder="닉네임" maxlength="10" >
</div>
<span class="signUp-message" id="nickMessage">한글,영어,숫자로만 2~10글자</span>
<!-- 전화번호 입력 -->
<label for="memberTel">
<span class="required">*</span> 전화번호
</label>
<div class="signUp-input-area">
<input type="text" name="memberTel" id="memberTel" placeholder="(- 없이 숫자만 입력)" maxlength="11">
</div>
<span class="signUp-message" id="telMessage">전화번호를 입력해주세요.(- 제외)</span>
<!-- 주소 입력 -->
<label for="memberAddress">주소</label>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="우편번호" maxlength="6">
<button type="button">검색</button>
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="도로명/지번 주소">
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="상세 주소">
</div>
<button id="signUpBtn">가입하기</button>
</form>
</section>
</main>
<%-- footer.jsp include --%>
<jsp:include page="/WEB-INF/views/common/footer.jsp"/>
</body>
</html>🌱 signUp-style.css
.signUp-content{
display: flex;
justify-content: center;
height: auto;
}
#signUpFrm{
margin-top: 30px;
}
#signUpFrm > label{
display: block;
margin-top: 40px;
font-size: 18px;
}
#signUpFrm > span{
display: block;
height: 20px;
}
/* 필수 작성 */
.required{
color: red;
padding: 0 5px;
}
/* input 태그를 감싸고 있는 div 태그 */
.signUp-input-area{
width: 500px;
height: 50px;
margin-bottom: 10px;
border-bottom: 2px solid #ddd;
display: flex;
align-items: center;
}
.signUp-input-area > input{
width: 70%;
height: 100%;
padding : 15px 10px 5px;
font-size: 16px;
font-weight: bold;
border : none;
outline: none;
}
.signUp-input-area > button{
width: 30%;
height: 70%;
background-color: white;
border: 1px solid gray;
cursor: pointer;
}
/* :focus-within : 내부 input 요소에 포커스가 맞춰졌을 때 */
.signUp-input-area:focus-within{
border-bottom-color: #455ba8;
}
/* 입력 관련 메세지 */
.signUp-message{
font-size: 14px;
letter-spacing: -1px;
}
/* 메세지 색상 지정 */
.confirm{ color : green; }
.error{ color : red; }
/* 회원가입 버튼 */
#signUpBtn{
width: 100%;
padding: 10px;
margin: 50px 0;
border: none;
font-size: 20px;
font-weight: bold;
background-color: #455ba8;
color : white;
cursor: pointer;
}
#signUpBtn:active{
transform: scale(0.95);
}🌱 main.jsp
...
<article class="signup-find-area">
<a href="/member/signUp">회원가입</a>
<span>|</span>
<a href="#">ID/PW 찾기</a>
</article>
...🌼 Eclipse
🌱 MemberController.java
...
// 회원 가입 페이지로 이동
@GetMapping("/signUp")
public String signUp() {
// /WEB-INF/views/member/signUp.jsp forward(요청 위임)
// -> ViewResolver가 prefix, suffix를 리턴 값 앞, 뒤에 붙임
return "member/signUp";
}
// 회원 가입 진행
@PostMapping("/signUp")
public String signUp(Member inputMember
, String[] memberAddress
, RedirectAttributes ra) {
// ----------- 매개 변수 설명 -----------
// Member inputMember : 커맨드 객체(제출된 파라미터가 저장된 객체)
// String[] memberAddress :
// input name = "memberAddress" 3개가 저장된 배열
// RedirectAttributes ra :
// 리다이렉트 시 데이터를 request scope로 전달하는 객체
// ----------------------------------
// 12345^^^서울시^^^2층
// 주소 구분자를 , -> ^^^로 변경
// String addr = inputMember.getMemberAddress().replaceAll(",", "^^^");
// inputMember.setMemberAddress(addr);
// -> 클라이언트가 ,를 직접 입력하면 문제가 발생함
// 만약 주소를 입력하지 않은 경우(,,) null로 변경
if(inputMember.getMemberAddress().equals(",,")) {
inputMember.setMemberAddress(null);
} else {
// String.join("구분자", String[])
// 배열의 요소를 하나의 문자열로 변경
// 단, 요소 사이에 "구분자" 추가
String addr = String.join("^^^", memberAddress);
inputMember.setMemberAddress(addr);
}
// 회원 가입 서비스 호출
int result = service.signUp(inputMember);
// 가입 성공 여부에 따라 주소 결정
String path = "redirect:";
String message = null;
if(result > 0) { // 가입 성공
path += "/"; // 메인 페이지
message = inputMember.getMemberNickname() + " 님의 가입을 환영합니다! :)";
} else { // 가입 실패
// 회원 가입 페이지
// path += "/member/signUp"; // 절대 경로
path += "signUp"; // 상대 경로
message = "회원 가입 실패 ;(";
}
// 리다이렉트 시 session에 잠깐 올라갔다 내려오도록 세팅
ra.addFlashAttribute("message", message);
return path;
}
...🌱 MemberService.java
...
/** 회원 가입 서비스(비밀번호 암호화 필요)
* @param inputMember
* @return result(0:실패, 1:성공)
*/
int signUp(Member inputMember);
...🌱 MemberServiceImpl.java
...
// @Transactional(rollbackFor = {Exception.class})
// 예외가 발생하면 rollback
// 발생 안 하면 Service 종료 시 commit -> Spring AOP라고 함
// 회원 가입 서비스
@Transactional(rollbackFor = {Exception.class})
@Override
public int signUp(Member inputMember) {
// 비밀번호 BCrypt를 이용하여 암호화 후 다시 inputMember에 세팅
String encPw = bcrypt.encode(inputMember.getMemberPw());
inputMember.setMemberPw(encPw);
// DAO 호출
int result = dao.signUp(inputMember);
return result;
}
...🌱 MemberDAO.java
...
/** 회원 가입 DAO
* @param inputMember
* @return result
*/
public int signUp(Member inputMember) {
// 1) mapper의 namespace를 지정 후
// 그 안에 어떤 id를 가지는 SQL을 수행할지 작성
// 2) SQL에 사용할 데이터를 전달(자료형 중요!)
// return sqlSession.insert(1) "namespace.id", 2) inputMember);
// insert 성공한 행의 개수 반환
return sqlSession.insert("memberMapper.signUp", inputMember);
}
...🌱 member-mapper.xml
...
<!--
insert, update, delete와 같은 DML 구문은
수행 결과가 항상 성공한 행의 개수(int 자료형)로 고정되어 있음
-> resultType을 작성하지 않는다! (항상 int니까)
-->
<!-- 회원 가입 --> <!-- mybatis-config.xml에 지정된 별칭 -->
<insert id="signUp" parameterType="Member">
INSERT INTO "MEMBER"
VALUES(SEQ_MEMBER_NO.NEXTVAL
, #{memberEmail}
, #{memberPw}
, #{memberNickname}
, #{memberTel}
, #{memberAddress}
, NULL, DEFAULT, DEFAULT, DEFAULT)
</insert>
...💻 구현 화면
유효성 검사까지 모두 가능한 회원 가입 페이지가 구현되었다!
풀스택 개발자 기록집 📁