studyplan

스프링부트 회원가입 만들기 ! 2. 회원가입 검증 정규표현식 , 비동기처리 // 3가지 경우 trim, count(*) ,Map ,fetch(),method : 'get' 본문

스프링

스프링부트 회원가입 만들기 ! 2. 회원가입 검증 정규표현식 , 비동기처리 // 3가지 경우 trim, count(*) ,Map ,fetch(),method : 'get'

무한머니 2022. 8. 5. 00:57

이렇게 sign UP 을 누르면> ?

이렇게 회원 가입 폼이 나온다 ! 

html 은 자바스크립트때 가져올때만 보려고 한다 ! 

 

회원 가입을 하려면 검증 해야될것이 엄청 많다 ! 

그래서 검증할수있게 정규 표현식을 써야 한다 !! 

       const getIdCheck = RegExp(/^[a-zA-Z0-9]{4,14}$/);
            // ^ 로 시작하는 $ 끝나는 , {4,14} 최소 4자 최대 14 자 
            const getPwCheck = RegExp(
                /([a-zA-Z0-9].*[!,@,#,$,%,^,&,*,?,_,~])|([!,@,#,$,%,^,&,*,?,_,~].*[a-zA-Z0-9])/);
            // 영문 ,숫자가 들어가야되고  / 특수문자 가 들어가야된다 , | 또는 특수문자로 시작하고 , 영문이 하나라도 들어가도 됨
            const getName = RegExp(/^[가-힣]+$/);
            // 한글로 써야 된다 ! 
            const getMail = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/);
            // 영어로 시작하고 @가 들어가야되고 . 영문이 나와야 되고 , .뒤에서는 영어로 나와야 된다 

 

라는 뜻이다 !! 

이걸로 입력하는것과 다른값이 나오면 

입력값 각각 false 로처리가 된다 ! 

모두 false 로 만들고 , 입력값이 올바르게 작성ㅇ ㅣ된다면 

모두 true 가 되어서 서버로 넘어가게 된다 ! 

 

아이디 검증을 먼저 보자 ! 

id=user_id 인 인풋창을 들고와서 

키업 이벤트를 걸었다 ! 

키업 이라는것은 

내가 키보드를 떼고 .라는 뜻이다 !  입력을 마친 후 라고 생각해도 된다 ! 

저  인풋창을 보자 ! 

id=user_id 인 인풋창 잡아오고! , maxlength 로 입력값의 길이를 제한하고

placeholer 를 걸어서 미리보기에 저 문구가 나온다 ! 

 

우리는 아이디를 입력 받을때 

크게 3가지로 나눌수 있다 !

 

1. 아이디를 입력하지 않은경우 ! 

$idInput.val().trim() === ''

// 인풋창, 값이 , 빈문자열 제거 ! 했는데도 불구하고 '' 빈 문자라면? 이라는 뜻이다 

예를들어 입력값이 

"            " 이렇게 들어올수도있어서 trim()으로 이걸 제거시켜버린것이다 ! 

이런경우 !  

이렇게 나오는걸 볼수있다 ! 

 

2번째 !

이제는 입력을 받은경우니까 정규표현식으로 

영문입력하고 , 4~14자리수를 잘 입력했는지 확인한다 ! 

2자리로 입력해서 이렇게된걸 볼수있다 !! 

 

3번쨰 ! 

아이디 중복확인 해야되는데

실시간으로 검색을 해서 보여줘야 함으로 

비동기로 진행한다! 

저기로 보낼경우 어떻게 되는지 보자 ! 

method 가 없으니까 일단 GetMapping 인건 확인했고 ! 

비동기라 

@ResponseBody 를 붙였고 

type= account // 계정 검색중 이라서 이렇게 타입이 왔고 

value는 인풋창을 통해서 들어왔다 ! 

memberService.checkSignUpValue(type, value);

여기서 무슨일이 일어나는지 보자 ! 

여기서 보면 새로운 뉴맵 이라고해서 

그 안에 

type 과 ,

value 를 키값으로 넣어주고 ! 

받아온 값을 value 로 넣는걸 확인 할수있다 

그걸 다시 

 memberMapper.isDuplicate(checkMap) 

이 함수로 돌렸는데 ! 

가보면 이렇게 생겼고 

이건 DB에서 꺼내서 확인 해야하는작업 이기때문에 

xml로 들어가서 확인 해봐야 겠다 ! 

 

만약 type 이 account 면 

where account ==#{value} 

#{value}  = type 이 acoount 일때 account 가 들어간다 ! 

그래서 지금은 아이디를 조회하고있는거라서 

where account = account(인풋에서 들어온 아이디 값)

tbl_member 에서 account(계정) 이 인풋에서 들어온 값! 인 거의 갯수를 말한다 ! 

앞에서 말했듯이 account 는 PK 이기때문에 하나만 있어야 함으로 

값이 1 또는 0일수 밖에없다 ! 

그렇게 

 

중복된 아이디를 검사 받는다 ! 

Comments