쇼핑몰 검색 페이지 구현_순수 JS_5

4. 추천 검색어 구현_1

: 번호, 추천 검색어 목록이 탭 아래 위치!

 

검색어 목록을 만들기 전에

 tabs 클래스 부분을 div에서 ul로 바꾸어 추천 검색어와 최근 검색어 탭이 아래처럼 가로로 나오게 해주었다.

 

 

자 이제 검색어 목록을 만들기 위해

search-keyword를 id로 가지고 있는 div를 만들어주었다.

실제 데이터는 서버에서 가지고 오고 그 데이터를 기반으로 dom을 만들기 때문에 하나만 만들었다!!

오호라...

 

 

 

 

새롭게 KeywordView.js 파일을 생성하고 이전과 마찬가지로 기본 작업을 해주었다!

 

마찬가지로 데이터를 받아서 화면에 띄워줄 render 함수가 필요하기 때문에

요로코롬...

 

인자로 data를 받고 element의 innerHTML에 data를 넣는데 data가 있을 경우와 없을 경우는 나눈다!!

있을 경우에는 getKeywordsHtml 함수를 호출하고 아닐 경우는 '추천 검색어가 없습니다'를 출력하기!

 

그리고 getKeywordsHtml 함수에서는 우선 debugger를 걸어두었다.

 

좌좌... 그리고 Maincontroller 에서 KeywordView를 import하고 init 함수에서 setup까지!! 연결을 해주었다~~

 

 

이제 모든 render를 보여주기로 했던 Maincontroller의 renderView함수에서 Keywordview도 구현을 해주면 된다!

 

maincontroller에서는 selectedTab을 가지고 있는데 추천 검색어가 초기 값이었다!

이제 이 selectedTab이 무엇이냐에 따라서 추천 / 최근 검색어를 출력해주면 되겠지!!!

 

그래서 저렇게 render함수를 써주면 데이터가 없기 때문에 '추천 검색어가 없습니다'가 출력된다.

 

 

따라서 추천 검색어를 model에서 가져와야 하는데 미리 KeywordModel.js가 만들어져있다!!!!

이렇게ㅎㅎ

 

따라서 이  KeywordModel의 list함수를 통해 data를 가져오자!!

 

 

Maincontroller에서 KeywordModel을 import하고 if 부분을 이렇게 바꾸어줬는데

이 전에서 언급한 것처럼 list 함수는 프로미스를 반환하니까 then 함수를 사용!! 여기에 render를 작성해서 data를 넘겨주었다.

 

 

호호호... 그리고 debugger를 걸어두었던 getKeywordHtml 함수를 마저 작성해주면...

 

이렇게!!

 

우선 인자로 받아온 data의 html을 reduce 함수를 통해 리턴한다!\

초기 값은 ul 태그이고, 닫는 ul도 써준다..! 그리고 ul 태그에는 css에 정의해놓은 list 클래스를 써준다..!

그리고 html을 += 하면서 누적하는데 li 태그를 이용해서 만들어 낸다..!

우선 number를 출력해야 하기 때문에 인자로 index도 받아오고 0부터 시작하니까 나는 1부터 출력하기 위해 index+1로!!

그리고 item의 keyword name을 출력할 것이다.

여기서 keyword를 쓸 수 있는 이유는 KeywordModel에서 data가 keyword를 키로 가지고 있는 객체 배열을 만들어 놨었기 때문이다!!!!!!!

 

html을 마지막으로 return 해주고 결과를 확인하면..

 

이렇게 키워드가 나오는 것을 확인할 수 있다!!!!

 

 

 

여기서 추가적으로 Maincontroller 에서 renderView 함수를 보면

이렇게 if 문으로 selectedTab이 추천 검색어인 경우에 render함수를 실행하는 코드가 있는데

여기서 이 부분이 뷰를 렌더링(?) 하는 역할한다고 한다... 그래서 따로 빼내온다는데..!?!?

