1ST-PROJECT_정규표현식

이메일 비밀번호 정규표현식

이메일과 비밀번호 정규표현식 쓰기

저희 킹갓 바게트 팀은 비밀번호와 이메일에 정규표현식을 쓰기로 하였습니다.

그전에 저는 백앤드에서 어짜피 정규표현식을 넣으면 알아서 걸러질거라고 생각했던 무지몽매한 저와는달리 우리 도연길님께서 원래 프론트엔드도 정규표현식을 무족권 넣어야 한다고 강조하셔서 방법을 찾아보게되었습니다.
비밀번호 정규식이라...어떤게 정규식인지 한번 알아보러 떠나봤습니다.같이 알아보러 가실까요???

특수문자 / 문자 / 숫자 포함 형태의 8~15자리 이내의 암호 정규식

/^.(?=^.{8,15}$)(?=.\d)(?=.[a-zA-Z])(?=.[!@#$%^&+=]).*$/;

이메일 정규식

/^0-9a-zA-Z@0-9a-zA-Z.[a-zA-Z]{2,3}$/i;

인터넷과는 다른 나의 정규표현식

이메일 정규식

/^0-9a-zA-Z@0-9a-zA-Z.[a-zA-Z]{2,3}$/i;

비밀번호 정규식
/^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

차이점이 보이시나요????

차이점이 보이신다면 합격목걸이를 드리겠습니다!!!

이메일 정규식은 @ 이들어가야하고 .이 포함되어야하는 정규식으로 완성을 하였고

저의 비밀번호 정규식은 영어 대문자 최소 한개 소문자 최소 한개 특수문자 및 숫자가 포함되어야 하는 8자리 이상 입력했을때 활성화가 됩니다!!!

이걸 어떻게 REACT 에 적용하나 궁금하시죠???? 궁금하면 500원(제가 생각해도 노잼) REACT로 적용을 어떻게 하나 검색과 혼자서 30분동안 해보시고 스크롤을 내려주시기 바랍니다!!!(명령)

REACT에 적용하기

const email =
    /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
  const passWord =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
  const emailValueCheck = email.test(idInput);
  const passwordValueCheck = passWord.test(pwInput);

  const isUserValid = emailValueCheck && passwordValueCheck;
  const goToList = () => {
    if (isUserValid) {
      fetch(API.GET_SIGNIN, {
        method: 'POST',
        body: JSON.stringify({
          email: idInput,
          password: pwInput,
        }),
      })

짜잔 전 이렇게 완성했답니다 !!! Email 이라는 변수명에 정규표현식을 담고 emailValueCheck 라는 변수에 TEST라는 함수를 써서 boolen 값을 줬습니다!!
isUerVaild 라는 변수명에 이메일과 정규표현식을 넣어두고 goToList 라는 변수 뒤에 if(isUserValid)라는 함수가 있는데 그게 바로 프론트에서 백앤드에서 통신을 보내기 전 정규표현식과 맞지않으면 1차로 막는 역활을 합니다!!

마무리를 하며..

어때요 생각보다 쉽죠??? 저도 찾아볼때는 이게 무슨말이지 어떻게 이해햐하지?? 라는 생각이 있었지만 우리 동기 용우LEE님 께서 자기의 벨로그와 하나하나 설명해주시면서 이건이렇게 들어간다고 설명을 해줘 깨닫게 되었습니다.
코드란 그런것 같습니다. 막상 남의코드를 보면 생각보다 어렵지 않은것 같은데 직접 쳐보면 어떻게 로직을 짜야할지 생각보다 막막하다고 느낍니다.하지만 그것은 아마 제가 이겨내야할 숙제 혹은 숙명이겠죠... 인생도 마찬가지 아닐까요?? 미래에 일어날 1분1초의 일들을 모두 알고 살아간다면 사는 재미가 있을까요???
너무 철학적인 이야기였습니다 다들 제 코드가 생각이 도움되셨으면 좋아요와 댓글 해주세용~ 소통해요~