정규 표현식에 대하여 알아보자

정규 표현식?

정규 표현식이란 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이며 정규식 또는 regular expression, regex등으로 불린다

해당 글은 엘리드림코딩영상을 참고하여 작성하였습니다.
문법 정리 페이지에 종류에 따른 문법들이 잘 정리되어 있으니 꼭 체크하면서 공부하도록 합시다!

정규 표현식 (이하 정규식)은 4가지로 분류된 문법을 통해 문자열의 집합을 표현하며 이 문법들을 합쳐 원하는 문자열을 얻을 수 있다
(위의 문법 정리 페이지를 확인)

연습 페이지

정규식 연습 사이트를 들어가보면 위에서 순서대로 Expression, text, tools가 있다

Expression

정규식을 작성하는 곳이다
우측 상단의 Flags 를 통해 global, multiline등을 설정 할 수 있다

이 사이트에서는 위 처럼 flag를 설정 할 수 있지만, 자바스크립트에서 추가하는 방식은 그렇지 않기에 MDN 에서 확인해보자

Text

어떤 문자열이 선택되는지 확인할 수 있다
직접 문자열을 적고 하이라이팅을 통해 선택된 문자열을 알 수 있다

Tools

작성한 정규식에서 사용된 문법을 확인할 수 있다
문법을 클릭해보면 좌측 섹션에서 해당 문법이 어떤 기능을 수행하는지에 대한 설명과 예시를 확인할 수 있다

직접 사용해보기

웹 사이트 클론 코딩을 진행하며 로그인 validation에 직접 사용해보았다

// 아이디 부분
<input class="login__id" type="text" placeholder="전화번호, 사용자 이름 또는 이메일" required pattern="\d{2,3}-\d{3,4}-\d{4}|(.*@)(.*(\.com|\.net))"/>

// 비밀번호 부분
<input class="login__password" type="password" placeholder="비밀번호" required pattern="(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_+=/.,<>?])([a-zA-Z\d!@#$%^&*()_+=/.,<>?]){8,16}"/>

설명

input의 pattern 속성에 정규식을 값으로 주는 것으로 유효성 검사를 하였다

아이디 부분부터 보면 들어와야 할 값이 전화번호, 이름, 이메일인데 이름의 경우에는 너무 광범위해서 패스하고 전화번호, 이메일을 체크하는 정규식을 작성하였다

전화번호 부분

\d{2,3}-\d{3,4}-\d{4}

앞에서부터 차례대로 해석해보자

• \ = 특수문자나 서식 앞에 붙이는 것
• | = 또는
• \d = 숫자
• {2,3} = 2~3개의 min-max를 의미한다

따라서\d{2,3}은 2~3개의 숫자로 이루어진 문자열을 의미한다
그리고 xxx-xxxx-xxxx와 같은 서식을 위해 바로 뒤에 -을 적어주었다

이메일 부분

(.*)@.*(\.com|\.net)

앞에서부터 차례대로 해석해보자

() ?
()는 그룹화를 의미하고 이를 통해 그룹 1에선 무슨 문자열, 그룹 2에선 무슨 문자열..을 가진 문자열의 집합이 표현된다(정규식의 정의에서 나온것과 같이)

• .= 줄바꿈을 제외한 문자 하나
• * = x* = x가 0개 혹은 다수라는 의미
  따라서 (.*)@는 @까지의 문자열을 의미하고 .*(\.com|\.net)은 .com .net으로 끝나는 문자열을 의미한다

합쳐보면 @까지의 문자열 그룹과 .com 또는 .net까지의 문자열 그룹 임으로 .com .net으로 된 이메일을 체크 할 수 있다

비밀번호 부분

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

• ?= = 결과에 포함하지 않고 일치시킴

?=를 쓰면 해당 부분이 결과에 나오진 않고 조건으로 사용된다 (일치)
(?=.*\d)를 보면 *.\d부분이 결과에 포함되는게 아니라 숫자까지의 문자열이 맞아? 라고 물어보는 것이다
그래서 쭉 보면
(?=.*[a-zA-Z]) = a-z or A-Z까지의 문자열이 맞아?
(?=.*[!@#$%^&*()_+=/.,<>?]) = 해당 특수문자까지의 문자열이 맞아?

라는 의미이다
따라서 (?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_+=/.,<>?])([a-zA-Z\d!@#$%^&*()_+=/.,<>?]){8,16}는 숫자, 문자, 특수문자 까지의 문자열이 맞고([a-zA-Z\d!@#$%^&*()_+=/.,<>?])에 포함되는 문자 중들을 표현하는데 8 ~ 16개만 표현해!라는 뜻이다
어지럽네

마치며.
글 작성 중 '이게 더 좋을 것 같은데?' 하면서 수정도 하고 하다보니 같은 표현식이라도 '어딜 그룹화 하냐', '알기 쉽게 작성하냐'와 같은 고민도 필요하겠다라는 생각이 들었다
그리고 영상이나 글을 보며 익히기 보단 참고만 하면서 직접 정규식 연습 사이트에서 표현식을 작성해보며 공부하는게 효과적이었다