\역슬래시 에러

문제 상황

코드 리뷰 중에 파트장님께서 \를 누르셨다가 페이지가 슈-웅 없어지는 걸 함께 봤다.
뜻밖의 QA시간이었다...

아래 보이는 것처럼 \ 역슬래시를 입력할 경우 에러가 발생해 페이지가 날아간다.

공용 사용 목적으로 만든 SearchInput 컴포넌트라 import한 다른 페이지에서도 똑같은 오류가 발생했다.

에러 메세지를 읽고 아래 searchWord에서 만약 사용자가 \를 입력하면
정규표현식에서 \을 문자로 받아들이지 않고 이스케이프 시퀀스 시작을 의미하는
\백슬래시로 받아들이기 때문에 문제가 발생함을 알았다.

export const filteredTableState = selector({
  key: 'filteredTableState',
  get: ({ get }) => {
    const list = get(getBackTestState);
    const searchWord = get(searchWordState);
    const regexSearchWord = new RegExp(searchWord, 'g');

    return list.filter(item => regexSearchWord.test(item.name_kr));
  },
});

해결

정규표현식이 있는 상태 값 관리부분에서 \를 빈문자열로 처리할까 생각했지만
잘못된 값을 전달해서 가공할 필요가 없이 처음부터 input에서 \를 빈문자열로 변경하면
더 안전하다고 생각해 replace 메서드를 사용해 SearchInput을 아래와 같이 수정했다.

const SearchInput = ({ setState, optionData }) => {
  const handleInputChange = ({ target: { value } }) => {
    value = value.replace(/\\/g, '');
      setState(value);
  };
  
  // return
  // ...
}

\ 역슬래시를 사용하면 검색창에도 \가 입력이 불가능한 것처럼 빈 상태로 둘 수 있지만
사용자 입장에서는 \를 입력했는데 경고창이 뜨면 당황스럽고
또 경고창이 아닌 빈 문자열만 보여주면 혹시 자신의 키보드에서 \가 고장 났나 생각할 수도 있다.

그래서 나는 \가 비록 상태 값에는 빈 문자열로 전달되지만
사용자가 보는 UI에서는 작성한\가 보이도록 만들었다.

끝으로 파트장님께서 말씀해주신 게 생각난다.

내가 작성한 코드를 테스트하고 싶으면 진짜 사용자가 비정상인 사람이라고 생각해야 한다고 하셨는데
기능을 구현할 때마다 이 말을 떠올리면서 설계하려고 노력하고 있다.

진짜 생각할 수 없는 그런 행동을 하는 사람
예를 들어 0을 수없이 막 누르고 영어썼다가 한글 썼다가
갑자기 왼쪽 화살표 자판 누르거나 스페이스를 미친 듯이 누르거나
그런 예상할 수 없는 행동을 하는 사람이 쓸 수 있다고 생각하고 설계하자!