즉,,, 모델에서 데이터를 가져오는 부분을 따로 떼어내서...

 

 

fetchSearchKeyword 함수를 써주고... 해당 내용을 함수 내부에 작성!!

그러면 결과는 동일하다!!

 

 

---

4. 추천 검색어 구현_2

: 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면 이동

 

위에서 만들어 놓은 목록에서 세부 사항을 클릭했을 때 해당 화면으로 이동을 해야 하니까

키워드 뷰를 건들어야겠지!!

 

 

dom이 만들어진 후에 이벤트를 바인딩 해야 하기 때문에

render함수에서 this.bindClickevent 함수를 써주었고

 

 

그 함수는 아래처럼

 

 

이렇게 구현했다.

흠 우선 이전에 쓴 것처럼 Array.from 으로 li에 접근해서 forEach 함수를 통해 각 li에 하나씩 접근을 한다.

그리고 li에 addEventLisener를 통해 click 이벤트를 바인딩 해서 그 click 이벤트가 발생했을 때 onClickKeyword라는 함수를 호출하도록 해주었다.

 

그리고 새롭게 만든 onClickKeyword 함수를 작성해주면 된다.

그런데 여기서 중요한 점!

 

"데이터를 클릭했을 때, 어떤 추천 검색어가 클릭이 되었는지 알아야 한다."

그러려면 이벤트에 데이터를 심어서 보내줘야 한다.

 

그래서..

 

html을 만들어주는 getKeywordHtml 함수에서 20번째 줄의 li 태그를 이렇게 수정했다.

data-keyword 라는 곳에 실제 출력할 item.keyword를 바인딩했다.

 

이제 이 데이터를 가져와서 활용하면 된다!!!!

 

 

이렇게 onClickKeyword 함수를 마저 작성해주었는데

우선 {keyword}를 추출해왔다.

여기서 e.currentTarget은 이벤트가 부착된 부모의 위치를 반환한다.

+)추가적으로 e.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다.

 

+) 또한 위에서 data-keyword를 사용했는데 이건 무엇이냐 하면....

데이터셋 속성은 data-속성명="속성값" 으로 1개의 데이터셋 속성을 정의한다.

DOM 속성으로 변환될 때 "data-" 는 제외하고 "속성명"만 셀제 속성 이름으로 사용된다고 한다.

그래서 자바스크립트는 DOM 생성 시점에 "data-" 로 시작하는 속성들을 하나로 모아 "dataset" 맵(Map)으로 따로 모아서 관리한다.

 

그래서.... 추출해온 keyword를 e.currentTarget.dataset으로 받고 클릭한 이후의 검색 결과 페이지는 KeywordView의 역할이 아니라 역시 Mainconrtoller에게 넘겨줘야 하기 때문에 emit으로 클릭한 keyword를 넘겨주기!!!

 

 

 

이제 이 이벤트를 Maincontroller에서 수신하고 있어야 한다.

이렇게 Maincontroller의 KeywordView의 setup함수에서 함수 체인으로 이벤트를 수신한다...!

 

 

역시나 onClickKeyword 함수는 디버거를 걸어놓았다.

 

 

 

그리고 확인해보면

 

이탈리아를 클릭한 경우 디버거에 걸리고 keyword는 이탈리아로 잘 나오는 것을 확인할 수 있다.

 

이제 Maincontroller의 onClickKeyword 함수를 구현해보자~~~

 

 

onClickKeyword 함수에서는 실제 검색을 해야하기 때문에 이미 구현했던 search 함수를 부르면 된다!!

이렇게 search 함수에 keyword를 넘겨주면 된다.

 

 

그러면 키워드에 해당하는 그림과 글이 나타나야 하는데 오류도 뜨지 않고 아무런 그림도 나타나지 않는다ㅠㅠ...

콘솔 창에서 render가 실행되며 그림과 글이 나타나는 걸로 뜨는데....

 

 

 

