검색 엔진 호출

검색 호출

        $.getJSON(URL + SearchText, function () {

        }).done(function (res) {

            if (searchText != res.searchText) {
                return false;
            }

            Front(res); 

        });

검색엔진 API URL과 검색 텍스트를 합쳐서 호출

Json 형태로 받은 데이터를 활용하여 Front 구성

보안사항

• 검색 호출하는데 있어서 keyup 방식이다보니 키워드를 검색할 때, 한번 호출이 아닌 여러번 호출 문제 발생, 완성된 키워드 1번 호출로 변경 필요
• 검색 텍스트 모음 자음 알파벳 1글자 제외

해결방법

• keyup을 통해 여러번 호출되는 부분을 통제할 필요가 있었고 debounce 을 사용
• debounce : 일정 시간 동안 추가 입력이 없을 때에만 동작
• 즉 keyup 이벤트를 시간으로 통제 가능

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

• CDN 추가

function search() {


    const handleKeyUp = (event) => {
        searchCheck(event);
    };

    const searchCheck = _.debounce((event) => {

        var searchText = event.target.value;

        const searchReg = /[A-Za-zㄱ-ㅎㅏ-ㅣ]{1}/g;

        var searchCheckBool = searchReg.test(searchText);

        if ((searchText.length < 2 && searchCheckBool) || searchText.length == 0) {
            return false;
        }

        $.getJSON(searchURL + searchText, function () {

        }).done(function (res) {

            if (searchText != res.searchText) {
                return false;
            }

            Front(res);

        });

    }, 700); 

    document.addEventListener('keyup', handleKeyUp);
}

• 검색어 한글자도 호출이 필요하여 정규식 적용, 모음 자음 알파벳 1글자 검색 불가
• API에서 전달 받은 검색어와 사용자가 입력한 검색어가 불일치 하면 검색 불가
• keyup 이후 700ms 동안 동작이 없으면 검색 API 호출