[JavaScript] 정규식(Regex)에서 +는 언제 사용할까?

JavaScript 정규식을 배우면서 회원가입 유효성 검사를 구현해보았다.
전화번호와 이메일 검사를 만들면서 아래 코드를 작성하다보니
전화번호 정규식에선 +를 사용하지 않고, 이메일 정규식에선 +를 사용하는 차이점이 있었다.
이 외에도 어떤 부분에는 +를 사용하고 어떨때는 +를 사용하지 않는 경우가 있었다.
이번 글에선 정규식의 +의 의미와 언제 사용하는지에 대해 정리하려한다.

// 전화번호
const expHpText = /^\d{3}-\d{3,4}-\d{4}$/

// 이메일
const expEmailText = /^[A-Za-z0-9\-\.]+@[A-Za-z0-9\-]+\.[A-Za-z]+$/

---

+의 의미

정규식에서 +는 앞에 있는 패턴이 1번 이상 반복된다는 의미를 가지고 있다.
예를 들어 아래 코드는 영문 또는 숫자를 검사하지만 +가 없기때문에 한 글자만 허용한다.

/^[A-Za-z0-9]$/

// a 가능
// apple 불가능

 
하지만 +를 추가하여 코드를 작성하면
[A-Za-z0-9]의 패턴이 여러번 반복될 수 있음을 의미한다.

/^[A-Za-z0-9]+$/

// a 가능
// apple 가능
// aBc123 가능

 
즉, 한 글자만 입력이 가능했던 코드에서
+를 추가하면 한 글자 이상 가능한 코드로 바뛰는 것이다.

---

💡 왜 이메일 정규식에 +가 사용되었을까?

앞서 작성했던 이메일 정규식은
아이디 영역, @, 도메인 영역, 마지막 도메인 영역으로 나눠 볼 수 있다.

/^[A-Za-z0-9\-\.]+@[A-Za-z0-9\-]+\.[A-Za-z]+$/

---

1) 아이디 영역

아이디 영역은 한 글자가 아닌 여러글자가 올 수 있기 때문에 +를 사용해준다.

[A-Za-z0-9\-\.]+

 

2) @

@는 이메일에서 한 번만 등장하기 때문에 반복을 해주는 +가 필요하지 않다.

@

 

3) 도메인 영역

도메인 영역또한 여러 글자가 올 수 있어 +를 사용한다.

[A-Za-z0-9\-]+

 

4) 마지막 도메인 영역

마지막 도메인 영역도 여러 글자가 올 수 있기 때문에 +를 사용한다.

[A-Za-z]+

---

💡 그렇다면 전화번호에는 왜 +가 없을까?

전화번호 정규식은 + 대신 {} 가 사용되었다.
{} 는 반복 횟수를 직접 지정하는 방법이다.

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

 
전화번호의 경우 형식이 이메일과 다르게 정해져있기 때문에 정확한 자리수 검사가 필요하다.
그래서 개수 설정이 자유로운 +보다 {}를 사용하여 패턴을 준 것이다.

---

1) 숫자가 정확히 3개

\d{3}

 

2) 숫자가 3개 이상 4개 이하

\d{3,4}

 

3) 숫자가 정확히 4개

\d{4}

---

정리

정규식에서 +는 앞에 있는 조건이 1번 이상 반복되어야 할 때 사용한다.
 
즉, 글자의 개수가 정확히 정해져있진 않지만
최소 한 글자 이상 입력되어야하는 경우에 사용한다. (이메일아이디)
 
반대로 전화번호처럼 자리수가 정해져 있는 데이터의 경우 {}를 사용해 정혹한 개수를 지정해주는것이 좋다.
 

• + : 몇 글자가 들어올지는 모르지만 반드시 값이 있어야할 때
• {}: 정확한 개수를 검사할 수 있을