[JS] 프론트엔드에서 정규표현식 활용하기 💻

프론트엔드에서 아이디, 비밀번호 등 규칙이 정해진 입력 폼의 유효성을 검사할 때 정규표현식을 많이 사용하곤 한다. 그동안 검색에 의존해 정규표현식을 찾아서 사용했지만, 이번 기회에 정규표현식의 기본 원리를 제대로 공부해보고자 한다.

정규표현식을 활용해야 하는 이유 🤔

패스워드 조건과 같은 특정 규칙이 주어질 때, 정규표현식을 사용하지 않는다면 조건문으로 하나하나 비교해야 하며, 이로 인해 코드가 길어지고 비효율적으로 작성될 수 있다. 정규표현식(Regular Expression)은 특정한 형태나 규칙을 가진 문자열을 찾기 위한 패턴을 정의하여 간결하고 효율적인 코드를 작성할 수 있게 도와준다.

정규표현식 기본 문법 🛠️

1. 패턴 그대로 매칭하기 🔍

•	편집기의 ‘찾기’ 기능처럼, 특정 단어를 패턴으로 사용하여 매칭되는 영역을 찾는 방법을 의미한다.
•	예시: /apple/ → 문자열에서 ‘apple’을 찾는다.

2. 메타문자 및 수량 한정자 활용 🎯

정규표현식에는 특별한 의미를 가진 메타문자와 수량 한정자라는 것이 있다.

정규표현식 메타 문자

메타 문자	의미	예시
^	문자열의 시작을 의미한다.	^http → ‘http’로 시작하는 경우 매칭된다.
$	문자열의 끝을 의미한다.	com$ → ‘com’으로 끝나는 경우 매칭된다.
\s	모든 공백 문자를 의미한다.	\s → 공백, 탭, 줄바꿈 등을 매칭한다.
\S	공백이 아닌 모든 문자를 의미한다.	\S → 공백을 제외한 문자를 매칭한다.
\d	숫자(0-9)를 의미한다.	\d → 숫자와 매칭된다.
\D	숫자가 아닌 모든 문자를 의미한다.	\D → 숫자를 제외한 문자를 매칭한다.
\w	단어를 구성할 수 있는 문자를 의미한다.	\w → 알파벳, 숫자, 언더스코어와 매칭된다.
\W	단어를 구성할 수 없는 문자를 의미한다.	\W → 알파벳, 숫자, 언더스코어를 제외한 문자를 매칭한다.
[ ... ]	대괄호 안의 문자 하나하나가 OR 조건으로 매칭된다.	[abc] → ‘a’, ‘b’, ‘c’ 중 하나와 매칭된다.

수량 한정자

수량 한정자	의미	예시
?	0개 또는 1개를 의미한다.	apples? → ‘apple’, ‘apples’ 모두 매칭된다.
*	0개 이상을 의미한다.	a* → ‘a’, ‘aa’, ‘’ 모두 매칭된다.
+	1개 이상을 의미한다.	a+ → ‘a’, ‘aa’는 매칭되지만, ’’는 매칭되지 않는다.
{n}	정확히 n개를 의미한다.	a{3} → ‘aaa’와 매칭된다.
{n,m}	n개 이상, m개 이하를 의미한다.	a{2,4} → ‘aa’, ‘aaa’, ‘aaaa’와 매칭된다.

3. 그룹과 Look Around(전후방 탐색) 🎥

그룹 (Group)

• 정규표현식에서 특정 부분을 그룹화하기 위해 ()를 사용한다.
• 예시: (abc)+ → ‘abcabc’와 매칭된다.

전방 탐색 (Look Ahead)

• ?=를 사용하며, 특정 텍스트 뒤에 오는 패턴만 추출하도록 한다.
• 예시: .+(?=:)
• http://example.com → http와 매칭된다.

후방 탐색 (Look Behind)

• ?<=를 사용하며, 특정 텍스트 앞에 오는 패턴만 추출하도록 한다.
• 예시: (?<=$)[0-9.]+
• ABC01: $23.45 → 23.45와 매칭된다.

정규표현식 활용 예시 ✨

1. 요구사항 작성하기

• 첫 세 글자는 01x(x는 숫자)의 형태로 시작한다.
• 구분자로 -, 공백, /을 허용한다.
• 두 번째 구역은 3글자 이상 4글자 이하, 마지막 구역은 4글자의 숫자로 이루어진다.

2. 정규표현식 작성하기
   /^01\d[-\s/]\d{3,4}[-\s/]\d{4}$/

3. 테스트하기

• regexr.com에서 테스트 가능하다.

JavaScript에서의 정규표현식 활용 💡

1. 플래그 종류

• g: 전역 검사 (Global)
• i: 대소문자 구분하지 않음 (Ignore case)
• m: 다중 행 검사 (Multiline)

2. 활용 메서드

• String.prototype.match() : 패턴과 매칭된 문자열을 배열로 반환한다.
• RegExp.prototype.test() : 문자열이 패턴과 매칭되는지 Boolean 값으로 반환한다.
• String.prototype.replace() : 패턴에 매칭된 문자열을 다른 문자열로 교체한다.

정규표현식이 항상 좋을까? ⚠️

• 정규표현 엔진은 백트래킹을 사용하므로, 최악의 경우 시간복잡도 O(2^n)을 가질 수 있다.
• 가독성이 좋지 않아 코드 유지보수가 어려워질 수 있다.

정규표현식은 강력하지만, 모든 문제에 적합하지 않을 수 있으니 적절히 활용해야 한다. 😊