Final을 할 때 쯤이면 if문 이런건 완전 마스터 했겠지?
라고 생각하던 때가 있었다. 하지만 기본이 가장 마스터하기 어려운 법. 더욱이 if문은 코딩이라기 보다는 프로그래밍적 사고를 더 요구하는 부분이라 앞으로도 계속 노력해야하지 않을까 싶다.
아무튼 오늘 이 글을 쓰게 된 이유는
이 유효성 검사이다. 회원가입을 만들 때 가장 고생했던 부분이기도 하다. 수정 할 때 input 값을 변동하는 것도 어려웠지만 이는 나중에 다루기로 하고, 유효성 검사라는게 참 빡셌다. 단순히 버튼을 눌렀을 때 한번에 검사해서 튕기거나 하는건 쉽겠지만 나는 다른 사이트들 처럼 사용자가 어느 부분이 잘못 되었는지 바로바로 알 수 있는 방법을 원했다.
그래서 실시간으로 검사를 진행해서 유저에게 무엇이 잘못 되었는지, 맞는지를 알려주려고 했다. 이 부분에서 유효성 검사는 정규식과 조건문 들을 사용했는데, 어려웠던 부분은 바로 백스페이스 였다. 실시간 검사는 useEffect나 useCallback을 통해 input의 값이 변화하면 그 때마다 검사하게 해주면 되는데, input 내부의 값을 컨트롤+A로 모두 선택해서 한번에 지우면 공백이 되는데 이걸 인식을 잘 못 했다.
처음에는 비동기 문제인가? 싶었는데 그건 아니었다.
그래도 전에 고생했던 전적이 있었어서 그런가 비교적 빠르게 해결 했다. 지금 돌아보면 IF문의 설계 자체가 조금 잘못된게 아닌가? 라는 생각이 든다. if문을 진입 시 비밀번호 input창의 값이 있고(undefined나 공백이 아니고), 비밀번호 확인 input의 값이 공백이 아니면 검사를 진행하는데, 이 if문을 빠져나온 이 후에 그냥 else로 처리를 해줬었다.
이때는 그냥 else로 하면 이 조건을 제외한 모든 조건에서 발동하겠지? 라고 생각했지만 아니었다. 여기서 정확하게 else if로 비밀번호 확인 input값이 공백일 때 라는 조건을 추가해주지 정상적으로 작동했다.
즉, else로 그냥 한번에 처리 할 생각하지 말고 조건을 정확하게 알려주어야 잘 작동한다는 것. 조금 귀찮고 어려워도 확실한 처리를 위해서는 더 신경 쓰도록 하자.
