📍 구분자 String.join("구분자", String[])
📍 fetch()
JS의 Promise객체를 이용한 비동기 요청 방법으로 JS에서 기본 제공함
- Promise(약속) 객체 : 비동기 요청에 대한 처리가 완료되면 바로 결과를 제공하겠다고 약속
- fetch(가지고 오다) API
📍 GET 방식
fetch("요청주소") // 지정된 주소로 GET방식 비동기 요청(ajax)
// 전달하고자 하는 파라미터를 주소 뒤 쿼리스트링으로 추가
.then(response => response 파싱) // 요청에 대한 응답 객체(response)를 필요한 형태로 파싱
.then(response 파싱 데이터 => {}); // 첫 번째 then에서 파싱한 데이터를 이용한 동작 작성
.catch(e => {}) // 예외 발생시 처리할 내용을 작성
📍 @ResponseBody
HttpMessageConverter를 이용해 JS에서 인식할 수 있는 형태(TEXT/JSON) 변환 + 비동기 요청한 곳으로 돌아감
<a href="/member/signUp">회원가입</a>🔑 정규식 주의
<%@ 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>
<!-- 다른 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" id="sample6_postcode" placeholder="우편번호" maxlength="6">
<button type="button" onclick="sample6_execDaumPostcode()">검색</button>
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" id="sample6_address" placeholder="도로명/지번 주소">
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" id="sample6_detailAddress" placeholder="상세 주소">
</div>
<button id="signUpBtn">가입하기</button>
</form>
</section>
</main>
<jsp:include page="/WEB-INF/views/common/footer.jsp"/>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
}
}).open();
}
</script>
<script src="/resources/js/member/signUp.js"></script>
</body>
</html>// 회원가입 JS
/* 정규 표현식(Regular Expression)
https://regexper.com/
https://regexr.com/
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D
- 특정한 규칙을 가진 문자열 집합을 표현하는데 사용하는 형식 언어
- 문자열에 대한 검색, 일치 여부, 치환 등을 수행할 수 있음
*** JS 정규표현식 객체 생성 방법 ***
1. const regEx = new RegExp("정규표현식");
2. const regEx = /정규표현식/;
*** 정규표현식 객체가 제공하는 메서드(함수) ***
1. regEx.test(문자열)
-> 문자열이 정규표현식 패턴에 부합하면 true, 아니면 false
2. regEx.exec(문자열)
-> 문자열이 정규표현식 패턴에 부합하면
첫 번째 매칭되는 문자열을 반환,
없으면 null 반환
*** 정규 표현식의 메타 문자***
문자열의 패턴을 나타내는 문자.
문자마다 지정된 특별한 뜻이 담겨있다.
a (일반문자열) : 문자열 내에 a라는 문자열이 존재하는 검색
[abcd] : 문자열 내에 a,b,c,d 중 하나라도 일치하는 문자가 있는지 검색
^(캐럿) : 문자열의 시작을 의미
$(달러) : 문자열의 끝을 의미
\w (word, 단어) : 아무 글자(단, 띄어쓰기, 특수문자, 한글 X)
\d (digit, 숫자) : 아무 숫자(0~9 중 하나)
\s (space, 공간) : 아무 공백 문자(띄어쓰기, 엔터, 탭 등)
[0-9] : 0부터 9까지 모든 숫자
[ㄱ-힣] : ㄱ부터 힣까지 모든 한글
[가-힣] : 가부터 힣까지 모든 한글(자음만, 모음만 있는 경우 제외)
[a-z] : 모든 영어 소문자
[A-Z] : 모든 영어 대문자
* 특수문자의 경우 각각을 입력하는 방법밖엔 없음
단, 메타문자와 중복되는 특수문자는
앞에 \(백슬래시)를 추가하여 탈출 문자(Escape)로 만들어 사용
* 수량 관련 메타 문자
a{5} : a문자가 5개 존재 == aaaaa
a{2,5} : a가 2개 이상 5개 이하 == aa, aaa, aaaa, aaaaa
a{2,} : a가 2개 이상
a{,5} : a가 5개 이하
* : 0개 이상 == 0번 이상 반복 == 있어도되고, 없어도 되고
+ : 1개 이상 == 1번 이상 반복
? : 0개 또는 1개
. : 1칸 (개행문자를 제외한 문자 하나)
*/
// JS 객체 : {"K":V, "K":V} Map 형식
// 특징
// 1) 원하는 value를 얻어오는 방법
// - 객체명.key
// - 객체명["key"]
// 2) 객체에 특정 Key가 존재하지 않으면 추가할 수 있다.
// ex) cosnt obj = {"a" : 1, "b" : 2}
// obj.c = 3 // -> {"a" : 1, "b" : 2, "c" : 3}
// 3) 객체에 특정 Key를 삭제할 수 있다.
// ex) cosnt obj = {"a" : 1, "b" : 2}
// delete obj.b; // {"a" : 1}
/* 유효성 검사 진행 여부 확인용 객체 */
// -> 모든 value가 true인 경우에만 회원가입 진행
const checkObj = {
"memberEmail" : false,
"memberPw" : false,
"memberPwConfirm" : false,
"memberNickname" : false,
"memberTel" : false
}
// 이메일 유효성 검사
const memberEmail = document.getElementById("memberEmail");
const emailMessage = document.getElementById("emailMessage");
// 이메일이 입력될 때마다
memberEmail.addEventListener("input", () => {
// 입력된 이메일이 없을 경우
if(memberEmail.value.trim().length == 0){
memberEmail.value = "";
emailMessage.innerText="메일을 받을 수 있는 이메일을 입력해주세요.";
emailMessage.classList.remove("error", "confirm"); // toggle도 썼었던 거 같은데 뭐더라????????????
checkObj.memberEmail = false; // 빈칸 == 유효하지 않음
return;
}
// 정규 표현식을 이용해서 유효한 형식인지 판별
// 1) 정규 표현식 객체 생성
const reqEx = /^[A-Za-z\d\-\_]{4,}@[가-힣\w\-\_]+(\.\w+){1,3}$/
// 2) 입력받은 이메일과 정규식 일치 여부 판별
if(reqEx.test(memberEmail.value)){ // 유효한 경우
emailMessage.innerText="유효한 형식입니다.";
emailMessage.classList.remove("error");
emailMessage.classList.add("confirm");
checkObj.memberEmail = true; // 유효 O
} else { // 유효하지 않은 경우
emailMessage.innerText="이메일 형식이 유효하지 않습니다.";
emailMessage.classList.remove("confirm");
emailMessage.classList.add("error");
checkObj.memberEmail = false; // 유효 X
}
});
// 비밀번호/비밀번호 확인 유효성 검사
const memberPw = document.getElementById("memberPw");
const memberPwConfirm = document.getElementById("memberPwConfirm");
const pwMessage = document.getElementById("pwMessage");
memberPw.addEventListener("input", () => {
if(memberPw.value.trim().length == 0){
// 비밀번호가 입력되지 않은 경우
memberPw.value = "";
pwMessage.innerText="영어,숫자,특수문자(!,@,#,-,_) 6~20글자 사이로 입력해주세요.";
pwMessage.classList.remove("confirm", "error"); // 검정 글씨
checkObj.memberPw = false; // 빈칸 == 유효 X
return;
}
// 정규 표현식을 이용한 비밀번호 유효성 검사
const regEx = /^[A-Za-z\d\!\@\#\-\_]{6,20}$/;
// 입력한 비밀번호가 유효한 경우
if(regEx.test(memberPw.value)){
checkObj.memberPw=true;
// 비밀번호가 유효하게 작성된 상태에서
// 비밀번호 확인이 입력되지 않았을 때
// 비밀번호 == 비밀번호 확인 (같을 경우)
if(memberPwConfirm.value.trim().length == 0){
pwMessage.innerText="유효한 비밀번호 형식입니다.";
pwMessage.classList.remove("error");
pwMessage.classList.add("confirm");
} else {
// 비밀번호가 유효하게 작성된 상태에서
// 비밀번호 확인이 입력되어 있을 때
if(memberPw.value == memberPwConfirm.value){
pwMessage.innerText = "비밀번호가 일치합니다.";
pwMessage.classList.remove("error");
pwMessage.classList.add("confirm");
checkObj.memberPwConfirm=true;
} else { // 다를 경우
pwMessage.innerText="비밀번호가 일치하지 않습니다.";
pwMessage.classList.remove("confirm");
pwMessage.classList.add("error");
checkObj.memberPwConfirm=false;
}
}
} else { // 유효하지 않은 경우
pwMessage.innerText="비밀번호 형식이 유효하지 않습니다.";
pwMessage.classList.remove("confirm");
pwMessage.classList.add("error");
checkObj.memberPw=false;
}
});
// 비밀번호 확인 유효성 검사
memberPwConfirm.addEventListener("input", () => {
if(checkObj.memberPw){ // 비밀번호가 유효하게 작성된 경우에
// 비밀번호 == 비밀번호 확인 (같을 경우)
if(memberPw.value == memberPwConfirm.value){
pwMessage.innerText = "비밀번호가 일치합니다.";
pwMessage.classList.remove("error");
pwMessage.classList.add("confirm");
checkObj.memberPwConfirm=true;
} else { // 다를 경우
pwMessage.innerText="비밀번호가 일치하지 않습니다.";
pwMessage.classList.remove("confirm");
pwMessage.classList.add("error");
checkObj.memberPwConfirm=false;
}
}
});
// 닉네임 유효성 검사
const memberNickname = document.getElementById("memberNickname");
const nickMessage = document.getElementById("nickMessage");
memberNickname.addEventListener("input", () => {
// 닉네임이 입력이 되지 않은 경우
if(memberNickname.value.trim().length == 0){
nickMessage.innerText = "한글,영어,숫자로만 2~10글자"
nickMessage.classList.remove("error", "confirm");
checkObj.memberNickname = false;
return;
}
// 닉네임이 입력이 되었을 때
const regEx = /[가-힣\w\d]{2,10}$/;
if(regEx.test(memberNickname.value)){ // 유효
nickMessage.innerText="유효한 닉네임 형식입니다.";
nickMessage.classList.add("confirm");
nickMessage.classList.remove("error");
checkObj.memberNickname = true;
} else { // 유효 X
nickMessage.innerText="유효하지 않은 닉네임 형식입니다.";
nickMessage.classList.add("error");
nickMessage.classList.remove("confirm");
checkObj.memberNickname = false;
}
});
// 전화번호 유효성 검사
const memberTel = document.getElementById("memberTel");
const telMessage = document.getElementById("telMessage");
memberTel.addEventListener("input", () => {
// 전화번호가 입력되지 않은 경우
if(memberTel.value.trim().length == 0){
telMessage.innerText = "전화번호를 입력해주세요.(- 제외)";
telMessage.classList.remove("error", "confirm");
checkObj.memberTel = false;
return;
}
// 전화번호가 입력되었을 때
// 정규표현식s
const regEx = /^0(1[01679]|2|[3-6][1-5]|70)\d{3,4}\d{4}$/;
// 내가 작성한 정규식 : /^0([1|3|5][\d]|2)\d{7,8}$/
if(regEx.test(memberTel.value)){
telMessage.innerText = "전화번호 형식이 유효합니다.";
telMessage.classList.remove("error");
telMessage.classList.add("confirm");
checkObj.memberTel = true;
} else {
telMessage.innerText = "전화번호 형식이 유효하지 않습니다.";
telMessage.classList.remove("confirm");
telMessage.classList.add("error");
checkObj.memberTel = false;
}
});
// 회원가입 form 태그가 제출되었을 때 // 매개변수가 하나라서 () 생략
document.getElementById("signUpFrm").addEventListener("submit", e => {
// checkObj에 모든 value가 true인지 검사
// 배열용 for문
// for ... of : 향상된 for문
// -> iterator(반복자) 속성을 지닌 배열, 유사 배열 사용 가능
// 객체용 for문
// **** for ... in : 향상된 for문
// -> JS 객체가 가지고 있는 kye를 순서대로 하나씩 꺼내는 반복문
for(let key in checkObj){
if(!checkObj[key]){ // 각 key에 대한 value(true/false)를 얻어 와
// false인 경우 유효하지 않다.
switch(key){
case "memberEmail" : alert("이메일이 유효하지 않습니다."); break;
case "memberPw" : alert("비밀번호가 유효하지 않습니다."); break;
case "memberPwConfirm" : alert("비밀번호가 확인되지 않았습니다."); break;
case "memberNickname" : alert("닉네임이 유효하지 않습니다."); break;
case "memberTel" : alert("전화번호가 유효하지 않습니다."); break;
}
// 유효하지 않은 input태그로 focus 이동
// key를 input의 id와 똑같이 설정했음
document.getElementById(key).focus();
// form 태그 기본 이벤트 제거
e.preventDefault();
return; // 함수 종료
}
}
});Controller
// 회원가입 진행
@PostMapping("/signUp")
public String signUp(Member inputMember
, /*@RequestParam("memberAddress")*/ String[] memberAddress
, RedirectAttributes ra) {
// -------------- 매개 변수 설명 ----------------
// Member inputMember : 커맨드 객체(제출된 파라미터가 저장된 객체)
// String[] memberAddress :
// input name = "memberAddress" 3개가 저장된 배열
// RedirectAttributes ra :
// 리다이렉트 시 데이터를 request scope로 전달하는 객체
// -------------------------------------------
// 서울시 ^^^ 강남구 ^^^ 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); // forward할 때는 redirectAttributes 대신 model 사용해서 addFlash 해도 되는지?!?!!?? 된대용
return path;
}MemberService
/** 회원가입 서비스(비밀번호 암호화 필요)
* @param inputMember
* @return result(0: 실패, 1: 성공)
*/
int signUp(Member inputMember);📍 트랜잭션 처리
@Transaction(rollbackFor = {Exception.class})
MemberServiceImpl
// 회원가입 서비스
@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
/** 회원가입 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);
}🔑 insert, update, delete와 같은 DML 구문
--> 결과가 항상 int 이므로 resultType 작성 X
mapper
<!-- 회원가입 --> <!-- 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>이메일 중복검사(fetch())
Controller
// 이메일 중복 검사
// !! produces 속성은 한글 깨질 때 사용
@GetMapping("/dupCheck/email")
@ResponseBody // HttpMessageConverter를 이용해
// JS에서 인식할 수 있는 형태(TEXT/JSON) 변환
// + 비동기 요청한 곳으로 돌아감
/* jack-databind pom.xml에 추가 ! */
public int emailDupCheck(String email) { // int !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
return service.emailDupCheck(email);
}
Service
/** 이메일 중복 검사 서비스
* @param email
* @return count
*/
int emailDupCheck(String email);ServiceImpl
// 이메일 중복 검사
@Override
public int emailDupCheck(String email) {
return dao.emailDupCheck(email);
}DAO
/** 이메일 중복 검사 DAO
* @param email
* @return count
*/
public int emailDupCheck(String email) {
return splSession.selectOne("ajaxMapper.emailDupCheck", email);
}sql
<!-- 이메일 중복 검사 -->
<select id="emailDupCheck" resultType="_int">
SELECT COUNT(*) FROM MEMBER
WHERE MEMBER_EMAIL = #{email}
AND MEMBER_DEL_FL = 'N'
</select>닉네임 중복 검사
Controller
// 닉네임 중복 검사
@GetMapping("/dupCheck/nickname")
@ResponseBody
public int nicknameDupCheck(String nickname) {
return service.nicknameDupCheck(nickname);
}
Service
/** 닉네임 중복 검사 서비스
* @param nickname
* @return count
*/
int nicknameDupCheck(String nickname);
ServiceImpl
// 닉네임 중복 검사
@Override
public int nicknameDupCheck(String nickname) {
return dao.nicknameDupCheck(nickname);
}DAO
/** 닉네임 중복 검사 DAO
* @param nickname
* @return count
*/
public int nicknameDupCheck(String nickname) {
return splSession.selectOne("ajaxMapper.nicknameDupCheck", nickname);
}sql
<!-- 닉네임 중복 검사 -->
<select id="nicknameDupCheck" resultType="_int">
SELECT COUNT(*) FROM MEMBER
WHERE MEMBER_NICKNAME = #{nickname}
AND MEMBER_DEL_FL = 'N'
</select>
개발 일지