정규표현식

정규표현식은 문자열에서 특정 문자조합을 확인하기 위해 사용됩니다!
(ex : 대소문자가 포함된 8자 이상, 대소문자,숫자,특수문자를 포함한 8자이상)

자바스크립트에서 정규식은 객체입니다. RegExp의 메서드를 사용해 문자열을 검사 할 수 있습니다!

---

RegExp

RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용합니다!

정규식은 RegExp, test, exec, String, match, replace, search, split 메소드와 함께 쓰입니다.

---

Method

test : 대응되는 문자열이 있는지 검사하는 메소드 true 나 false를 반환합니다.
exec : 대응되는 문자열을 찾는 메소드.정보를 가지고 있는 배열을 반환하고 찾지 못하면 null을 반환합니다.
match : 대응되는 문자열을 찾는 String 메소드 정보를 가지고 있는 배열을 반환하고 찾지 못했다면 null을 반환합니다.
search : 대응되는 문자열이 있는지 검사하는 String 메소드 대응된 부분의 인덱스를 반환합니다.
replace : 대응되는 문자열을 찾아 다른 문자열로 치환하는 String 메소드입니다.
split : 정규식 혹은 문자열로 대상 문자열을 나누어 배열로 반환하는 String 메소드입니다.

---

자주표현되는 정규식

회원가입 양식을 안 정하고 웹 사이트를 제작한다면?
사용자가 100을 넘어 1000명, 10000명의 사용자가 있다면?

해당 웹사이트는 운영하기는 힘들것이다.....

프론트엔드개발자가 회원가입, 로그인 페이지를 만들었다면!!!!!!!
백엔드개발자와 소통을 하며 정규식에 대해 이야기를 할 것 이다!

---

비밀번호

최소 8 자, 하나 이상의 대문자, 하나의 소문자, 하나의 숫자 및 하나의 특수 문자

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

최소 8 자, 하나 이상의 대문자, 하나의 소문자 및 하나의 숫자

/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

최소 8자, 하나의 이상의 대소문자 및 하나의 숫자, 하나의 특수문자

/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;

---

전화번호

앞자리가 01이며 (0,1,6,7,8,9) 이며 중간에 3~4자리, 세번째는 4자리인 전화번호

/^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;

3자리/ 3,4자리 / 4자리 숫자

 /^\d{3}-\d{3,4}-\d{4}$/;

일반 전화번호

/^\d{2,3}-\d{3,4}-\d{4}$/;

---

이메일

'@' 포함여부와 대문자,소문자를 구분하지않게 표현식끝에 i 사용

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

---

실제사용

const { email, phoneNumber, password } = userInputData;
  const addOnUserData = e => {
    const { value, name } = e.target;
    setUserInputData({
      ...userInputData,
      [name]: value,
    });
  };


const emailRegex =
    /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
  const passwordRegex =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&#]{8,}$/;
  const phoneNumberRegex = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;

  const emailValueCheck = emailRegex.test(email);
  const passwordValueCheck = passwordRegex.test(password);
  const phoneNumberValueCheck = phoneNumberRegex.test(phoneNumber);

  const isUserValid =
    (emailValueCheck || phoneNumberValueCheck) && passwordValueCheck;

정규표현식을 사용해서 Regex.test로 boolean 변수를 주어서
정규표현식이 맞아야 버튼을 활성화 시킬 수 있게 했다.👍

<button
  className="loginButton"
  type="button"
  disabled={!isUserValid}
  onClick={goToMain}
>로그인</button>