프로젝트 회원가입 기능을 구현할 때, 사용자가 입력한 이메일이 이메일 형식과 일치하는지 여부를 확인하기 위한 이메일 유효성 검사 기능을 구현하였다.

// 유효성 검사.
const checkValidate = (inputdata) = {

	const emailValidatePattern = '/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i';
    
    if (emailValidatePattern.test(inputdata)) {
        return true;
    }
    else {
        return false;
    };

};

프론트단에서 입력한 값을 가져와서 정규 표현식 패턴에 부합하는지 test() 함수를 적용, 그 결과값을 반환하도록 유효성 검사 함수를 구현하고 실행 테스트를 해본 결과..

1. 안되네??

Uncaught TypeError pattern.test is not a function.

그런데 매우 낯이 익은 에러 메시지이다. is not a function이라는 문구는 함수가 아니라는 뜻. test() 함수는 내가 만든게 아니라 이미 내장되어 있는 것을 호출하는 것이기 때문에 존재하지 않는 함수를 가지고 오려 한 것은 아니다. 그렇다는 것은.. 함수를 호출한 주체가 잘못되었다는 것.

즉, emailValidatePattern 변수는 test() 함수를 호출할 수 없는 상태라는 뜻이다. 이런 결론을 내리고 알아본 결과, 다행스럽게도 내 생각이 맞았다.

출처 : Borislav Hadzhiev Blog.

2. 정규 표현식은 문자열이 아니다.

test() 함수를 호출할 수 있는 정규 표현식 패턴에 ''를 사용하면 안된다. 정규 표현식 패턴이 아니라 문자열 데이터로 선언되기 때문이다.

정규 표현식 패턴을 선언할 경우 다음과 같은 2가지 방법이 있다.

1. const pattern = /정규 표현식 패턴/;
   -> 정규 표현식 패턴 양 끝에 / /를 붙여준다.

2. const pattern = new RegExp('정규 표현식 패턴');
   -> new 연산자로 정규 표현식 방식의 데이터를 선언해준다. 이 경우에는 ''를 사용할 수 있다.

나는 1번 방법을 적용하였고, 에러가 해결되었다.