정규표현식, Regular expression

정규표현식이란?

정규표현식은 줄여서 정규식(Regex, Regexp 등으로 불린다)이라고도 하는데, CS의 정규언어로부터 유래한 것으로 특정한 규칙을 가진 문자열의 집합을 표현하기 위해 쓰이는 형식언어이다. 간단히 설명하자면 어떤 텍스트 내에서 특정한 형태나 규칙을 가진 문자열을 찾기 위해 그 형태나 규칙을 나타내는 패턴 을 정의하는 것을 정규 표현식이라고 이해하면 된다.

정규표현식을 왜 사용할까?

예를 들어 회원가입시 이메일을 작성할 때 유저가 실수로 이메일에 들어가는 @나 . 같은 것들을 빼먹는 경우나 일반적이지 않은 문자를 넣었을 경우 유저에게 올바른 양식을 제출할 수 있도록 유도해 주는 것이다.
또한 비밀번호 설정의 경우에는 비밀번호 보안의 수준을 높이기 위해 유저에게 복잡하게 만들게 하는 방법도 있다.

이메일, 비밀번호에 자주 쓰이는 정규표현식 메타문자

개인 프로젝트에서 회원가입 양식 중 사용한 메타문자들의 사용법이다.

\: 특수 문자를 있는 그대로 탐색("*"을 직접 찾는 등)해야 하는 경우, 특수 문자 앞에 역슬래시()를 배치해서 이스케이프 해서 특수 문자가 아닌 문자 리터럴로 취급하게 하는 방식.
x? : x 문자가 존재할 수도, 존재하지 않을 수도 있음.
^x : 문자열의 시작을 표현.
x$ : 문자열의 끝를 표현.
x(별표) : 반복여부를 표현하며 x 문자가 0번 또는 그 이상 반복됨을 의미한다.
.x :임의의 한 문자의 자리수를 표현하며 문자열이 x 로 끝난다는 것을 의미한다.
[xy] : 문자 선택을 표현하며 x 와 y 중에 하나를 의미.
[x-z] : 범위를 표현하며 x ~ z 사이의 문자를 의미한다.
x{n,m} : 반복을 표현하며 x 문자가 최소 n번 이상 최대 m 번 이하로 반복됨을 의미.
x(?=y) : x 다음에 y가 오는 경우에만 x와 일치.
g : Global 의 표현하며 대상 문자열내에 모든 패턴들을 검색하는 것을 의미한다. 
i : Ignore case 를 표현하며 대상 문자열에 대해서 대/소문자를 구별하지 않는 것을 의미.
(x) : 그룹을 표현하며 x 를 그룹으로 처리함을 의미한다. (x)(y)의 경우 순서대로 번호를 부여하여 관리하며 x, y는 개별 그룹으로 처리한다.

이메일, 비밀번호 정규식 적용 예제

const RegexEmail =
    /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
// 0~9 사이 숫자 or a-z A-Z 알바펫 아무거나로 시작, 중간에- _ . 같은 문자가 있을수도 있고 없을수도 있다.

// 그 후에 0~9 사이 숫자 or a-z A-Z 알바펫중 하나의 문자가 없거나 연달아 나올수 있다.

// @ 가 반드시 존재 

// 0-9a-zA-Z 여기서 하나가 있고, 중간에 - _ . 같은 문자가 있을수도 있고 없을수도 있다. 

// 그 후에 0~9 사이 숫자 or a-z A-Z 알바펫중 하나의 문자가 없거나 연달아 나올수 있다. 

// 반드시 . 이 존재하고 a-zA-Z 의 문자가 2~3개 사이로 존재

// 모든 문자열에 대해 대/소문자를 구별하지 않음. 

  const RegexPassword =
    /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{8,16}$/
  // 숫자, 영문, 특수문자 각 1자리 이상이면서 8자에서 16자 사이 통과
  
  // 대/소문자, 숫자, 특수문자(숫자 키보드 특수문자) 각 한 종류씩은 있어야 한다.
  
  // 문자가 8~16개 사이로 존재
 
  const RegexPasswordCheck =
    /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{8,16}$/
  // 비밀번호 확인용
  
  const RegexName = /[ㄱ-힣]/
  // ㄱ~힣 까지 한글만 들어갈 수 있음
  
  
  // 개인 프로젝트 정규표현식 검증 함수
  const onChangeEmail = (event: ChangeEvent<HTMLInputElement>) => {
    setEmail(event.target.value)
    if (!RegexEmail.test(event.target.value)) {
      // test() 내장함수를 사용하여 정규표현식을 만족한다면 true, 아니라면 false를 반환함.
      setEmailError('올바르지 않은 이메일 입니다.')
    } else {
      setEmailError('')
    }
    if (
      // IsActive 가 true이면 가입하기 버튼이 활성화 됨.
      RegexEmail.test(event.target.value) &&
      password &&
      passwordCheck &&
      name
    ) {
      setIsActive(true)
    } else {
      setIsActive(false)
    }
  }

이러한 방식으로 서비스 제공자가 원하는 양식을 제출할 수 있도록 유도하는 방법이 있다. 또한 정규표현식의 방법은 매우 많으므로 주로 사용하는 메타문자에 대해 익숙해진다면 좋을 것 같다.