5. 최근 검색어 구현_1
: 최근 검색어, 목록이 탭 아래 위치!
: 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면 이동!
추천 검색어 목록과 유사하지만 약간의 차이가 있기 때문에 KeywordView를 복사해서 사용할 것이다.
우선
html에서 search-keyword 아래에 search-history를 만들어 주었고
새롭게 HistoryView.js도 생성해준 뒤, KeywordView를 복사해왔다.
이제 Maincontroller와 연결해보자!! HistoryView를 import 해오고
이렇게 KeywordView와 똑같은데 History로만 변경해주었다.
그리고 onClickKeyword 함수와 똑같이 onClickHistory 함수에서도 search 메소드를 실행하도록 해주었다.
자..여기서 이제 저번에 막혔던 코드를 고쳐볼 것인데
우선 selectedTab을 최근 검색어로 바꾸어 줬고
if else 문 밖에 ResultView를 hide 해주었다..
그리고 추천 검색어인 경우에 fetchSearchKeyword 함수를 써준 것처럼 최근 검색어인 경우에는 fetchSearchHistory 함수를 호출하도록 해주었다.
짜잔 그러면 이렇게 잘 나온다!!!
5. 최근 검색어 구현_2
: 검색 일자, 버튼 목록이 있다.
HistoryView를 작성하기 전에 복사해왔던 KeywordView를 보면
이렇게 getKeywordHtml 함수를 이용하여 리스트에 접근하고 있다.
HistoryView에서 약간의 변화를 추가하여 이를 오버라이딩해서 사용할 것이다.
이렇게...
우선 data를 받아서 리턴하는데 컬렉션으로 들어오니까 reduce 함수를 통해서 html을 만들어 낸다.
초기 값은 ul이고 class 명은 list로! 그리고 그 결과에 닫는 ul 태그를 써줬다.
그리고 html을 계속 누적하는데 li태그로!!
li에는 위에 KeywordView에서 작성한 것처럼 data-keyword를 동일하게 작성해주었고..
우선 item의 keyword부터 출력했다.
그리고 날짜를 표시하기 위해서 미리 정의한 date 클래스를 써준다!!
그리고 마지막 x 버튼까지 출력하고 html을 리턴하면
짜잔~~ 이렇게 날짜랑 x버튼이 출력되는 것까지 구현 완료다!!
5. 최근 검색어 구현_3
: 목록에서 x버튼을 클릭하면 선택된 검색어가 목록에서 삭제되도록!!
HistoryView 에서 검색어를 자체적으로 삭제하는 것이 아니라 Maincontroller에게 위임하도록 할 것이다.
그리고 실제 데이터를 삭제하는 것은 HistoryModel이 담당하는 것이다!!
자 그럼 우선 이 x버튼에 클릭 이벤트를 바인딩 해야한다.
이렇게 말이지... 이 함수는 History의 모든 버튼을 찾아서 클릭 이벤트를 바인딩 해주는 것이다!!
this.el.querySelectorAll로 button의 정확히는 btn remove 클래스인 button을 모두 찾는다.
이는 전에 언급한 유사 배열이기 때문에 Array.from을 사용해서 배열로 만들어 주고 역시나 forEach로 btn에 하나씩 접근한다.
그래서 btn에 addEventListener로 클릭 이벤트를 달아준다!
click 이벤트가 발생했을 때 stopPropagation으로 이벤트 전파를 막고..(?)
x가 클릭 되었다는 것을 Maincontroller 에게 알려주기 위해서 onRemove함수를 만들어줬다. 여기에는 btn에 어떤 값을 지우려고 하는 것인지 해당 키워드를 보내줘야 하는데..
이 키워드는 button에 있는 것이 아니라 getKeywordsHtml에서 li element에 있다..
그래서 btn의 parentElement로 가서 dataset의 keyword를 전달해 주는 것이다..!!!!
+) e.stopPropagation이란...?
이런 것이라고 한다.... 오호라....
이제 onRemove 함수에서는 keyword를 받아오고 이를 Maincontroller에게 @remove라는 이벤트와 받아온 keyword 데이터를 한 번에 전달해준다.
자.. 이제 문제는 위의 bindRemoveBtn을 어느 시점에 호출하는가?!
Maincontroller에서 모든 뷰를 render하는 renderView에서 fetchSearchHistory 함수를 호출하고 있다.
그래서 이렇게 render함수 뒤에서 bindRemoveBtn을 호출했다.
그 이유는.. render함수를 호출하면 돔이 생성이 되고!! 그러고 나서 이벤트를 바인딩할 수 있기 때문에 체이닝 해주었다!!
+) 체이닝을 하려면 this를 리턴해주어야 하는데 HistoryView는 KeywordView를 복사해왔었고 KeywordView에서 render함수를 보면 this를 리턴하는 것을 확인할 수 있다... 이거 안 해놔서 개고생했음
그리고 다시 Maincontroller에서
@remove 이벤트가 발생했을 때 새로운 onRemoveHistory 함수로 키워드를 넘겨주고
onRemoveHistory 함수는 이렇게!!
실제 keyword를 삭제하는 것은 HistoryModel에서 담당하기 때문에 HistoryModel에서 이미 구현해 놓은 remove 함수를 사용하고 다시 화면을 그려줘야 하니까 renderView를 호출한다.
그러면 이렇게 잘 삭제된다!!!! 휴웅ㅇ......
5. 최근 검색어 구현_4
: 검색 시마다 최근 검색어 목록에 추가된다.
우선 최근 검색어 탭에 있다가 추천 검색어 탭을 선택하게 되면 onChangeTab에서 debugger에 걸리게 된다.
이렇게 TabView에서 @change 이벤트가 발생한 경우에 onChangeTab 함수를 실행하도록 구현했기 때문이다.
그래서 onChangeTab을 마저 구현해보면
그리고 화면을 확인했더니 최근 검색어와 추천 검색어 탭이 함께 나와서..
이렇게 추천 검색어인 경우에는 HistoryView를 숨겨주고 최근 검색어인 경우에는 KeywordView를 숨겨주었더니
탭끼리는 서로 잘 넘어간다....
(그치만 추천 검색어에서 해결하지 못 한 부분은 아직도... 이상함)
자 이제 하려고 했던 걸 해보면...
만약 이탈리아를 클릭했을 때, 최근 검색어에 이탈리아가 추가되도록 해야한다!
그렇다면 최근 검색어의 HistoryModel에서 관리를 해줘야겠지~?
이렇게 작성해두었던 코드를 보면 KeywordView나 HistoryView에서 onClickKeyword와 onClickHistroy 함수를 호출하는 것을 볼 수 있다.
onClickKeyword와 onClickHistroy 함수는 모두 search 함수를 호출하는 것을 볼 수 있어서
search함수에다가 하고자 하는 작업을 할 것이다!!
이렇게 63번째 줄처럼 HistoryModel에 이미 구현해놨던 add 함수를 써준다.
그러면 이탈리아를 클릭하고 최근 검색어를 눌렀을 때
이렇게 최근 검색어에 이탈리아가 추가된 것을 확인할 수 있다.
(원래 저 아래 사진은 없어야 하는데ㅠㅠ)
그리고 검색창에 내가 직접 글씨를 작성해도
이렇게 명수옹이 최근 검색어로 들어간 것을 확인할 수 있다.
이렇게 해서.... 자바스크립트를 이용한 구현 끝....
다음에 뷰로 이를 다시 구현하면서 저렇게 결과 사진, 글이 남는 부분도 마저 수정해야겠다!!!
'Vue > 쇼핑몰 검색 페이지 구현' 카테고리의 다른 글
| 쇼핑몰 검색 페이지 구현_Vue.js_2 (0) | 2023.01.23 |
|---|---|
| 쇼핑몰 검색 페이지 구현_Vue.js_1 (0) | 2023.01.23 |
| 쇼핑몰 검색 페이지 구현_순수 JS_5 (0) | 2023.01.20 |
| 쇼핑몰 검색 페이지 구현_순수 JS_4 (0) | 2023.01.14 |
| 쇼핑몰 검색 페이지 구현_순수 JS_3 (0) | 2023.01.14 |