프론트엔드 UI개발 04_Instant Search

프론트엔드 UI개발 중에서 사용자가 원하는 단어를 빠르게 검색하기 위해서 Instant Search를 사용합니다.

class InstantSearch {
    constructor(selectorEl) {
        this.DEFAULT_DELAY_TIME = 500;
        this.delayTime = this.DEFAULT_DELAY_TIME;
        this.textinputElement = selectorEl;
        this.initialize();
        this.eventBinding();
        this.getData();
    }

    initialize() {
        const textinput = document.createElement('input');
        textinput.setAttribute('type', 'text');
        textinput.setAttribute('placeholder', 'Please enter keyword');
        textinput.classList.add('instant-search-input');
        this.textinputElement.appendChild(textinput);
        this.textinput = textinput;
    }

    eventBinding() {
        const dispatchEvent = debounce(async (targetText) => {
            this.getData(targetText);
        }, this.delayTime);

        this.textinput.addEventListener('keyup', (event) => {
            dispatchEvent(event.target.value);
        });
    }

    async getFetchDataList(word) {
        return data.filter((item) => item.word.includes(word));
    }

    async getData(targetWord = '') {
        const data = await this.getFetchDataList(targetWord);

        this.displayWordList(data);
    }

    async displayWordList(data) {
        const resultEl = document.querySelector('#wordlist');

        if (data.length === 0) {
            const errorMsg = `<div>일치하는 검색 결과가 없습니다.</div>`;
            resultEl.innerHTML = errorMsg;
        } else {
            const itemList = data.map((item) => {
                return `
                    <div>
                        <span>${item.word}</span>
                    </div>`;
            }).join('');

            resultEl.innerHTML = itemList;
        }
    }
}

document.addEventListener("DOMContentLoaded", () => {
    const selectorEl = document.querySelector('#instant-search');
    const instantSearch = new InstantSearch(selectorEl);
});

indexOf() 함수를 사용해서 입력한 글자가 포함되는 단어를 화면상에 노출시켜주는 것입니다. indexOf()는 배열로 이루어진 데이터에서 필요한 값을 가져올 때 정말 많이 사용되는 함수입니다. item.word.indexOf(word) > -1) 데이터를 가져올 때에는 비동기를 사용하여 필요한 값을 전달 받습니다. 비동기를 사용할때 Promise 대신에 가독성이 좋은 async/await를 사용하는 것을 추천합니다. 결국, async/await 또한 Promise를 내부적으로 리턴하는 명령어입니다. 좀더 코드 흐름상 개발자가 읽기 편하게 만들어 놓은 것입니다.

 

실행 순서는 우선 데이터를 가져오는 것 부터 진행합니다. 여기서 중요한 것은 바로 빈문자열을 넘겨준다는 것입니다. 빈문자열은 그 자체로 false 값을 가지고 있기 때문에 항상 includes('')은 true를 리턴합니다. 결론적으로, data에 담겨있는 모든 값들을 화면에 뿌려줍니다. 만약, 빈문자열을 넘겨주지 않으면 undefined이 되기 때문에 화면에 원하는 값들이 미노출 됩니다.

getData() 함수는 keyup 이벤트가 발생할 때마다 콜백함수로 실행이 되며, 이때마다 targetWord에 담긴 문자열 기반으로 검색어에 맞는 결과물이 노출됩니다. 문자열을 검색하기 때문에 실제로 존재 여부를 확인하기 위해서 indexOf()를 사용할 수도 있지만, 여기에서는 includes()를 사용해서 판별을 하였습니다. eventBinding 에서는 효율성을 위해서 debounce()를 사용해서 0.5초 딜레이를 만들었습니다.

 

마지막으로, 언급하지 못했던 initialize()함수를 통해서 검색어가 입력되는 input창을 생성할 수 있습니다. 이때 createElement를 사용해서 노드 엘리먼트를 생성하였기 때문에 appendChild()를 사용해서 DOM에 추가를 합니다.