debounce

1) 호출 스케줄링함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케일링이라 한다.자바스크립트 엔진은 싱글 스레드로 동작한다. 이런 이유로 타이머 함수 setTimeout과 setInterval은 비동기 처리 방식으로 동작한다.  2) 타이머 함수setTimeout / clearTimeoutsetTimeout 함수의 콜백 함수는 두 번째 인수로 전달받은 시간 이후 단 한 번 실행되도록 호출 스케일링된다.const timeoutId = setTimeout(func|code[, delay, param1, param2, ...]); 매개 변수설명func타이머가 만료된 뒤 호출될 콜백 함수delay타이머 만료 시간 (밀리초(ms)..

[ React ] SelectBox 컴포넌트 구현단순한 SelectBox 만들기 ~  요구사항 분석필요한 컴포넌트SelectorBox - 선택된 값이 표시되는 요소OptionListBox - 옵션 리스트 팝업OptionItem - 옵션 리스트 내의 각각의 아이템CaretIcon - 옵션 리스트 팝업zodev.tistory.com지난번 만든 SelectBox에서 더 나아가 검색을 통해 옵션 리스트를 불러오는 SelectBox를 만들어봤다. 기본 틀은 이전과 동일 !!  추가할 내용InputInput에 따라 달라지는 options  1. Input 입력된 값을 보여주기 위해 keyword 변수를 생성했다.// Input 컴포넌트에 바인딩하는 Keywordconst handleInput = (e: React...

목표 ▪️ q-select의 options를 input 입력을 통해 API로 조회하기 ▪️ API 요청 횟수를 줄이기 위해 요청에 debounce 처리하기 ▪️ 한국어 입력 시 단어 파괴 또는 오류가 없도록 하기 구현 1. 사용자 입력 허용 use-input hide-selected fill-input 위의 세 가지 속성을 추가해줘야 한다. 각각의 역할은 ▪️ use-input : 사용자 입력 허용 ▪️ hide-selected : 옵션에서 값을 선택하면 input 값과 selected된 값이 모두 필드에 보여지게 된다. 그때 선택된 값을 숨겨 하나만 나타나게 한다. ▪️ fill-input : hide-selected 속성과 함께 쓰인다. 입력한 값을 필드에 보여지게 한다. ※ fill-input 속성..