Input 입력 후 유효성 검사 : 문제 해결 과정 / Debounce 발견

현재 상황

회원 추가시 ID를 입력하는 부분이 있다.

ID 입력 input에서 포커스가 out되면 비동기 처리를 하여 중복된 ID 검사를 하기위한 유효성 검사가 필요하다.

ID 부분에서 입력 후 비동기로 user테이블을 조회하여 중복된 ID 검사를 하려고 한다 ( 유효성 검사 )

문제 분석 및 해결 과정

•  Ant Design의 Input을 사용하다 보니 onFocusout, onInput 이벤트에 관한 부분이 없었다. ( 타이핑 시 이벤트 발생 리스너 )
• 위 이벤트를 대신할 onChange를 통해서 비동기 유효성 검사 기능을 만들어야 한다.
• 비동기 유효성 검사 기능을 구현하기 위해 입력 후 일정 시간이 지나면 비동기 통신으로 유효성 검사를 하고자 추정
• 기능 구현을 타이머에 관련된 구글링도중 쓰로틀링(throttling)과 디바운싱(debouncing)을 찾음
• 여기서 디바운싱(debouncing)은 연속된 함수 호출이 발생할때 비효율적으로 연속되는 함수 호출을 막기위해 마지막으로 호출되는 함수만 허용하는 방법임을 찾음.
• 디바운싱 기능 구현 추정
  :  onChange를 통해 input값이 바뀔때마다 비동기 통신으로 ID 유효성 검사를 하는 것보단 ( 타이핑마다 발생되는 유효성 검사) ID를 마지막으로 타이핑한 후 일정시간( 3초 뒤 )이 지나면 함수를 호출하도록 함
• 디바운싱을 구현 방법 ( js 기준 )
  : 'timer'(초단위) State값을 할당하고 Input태그에 'input'이벤트 + setTimeout을 통해 비동기 통신
  ( timer값을 설정( 2초)하면 타이핑마다 setTime호출, 대신 2초가 지나기 전에 타이핑하면 다시 이전의 setTimeout무시 후 다시 초기화 )
• 리엑트에서 더 간단하게 사용하는 방법을 사용하기 위해 모색하는 중 npm에서 debounce패키지 발견
• npm에서 제공하는 debounce 패키지 중에서 기능구현에 알맞는 것을 찾기 위해 탐색하고 weekly Downloads 값을 비교하여 비교적 검증된 패키지를 선정하여 사용하도록 함

정리

이처럼 문제를 해결하기 위해서 상황을 분석하여 해결책을 모색한다.

그리고 더 나은 해결책을 찾기위해서 탐색하고 더 나은 방법을 검증하고 선정한다.

( 학습을 위해 처음부터 심층적인 원리를 파악하며 시간을 낭비하지 않는다. )