SMALL
현재 상황
회원 추가시 ID를 입력하는 부분이 있다.
ID 입력 input에서 포커스가 out되면 비동기 처리를 하여 중복된 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 값을 비교하여 비교적 검증된 패키지를 선정하여 사용하도록 함
정리
이처럼 문제를 해결하기 위해서 상황을 분석하여 해결책을 모색한다.
그리고 더 나은 해결책을 찾기위해서 탐색하고 더 나은 방법을 검증하고 선정한다.
( 학습을 위해 처음부터 심층적인 원리를 파악하며 시간을 낭비하지 않는다. )
LIST
'일반' 카테고리의 다른 글
인라인 스타일에서 hover지정하기 (0) | 2023.06.14 |
---|---|
React : 함수형 업데이트 (0) | 2023.06.14 |
eslint -disable 경고 해결 (0) | 2023.06.14 |
CORS 에러 해결 (0) | 2023.06.13 |
PostMan Error : Cloud Agent Error 해결 (0) | 2023.06.13 |