정규식 Test Method에 대해 새롭게 알게된 점

😱 문제발생

원티드 프리온보딩 프론트엔드 인턴십에 참여하여 1주차 과제를 진행하던 중이었다.
1주차 과제는 인턴십에 참여하기 위해 수행했던 사전과제를 동료학습을 통해 리팩토링 하는 것이였고, 나는 팀원들과의 토의로 얻은 Best Practice의 기준을 가지고 Assignment1의 기능 구현을 맡아 코드를 작성하고 있었다.

• Assignment 1
  • 회원가입과 로그인 페이지에 이메일과 비밀번호의 유효성 검사기능을 구현해주세요
    • 이메일 조건: @ 포함, 비밀번호 조건: 8자 이상
  • 입력된 이메일과 비밀번호가 유효성 검사를 통과하지 못한다면 button에 disabled 속성을 부여해주세요

Assignment 1의 유효성 검증을 구현하기 위해 정규식을 이용하는게 좋을 것 같다라는 의견을 수용해, password: /^.{8,}$/g의 정규식을 통해 코드를 작성하고 정상적으로 동작하는지 확인을 하는데 갑자기 다음과 같은 문제가 발생했다.

8자리의 비밀번호를 입력했을때 error message가 정상적으로 사라지길래 검증이 잘 되는구나 생각했는데, 추가적으로 비밀번호를 입력할때 마다 error message가 생겼다 없어졌다 하는 것이다. 즉 비밀번호를 입력할때마다 정규식으로 검증한 결과가 바뀐다는 것이였는데, 혹시나해서 정규식으로 검증한 결과를 개발자 도구를 통해 살펴보았다.

같은 정규식으로 같은 값을 검사했는데도 그 결과가 계속해서 바뀌는 현상이 일어났는데, 아무리 생각해도 이해가 되지 않아 ChatGPT를 통해 질문을 해 본 결과 다음과 같은 답을 받을 수 있었다.

😊 문제해결

ChatGPT 답변을 바탕으로 조금 더 이해를 위해 검색을 해보니 RegExp.prototype.test()의 대한 MDN 문서에서 전역 플래그와 test()라는 항목으로 예시를 들어주며 설명을 해주고 있어 왜 이런 현상이 발생했는지 알 수 있었다.

정규 표현식에 전역 플래그를 설정한 경우, test() 메서드는 정규 표현식의 lastIndex를 업데이트하고 test()을 다시 호출하면 str 검색을 lastIndex부터 계속 진행하는데, lastIndex 속성은 test()가 true를 반환할 때마다 증가하고 test()가 false를 반환할 땐 0으로 초기화되어 결과가 계속해서 바뀌던 것이였다.

exec() 메서드도 test() 메서드처럼 전역 탐색 플래그를 제공한 정규 표현식에서 여러 번 호출하면 이전 일치 이후부터 탐색한다고 하니 정규식을 사용할 때 주의해야 할 것 같다.

정규식이 정말 유용한것은 알지만 항상 어렵게 느껴지는 것 같다. 그래도 이렇게 정규식에 대해 알아볼 기회가 있을 때 마다 잘 정리해서 능숙해지려고 노력해야겠다!

참고

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test