2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
JavaScript 입문과 웹 UI 개발 > Level 3 > (실전) 웹개발 기능대회 예제 관련 질문입니다. 아래는 제 코드입니다:
검색기능
1. #search의 <input> 창에 'input' 이벤트가 발생하면
2. 그 내용을 'value'라는 변수에 저장하고 'regex'라는 변수에 정규표현식 형태로 저장.
3. 상품목록 원본 어레이인 'products'를 필터한 'filteredProducts' 어레이 생성. (조건: 상품명이나 업체명에 'regex'가 들어있어야 함)
4. 상품목록(.products)을 비운 뒤
5. 미리 만들어둔 함수인 productCardGenerator()를 써서 .products에 어레이 원소 수만큼 상품카드 생성.노란배경 하지만 노란색 배경을 입히기 위해 두 가지 방법을 시도해봤는데 방법1)을 쓰니 버그가 생기더군요. 왜 방법2)는 문제없이 작동하는 반면 방법1)은 안 되는지 궁금합니다.
방법 1) 1. 'filteredProducts'가 빈 어레이가 아닌 경우, 'filteredProducts'의 각 원소마다 상품명과 업체명에 replace() 함수를 써서 'regex'가 들어맞는 부분은 `<span style="background: yellow;"></span>로 감싸기. 2. 상품목록(.products) 비운 뒤 3. productCardGenerator() 사용. (filteredProducts가 빈 어레이면 아무 카드도 없을 것이고, 빈 어레이가 아니라면 노란 배경이 입혀진채로 카드가 생성될 것. 위처럼 작동할거라 예상했지만 첫 음절까지는 노란색 배경을 입혀주지만, 검색어가 두 음절 이상으로 길어지는 순간 검색 기능자체가 작동하지 않는 오류가 생깁니다. 게다가 검색어를 지우고 새로운 검색어를 써도 이전 검색어 일부에 입혀진 노란 배경이 그대로 남아 있습니다. 인풋 이벤트마다 filteredProducts 어레이를 재생성해서 replace()를 쓰는 건데 왜 버그가 생기는 건가요?
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.