searchEffect02 - includes()

   const searchBox = document.querySelector("#search-box");	     // 사용자의 입력 칸에 대한 태그의 search-box 아이디 이름을 불러온다
   const cssList = document.querySelectorAll(".list ul li");     // li의 data-name(검색할 속성의 데이터) 값
   const cssCount = document.querySelector(".count em");	     // 전체 속성의 개수

   cssList.forEach((element, index) => {   				     // 검색할 전체 속성의 데이터(element), 속성이 저장된 값의 배열 인덱스(index)
   element.classList.add("show");							     // 요소에 show 클래스 이름을 추가
   cssCount.innerHTML = index + 1;							     // cssList의 인덱스 개수 + 1 (배열 공간에 데이터가 저장될때 항상 0번지부터 저장된다)
   });

   searchBox.addEventListener("keyup", () => {				// 키를 눌렀다가 떼었을때
   const searchWord = searchBox.value; 							// 사용자가 입력한 값을 저장한다

   cssList.forEach((ele) => {								// 전체 속성의 데이터들에 접근
   const cssName = ele.dataset.name; 							// css 속성 값을 cssName에 저장

   if (cssName.includes(searchWord)) {							// 사용자가 입력한 값이 cssName에 있을 경우
        ele.classList.add("show");								// 각 요소들에 show 클래스 이름을 추가
       } else {
           ele.classList.remove("show");						// 없을경우 show 이름 삭제
         }
       });
   });

includes() 참고