회원가입 폼의 필수 관문, 이메일 유효성 검사
웹 사이트나 애플리케이션을 개발할 때 가장 기본이 되면서도 중요한 기능 중 하나가 바로 '회원가입'입니다. 사용자가 입력한 이메일 주소가 올바른 형식인지(예: @ 기호가 빠지진 않았는지, 도메인 주소가 제대로 적혔는지) 확인하는 과정은 필수적이죠.
만약 사용자가 user@navercom 처럼 마침표(.)를 빼먹거나, user#gmail.com 처럼 특수기호를 잘못 입력한 채로 가입을 해버리면 나중에 비밀번호 찾기 등의 중요한 안내 메일을 받을 수 없게 됩니다.
이러한 불상사를 막기 위해 프론트엔드(JavaScript) 단에서 입력된 문자를 검사하게 되는데, 이때 가장 강력하고 효율적으로 쓰이는 도구가 바로 **정규표현식(Regular Expression, Regex)**입니다. 처음 보면 외계어처럼 복잡해 보이지만, 기호의 의미를 하나씩 뜯어보면 생각보다 아주 직관적이고 재미있습니다.
오늘은 실무에서 가장 널리 쓰이는 이메일 정규표현식을 가져와서, 각 기호가 어떤 의미를 가지는지 완벽하게 분석해 보겠습니다.
1. 실무에서 사용하는 이메일 정규표현식 코드
먼저 가장 기본적이고 범용적으로 사용되는 이메일 정규식 코드는 아래와 같습니다. 그대로 복사해서 자바스크립트 코드에 활용하시면 됩니다.
| const emailRegex = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; // 또는 아래와 같은 형태도 많이 사용됩니다. (이번 포스팅에서 분석할 식) const emailRegex2 = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/; |
우리는 두 번째 형태인 emailRegex2를 기준으로, 이 암호 같은 코드가 도대체 무슨 뜻인지 앞에서부터 차근차근 해석해 보겠습니다.
2. 정규표현식 기호 완벽 해부하기
/^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/
이 긴 수식을 구간별로 나누어서 설명해 드리겠습니다.
/ ~ / : 정규표현식의 시작과 끝을 알리는 울타리 같은 역할입니다. 이 안에 있는 수식이 정규식임을 브라우저에게 알려줍니다.
^ (캐럿) : 문장의 **'시작'**을 의미합니다. 즉, 이메일 주소의 첫 글자부터 검사를 시작하겠다는 뜻입니다.
([0-9a-zA-Z_\.-]+) : @ 기호 앞부분, 즉 이메일 아이디를 검사하는 구간입니다.
[ ] 안의 내용은 허용되는 문자를 뜻합니다. 숫자(0-9), 영어 소문자(a-z), 영어 대문자(A-Z), 밑줄(_), 마침표(\.), 하이픈(-)만 들어올 수 있습니다.
괄호 밖의 + 기호는 앞의 조건에 맞는 문자가 '1개 이상' 무조건 있어야 한다는 뜻입니다. 아이디가 아예 없는 형태(@gmail.com)를 방지합니다.
@ : 이메일의 상징인 '골뱅이' 기호가 반드시 그 자리에 그대로 들어가야 함을 의미합니다.
([0-9a-zA-Z_-]+) : @ 기호 바로 뒷부분, 즉 naver, gmail 같은 포털/도메인 이름을 검사합니다. 규칙은 아이디 부분과 거의 같습니다.
(\.[0-9a-zA-Z_-]+){1,2} : 맨 뒤에 붙는 .com 이나 .co.kr 같은 최상위 도메인을 검사하는 구간입니다.
\. : 진짜 마침표(.) 기호가 와야 함을 뜻합니다. (정규식에서 마침표는 특수기호라 앞에 역슬래시 \를 붙여 일반 문자로 인식시킵니다.)
{1,2} (가장 중요 ⭐) : 이 부분이 핵심입니다! 바로 앞의 그룹 (\.[...]) 형태가 1번 또는 2번 연속으로 올 수 있다는 뜻입니다. 예를 들어 .com이나 .net은 1번 온 것이고, .co.kr이나 .go.kr처럼 마침표 그룹이 2번 연속 오는 한국형 도메인까지 모두 통과시켜 줍니다.
$ (달러) : 문장의 **'끝'**을 의미합니다. 정규식 검사가 여기서 완벽하게 종료되어야 함을 나타냅니다.
3. 실제 JavaScript에서 활용하는 방법 (test 메서드)
정규식을 만들었으니 실제로 어떻게 써먹는지 알아야겠죠? 자바스크립트에서는 정규식 객체의 test() 메서드를 사용하면 아주 간단하게 검사할 수 있습니다.
사용자가 입력한 값이 정규식 조건에 맞으면 true를, 틀리면 false를 반환합니다.
| // 1. 이메일 정규표현식 변수 선언 const regex = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/; // 2. 검사할 이메일 문자열 const testEmail1 = "developer@tistory.com"; // 올바른 이메일 const testEmail2 = "hello#naver.com"; // 틀린 이메일 (@ 없음, 특수기호 포함) // 3. test() 메서드로 유효성 검사 console.log(regex.test(testEmail1)); // 결과: true console.log(regex.test(testEmail2)); // 결과: false // 4. 실무형 함수 적용 예시 function checkEmail(email) { if (regex.test(email)) { alert("올바른 이메일 형식입니다. 가입을 진행합니다."); } else { alert("이메일 형식이 올바르지 않습니다. 다시 확인해 주세요."); } } |
이렇게 함수를 하나 만들어두면, HTML의 <button> 클릭 이벤트 등과 연결하여 회원가입 폼 제출 전에 완벽하게 오류를 차단할 수 있습니다.