codestates / codestates/Memory-It
[Error Handling] 정규표현식 메소드 test() 반복 사용시 true/false가 반복되는 상황
- Dominant language
- JavaScript
- Stars
- 1
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
### 어떤 에러인가요?
+ 정규표현식 메소드인 test()를 사용해서 유효성을 검사하는 과정에서 결과가 true 와 false로 계속 왔다갔다하는 상황
+ 사실 오류가 아니고 정규표현식의 lastindex를 이해하지 못해서 발생한 결과
### 에러 핸들링 방법
+ 로그인 시 1차적으로 이메일과 비밀번호 유효성 검사를 진행하기 위해 정규표현식을 사용했다.
+ 정규표현식을 위해 사용할 수 있는 메소드는 test를 제외하고 RegExp, exec, String, match, replace, search, split 이렇게 다양하게 있지만 MDN에서 패턴 대응을 위해서는 test, search를 추천했다. 그중 test는 bool값을 반환하기 때문에 지금 상황에서 쓰기 좋고, 간편해 보였다.
```jsx
const emailRegExp = /^([_]?[0-9a-zA-Z]+[_]?[0-9a-zA-z]+)@[a-z]+.[a-z]+$/ig
const passwordRegExp =
/^([0-9a-zA-Z]+[!@#$%^&*()]+[0-9a-zA-Z!@#$%^&*()]*)|([!@#$%^&*()]+[0-9a-zA-Z]+[0-9a-zA-Z!@#$%^&*()]*)$/ig
const emailValidator = (email: string): boolean => {
return emailRegExp.test(email)
}
const pwValidator = (pw: string): boolean => {
return passwordRegExp.test(pw)
}
```
+ 문제는 서버로 요청을 보낼때 양식에 맞는 데이터를 보내도 한번은 true 한번은 false 이렇게 결과를 교차로 보내는 현상이었다.
+ 처음에는 컴파일 오류라고 생각했으나(가끔 ts컴파일이 먹통일때가 있다..) 구글링을 해보니 lastindex와 관련된 문제임을 확인
+ 정규표현식 emailRegExp, passwordRegExp 애서 마지막에 global속성을 적용한것을 확인할 수 있는데(마지막 /ig 에서 g) 이는 정규식 내에서 입력한 문자열과 매칭되는 정보를 모두 찾는 속성이다.
+ 즉 매칭되는 정보가 많다면 순차적으로 전부 찾는다는 것인데, 예를 들어 'iam J and iam H and iam C'이라는 문자열에서 'iam'을 찾는 정규표현식에 global 속성을 넣었다면 일치하는 iam(여기선 3개)을 전부 찾는것.
+ 이때 사용되는 것이 **_lastindex_** 이다. 하나를 찾으면 찾은 부분을 lastindex로 두고 거기서부터 다시 찾기를 반복한다.
+ 근데 만약 문자열이 'iam' 이게 전부라면 첫번째 iam을 찾고 ('iam'이 문자열의 전부라도)두번쨰 iam을 찾기위해 lastindex를 3으로 둔다. 그리고 그다음 탐색때 index3부터 'iam'을 찾으려고 시도하기때문에 아무것도 찾을 수 없는것이다.
+ 그래서 false를 반환하는데. test(), exec()는 false를 반환할 시 lastindex를 초기화한다. 그제서야 다시 lastindex가 0으로 돌아가서 또 다시 test()를 호출하면 true를 반환하고 그다음은 다시 false반환함.
+ 이를 해결하기 위해 다양한 방법이 있겠지만 global속성을 없애는것으로 해결했다.
+ 썩 선택하고싶은 방법은 아니였지만 현재로서는 유효성을 검사하기위함이고 정확이 정규표현식과 일치하는 **_하나_** 의 값만이 필요하기 때문에 global속성을 과감히 버림
+ 급하게 찾고 해결하느라 정확한 정보가 아닐 수 있습니다,
### 에러 핸들링을 위해 참고한 레퍼런스 링크
[레퍼런스 링크 MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test#%EC%A0%84%EC%97%AD_%ED%94%8C%EB%9E%98%EA%B7%B8%EC%99%80_test)
[레퍼런스 링크 Blog](https://h-kkaemi.tistory.com/20)
[레퍼런스 링크 Blog](https://12ahn22.tistory.com/entry/%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D-regex)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.