왜 console이 이렇게나 많이....(addEventListener 중복 호출)

프로젝트 평가 기준을 보다가 

Enter 키로 검색을 실행해도 버튼 클릭과 동일한 결과가 나올 수 있도록 구현하세요.

 

라는 부분이 있어 흠칫했습니다....

디바운싱으로 구현하면 상관 없는거 아니야.....? 라고 생각하고 바로 튜터님께 갔더니 "상관없어요~~~ㅎㅎ"라는 말을 듣고 안심했지만 뭐 도전 기능 구현도 끝냈겠다 바로 디바운싱과 일반 검색 두 개의 기능을 선택해서 사용할 수 있도록 만들어보자...! 라는 생각이 들었습니다.

 

일단 

<select id="search-type">
    <option value="search-debouncing">디바운싱</option>
    <option value="search-normal">일반검색</option>
</select>
<input id="movie-search" type="text" placeholder="영화를 검색하세요..." autocomplete="off">

 

이렇게 select 태그를 이용하여 디바운싱과 일반검색을 선택할 수 있도록 해줍니다.

 

 

그 후에 각각의 검색 기능을 searchDebouncing과 searchNormal로 나눠주고

const searchDebouncing = searchInput.addEventListener(
    'input',
    debounce((e) => {
        console.log(e.target.value);
        const search = e.target.value.trim();
        renderMovieList(search);
    }, 300)
);

const searchNormal = searchInput.addEventListener(
    'keyup',
    (e) => {
        if(e.key === 'Enter'){
            const search = e.target.value.trim();
            renderMovieList(search);
        }
    }
)

 

그 후 select 태그 이벤트리스너에서 초기에 설정해놨던 검색 이벤트리스너를 삭제해서 초기화해주고 디바운싱을 선택하면 디바운싱 이벤트리스너를 일반 검색이면 일반 검색 이벤트리스너를 추가해줬습니다.

 

searchInput.addEventListener('input', searchDebouncing);

searchOption.addEventListener('change', (e) => {
    const selectedOption = e.target.value;

    searchInput.removeEventListener('input', searchDebouncing);
    searchInput.removeEventListener('keyup', searchNormal);

    if (selectedOption === 'search-normal') {
        console.log('normal');
        searchInput.addEventListener('keyup', searchNormal);
    } else {
        console.log('debounce');
        searchInput.addEventListener('input', searchDebouncing);
    }
});

 

 뭐 바로 되는 줄 알았는데 역시나...

 

??????

 

수많은 콘솔의 향연.....
저렇게 많이 콘솔이 찍히는데에는 무조건 함수의 중복된 호출 때문일거라 생각하고 수정에 들어가봤습니다.

 

다시 보니까 왜 저렇게 짰는지....

searchDebouncing과 searchNoraml 함수에서도 이벤트리스너가 있고 searchOption에서 검색 방식이 바뀔 때마다도 이벤트리스너가 중복으로 실행되는 중이었습니다....

const searchDebouncing = debounce((e) => {
	console.log(e.target.value);
    const search = e.target.value.trim();
    renderMovieList(search);
}, 300);

const searchNormal = (e) => {
    if (e.key === 'Enter') {
        const search = e.target.value.trim();
        renderMovieList(search);
    }
};

 

바로 함수에서 addEventListener를 없애고 매개변수를 받아서 그 값에 따라 렌더링해주는 함수로 바꿔주고 실행해봤습니다.

 

이런 간단한 데에서 실수를 하면서 코드를 짜다니...

 

그래도 이런 실수를 하면서 다 성장하는거 아니겠습니까~~~

프로젝트도 점점 깔끔해지는 중인거 같아(제 기준ㅎ) 만족스럽습니다!!