결국 문제는

여기서 else 부분에 hide가 들어가 있지 않고 나와있어서 그랬던 것.... 흑...

그래서 if로 selectedTab이 추천 검색어로 들어가 지금까지 구현한 코드가 실행이 되었어도

if else 문 밖으로 나와서 결국 hide를 하기 때문에 아무 것도 뜨지 않았다... 뭐 이거지... 바보멍청이...

 

 

그래서 else 문에 hide 를 넣고 다시 실행하면

 

 

ㅋㅋㅋ이렇게 잘 나온다.. 명수옹은 하도 그림이 안 나오길래 열 받아서 그림에 문제가 있는 줄 알고 이것 저거 바꾸다가 이렇게 되어버렸다ㅎㅋㅋㅎㅋ

 

 

자 이게 여기서 Tabview와 추천검색어가 한 번에 나오기 때문에 조금 더 깔끔하게 화면을 처리하기 위해서

 

이렇게 ResultView를 render 하기 전에 TabView와 KeywordView를 hide로 숨김 처리를 먼저 해주면

이렇게 키워드를 선택했을 때 ResultView만 보이도록 해줄 수 있다!!

 

 

 

---

4. 추천 검색어 구현_3

: 검색폼에 선택된 추천 검색어 설정하기

 

 

즉, 위에서 키워드를 클릭하면 해당 결과 창으로 이동은 하지만 검색창에 해당하는 키워드가 적혀있진 않다.

키워드를 클릭하면  search 함수를 실행했기 때문에 Maincontroller의 search 함수에서 검색폼을 건들여야 하므로

 

 

이렇게 search함수에서 FormView에 setValue함수에다가 query를 넘겨준다.

 

이제 FormView에서 setValue 함수를 구현해주면 되겠지?!

 

짜잔... 이렇게 인자로 value를 받고 inputEl의 value를 인자로 받은 그 value로 해주면

 

 

이렇게 키워드를 누르면 검색 폼에 해당 키워드가 함께 출력되는 것을 확인할 수 있다.

 

 

 

이제 추가적으로 검색 폼에 x 버튼도 함께 나오도록 해줄 것이다.

x버튼이 나오는 것은 FormView에 showResetBtn 함수를 이미 만들어놨다.

 

 

 

그래서 showResetBtn에 true를 넣어주거나 이렇게 this.inputEl.value.length를 넣어주면

 

 

 

이렇게 검색 폼에 x 버튼이 생긴 것을 확인할 수 있고, x 버튼을 클릭하면 기존의 TabView과 KeywordView가 사라진다.

따라서 이를 복구해줘야 한다!!!

 

 

x버튼을 클릭하면 FormView의 onClickReset 함수가 호출되면서 @reset 이벤트가 발생한다. 그러면 Maincontroller의 onRestForm 함수가 호출되기 때문에 여기서 작업을 해줄 것이다!!

 

이곳에는 단순히 ResultView를 숨기는 코드만 작성되어 있기 때문에

 

 

이렇게 renderView를 호출하도록 해주었다.

 

왜냐하면 renderView 함수에는???

이렇게 탭 뷰와 키워드 뷰를 보여주도록 작성해두었기 때문에~~~ 이것만 호출해도 된다는 거쥐!!!

 

그러면 x 버튼을 클릭했을 때 다시 처음 화면처럼 잘 돌아가는 것을 확인할 수 있다!!.....

 

 

인데 여기서 또 문제가...

 

돌아가긴 하는데 그 화면이 안 사라짐...ㅋㅋㅋ아ㅠㅠㅠ

그래서 else 문 밖에 hide 함수를 작성하면 키워드로 들어갔을 때 안 보이고ㅠㅠㅠ

나 돌아버려......

 

 

일단 여기까지 해서 추천 검색어 구현 끝내고 최근 검색어부터 해봐야겠따ㅠㅠㅠㅠㅠ......