auto-complete_비동기 콜백 함수, focusEvent, mouseEvent

---

다음과 같이 Input 태그에 키워드를 입력하면 관련 키워드에 대해서 추천 검색어를 사용자에게 보여주도록 구현하고자 한다.

 

debounce를 통한 request 호출 최소화

사용자 Input 태그에 키워드를 입력하면 자연스럽게 추천 검색 리스트를 보여주도록, debounce 기능을 활용하여 의도적으로 지정된 시간만큼 딜레이하였다.

let dispatchEvent = debounce(
            (targetText) => { //사용자가 Input 태그에 입력한 value 값
            requestAdapter.get(this.requestUrl, targetText)
                .then((result) => {
                this.displayWordList(
                    this.searchListElement,
                    result
                );
            })
            }
            ,this.DEFAULT_DELAY_TIME);

---

이때 debounce 함수에서 첫 번째 인자인 콜백함수는 targetText 라는 사용자가 현재 Input 태그에 남긴 키워드를 인자로 받고 있다.

targetText는 다음과 같이 함수를 리턴 받은 dispatchEvent 내에서 argument로 처리하여 콜백 함수로 전달한다.

(첨언하자면 상위 함수의 매개변수인 callback과 delayTime은 클로저에 의해 중첩_자식 함수 내에서 참조할 수 있다)

 

export const debounce = (callback, delayTime) => {
    let timeout = null;
    return (...args) => { 
        const context = this;
        if(timeout) clearTimeout(timeout);
        timeout = setTimeout(() => callback.apply(context, args), delayTime);
    }
}

이때 전달 받은 argument는 Rest 파라미터를 통해 받음으로써 배열의 형태를 띄게 되는데, 이 배열 내의 인자값을 사용하기 위해서

func.call()이 아닌 func.apply()를 사용했다.

call() 메서드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다. 
이 함수 구문은 인수 목록을, 반면에 apply()는 인수 배열을 받는다는 점이 중요한 차이점입니다.

정리하자면, Input 태그에서 전달 받은 value는 다음과 같은 호출 순서로 전달이 된다.

이벤트 발생 => dispatchEvent(value) => debounce Callback(value) => setTimeout Callback(value) => request(value)

---

debounce에서의 콜백 함수는 다음과 같이 Promise 객체를 리턴 받는다.

export class RequestMockAdapter {
    constructor() {}

    get(url, param) {
        return new Promise((resolve, reject) => {
            resolve(
                param ?
                request.data.filter((item) => item.text.toLocaleLowerCase().indexOf(param.toLocaleLowerCase()) > -1) :
                []
            );
        })
    }
}

입력받은 키워드가 있을 경우(param값) 저장된 데이터 내에서 해당 키워드를 포함하고 있는 단어들을 새로운 배열에 적재하였다.

 

만약에 K를 Input에 입력을 하게 된다면 K로 시작되는 모든 키워드들을 찾고, Ke를 Input에 입력을 하게 된다면 Ke로 시작되는

모든 키워드들을 찾는다. 이때 K를 기준으로 인덱스를 반환하는데 K 다음에 연속되서 오는 키워드가 있을 경우에는 K의 인덱스 요소

(최소 0의 값을 지님)를 반환하지만 연속되서 오는 키워드가 없을 경우에는 -1을 반환환다.

 

이때 키워드의 대소문자를 구분 짓지 않기 위해서 toLocaleLowerCase()를 사용하여 찾아야 할 키워드를 소문자로 통일하였다.

 

filter() 메서드에 대한 결과값은 새로운 배열에 할당되는데, 이는 resolve()가 호출되면서 후속 처리 메서드인 then()의 인자인 result에

할당하였다.

requestAdapter.get(this.requestUrl, targetText)
                .then((result) => {
                this.displayWordList(
                    this.searchListElement,
                    result
                );
            })

 

focusEvent

마우스가 Input 창에서 포커스 아웃이 되면 추천 키워드 리스트 창을 화면에서 사라지도록 기능을 구현하고자 다음과 같이 클릭 이벤트를 이용하였다.

document.querySelector('body').addEventListener('click', e => {
             if(!e.target.classList.contains(`${this.textinputElement.getAttribute('class')}`)) {
                 this.searchListElement.style.display = 'none';
             }
        })

---

하지만 이보다는 명시적으로 요소에서 포커스가 떨어졌을 때를 감지하는 이벤트인 focusout/focusin 이 있다는 것을 확인하였고 이를 다음과 같이 적용하였다.

focusout 이벤트가 발생 요소는 잃게 초점을하려고 할 때 발생한다.
반면에 focusin 이벤트는 요소가 포커스를 받을려고 할 경우 발생한다.

this.textinputElement.addEventListener('focusout', () => {
            if(listOver) return;
            this.hiddenElem(this.searchListElement); //리스트를 숨기는 함수를 호출
        })
        
 this.textinputElement.addEventListener('focusin', e => {
            dispatchEvent(e.target.value); //Input 태그에 있는 키워드에 따른 추천 검색 리스트를 다시 호출
        })

 

mouseEvent

리스트에 마우스가 hover가 되어 있는 경우에는 포커스를 잃더라도 리스트가 화면 상에서 사라지면 안되기 때문에 mouseover/mouseout 이벤트를 사용하였다.

 this.searchListElement.addEventListener('mouseover', () => {
            listOver = true; //listOver가 참일 경우에는 리스트를 사라지지 않게 return 
        })

        this.searchListElement.addEventListener('mouseout', () => {
            listOver = false;
        })