위스타그램 클론 코딩 하면서 정규 표현식을 사용하여 로그인 홈페이지을 구현했다. 물론 아직 데이터를 받아오진않았다

정규표현식

주어진 문자열에서 발견할 수 있는 글자 패턴을 표현한 식

정규표현식의 사전적인 의미로는 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어다. 주로 Programming Language나 Text Editor 등 에서 문자열의 검색과 치환을 위한 용도로 쓰이고 있다. 입력한 문자열에서 특정한 조건을 표현할 경우 일반적인 조건문으로는 다소 복잡할 수도 있지만, 정규표현식을 이용하면 매우 간단하게 표현 할 수 있습니다. 하지만 코드가 간단한 만큼 가독성이 떨어져서 표현식을 숙지하지 않으면 이해하기 힘들다는 단점도 가지고 있다.

단점이 존재하는데 사용하는 이유?

범용성이나 생산성이 좋지만 가장 큰 이유는 입력 문자열의 처리가 깔끔해서 라고 생각한다.
프로그램에서 입력 부의 사용자에 의해서 어떤 구성의 문자열이 입력될지 예상하기 힘들다. 때문에 다양한 형태의 문자열 입력에 대해서 모든 경우를 일일히 문자열처리를 하기는 어렵다. 이런 경우 정규 표현식을 통해 간결하게 처리 할 수 있다

비밀번호나 이메일 입력할때 말고 다른 예시를 보자.

• 각각 다른 포맷으로 저장된 엄청나게 많은 전화번호 데이터를 추출해야 할 때
• 사용자가 입력한 이메일, 휴대폰 번호, IP 주소 등이 올바른지 검증하고 싶을 때
• 코드에서 특정 변수의 이름을 치환하고 싶지만, 해당 변수의 이름을 포함하고 있는 함수는 제외하고 싶을 때
• 특정 조건과 위치에 따라서 문자열에 포함된 공백이나 특수문자를 제거하고 싶을 때

정규 표현식을 사용한 예제

이메일input에는 이메일형식의 이메일이 들어가야하고,
패스워드password에는 영문자+숫자+특수문자 조합으로 8~25자리 사용해야 다음페이지로 넘어가는 페이지를 만들어보자.

이메일과 패스워드, 로그인버튼의 요소를 가져오고

const emailForm = document.querySelector("#email-input-box");
const passwordForm = document.querySelector("#password-input-box");
const loginButton = document.querySelector("#login-button");

EAMIL_CHECK_REGEX는 이메일을 체크하는 정규 표현식을 넣어준다
마찬가지로 PWD_CHECK_REGEX에는 패스워드를 체크하는 정규 표현식을 넣어준다.

const EAMIL_CHECK_REGEX =
  /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/;
const PWD_CHECK_REGEX = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/;

이메일과 패스워드의 문자가 들어오면 버튼이 활성화 한다.

emailForm.addEventListener("keyup", listener);
passwordForm.addEventListener("keyup", listener);

function listener() {
  switch (!(emailForm.value && passwordForm.value)) {
    case true:
      loginButton.disabled = true;
      break;
    case false:
      loginButton.disabled = false;
      break;
  }
}

로그인 버튼을 누르면 이메일과 비밀번호의 test() 메서드를 사용하여 정규 표현식을 테스트한다.
test()메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고 true또는 false를 호출 한다.
만약 테스트에 통과하지 못한다면 해당 알림창이 뜨면서 종료한다.
focus()는 커서가 깜박이는 메서드를 추가하여
해당 알림창이 어디가 문제인지 알 수 있다.

loginButton.addEventListener("click", () => {
  if (!EAMIL_CHECK_REGEX.test(emailForm.value)) {
    alert("이메일 형식으로 입력 해주세요.");
    emailForm.focus();
    return false;
  }

  if (!PWD_CHECK_REGEX.test(passwordForm.value)) {
    alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리 사용해야 합니다.");
    passwordForm.focus();
    return false;
  }

  alert("로그인 되었습니다.");
  location.href = "index.html";
});