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

2. 검색결과 구현_1

: 검색 결과를 검색 폼 아래 위치시키기.

 

 

 

검색  폼 아래 검색 결과를 위치시켜야 하는데 이는 동적인 작업이기 때문에 우선 content class에 search-result를 id로 만들어준다.

 

 

그리고 새롭게 ResultView.js를 만들어주었고..  FormView와 동일하게 view를 복사하고 setup함수를 써줌!!

역시나 view의 init을 이용해서 element를 속성으로 가지고 있게끔!

 

  

이제 Maincontroller에서 ResultView를 import 해서 가져오고

init 함수에서 ResultView를 setup했다.. id 값은 html에서 작성한 search-result로!

 

 

 

 

이렇게만 하면 아무 것도 그려지는 것이 없기 때문에... 이제 render함수를 사용할 것이다.

서버에서 받아온 검색 결과 data를 받아서 동적으로 dom을 그려준다.

 

 

 

기본 값으로는 빈 배열의 data를 받고 우선 log를 찍어놨다.

element의 innnerHTML을 통해서 만들 것인데... 우선 두 가지 경우! 데이터가 있을 경우(배열의 길이가 있는 경우)에는 getSearchResultHtml함수를 통해서 결과를 그릴 것이고 데이터가 없을 경우에는 문자열을 출력한다.

 

+) innerHTML이란 element의 속성으로 html의 내용을 변경하고 싶은 경우 사용한다.

 

getSearchResultHtml 함수는 data를 인자로 받고 우선 debugger를 걸어서 멈춰두었당..!!

이럴 수가 있군....

 

그리고 controller에서 사용하기 위해 export해주었다.

 

 

 

Maincontroller로 돌아와서 보면...

 

9번째 줄 submit이 발생했을 때, 즉 enter 키를 눌렀을 때 onSubmit 함수가 실행되고

onSubmit함수에서는 검색 요청을 위해서 23번째 줄의 search를 실행한다.

search함수에서는 실제 api를 통해 데이터를 얻어오고 그 데이터를 받아서 onSearchResult를 실행한다.

그러면.. onSearchResult함수는 데이터를 받아서 ResultView의 render함수를 실행!!

그러면!!! render함수는 검색 결과를 화면에 그려주겠지!!!!!!!!!!!!

 

 

 

검색 api에 연동을 하지 않아서 검색 결과가 없다고 출력됐다.

그리고 순서대로 onSubmit, search, render가 실행된 것을 볼 수 있다.

 

 

 

 

 

 

이제 api와 연동하기 위해 SearchModel을 만들어놨다.

 

SearchModel에 있는 이 list를 가져올 것이다.

 

Maincontroller에서 SearchModel을 import 해주었고

search 함수에서 SearchModel.list를 호출하는데 이때 query(검색어)를 넘겨주고 list는 promise를 반환하기 때문에(?) then함수를 사용할 수 있다.

그리고 onSearchResult에 data를 넘겨주면 끝..!

 

 

+) promise란 무엇인가......

promise는 자바스크립트 비동기 처리에 사용되는 객체다.

비동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 특성'이다. 콜백 함수의 단점을 보완한 것이지!

그래서 promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.

 

일단 기본적으로 이 정도만... 그렇구나ㅎㅎ?

 

 

이렇게 하면 아까 debugger 를 걸어준 곳에 도착!

즉, render를 그릴 때 data의 length 값이 있어서 getSearchResultHtml 함수가 실행되었고 브레이크 포인트가 멈췄다!

 

---

2. 검색결과 구현_2

: 검색 결과를 보이게 하자!

 

 

 

 

우선 data의 길이가 없는 경우(데이터가 없는 경우) 단순히 검색 결과가 없습니다.를 출력하던 방식에서

this.message.NO_RESULT를 써주고 새롭게 메세지를 출력하도록 해주었다.

 

 

 

실제 검색 결과가 나와야 하기 때문에 getSearchResultHtml 함수를 작성할 것이다.

 

 

innerHtml에 들어갈 것이기 때문에 html 문자열만  return 해주면 된당.... 

data는 컬렉션이라 reduce 함수를 사용했는데 reduce 함수란 배열을 순회하면서 모든 요소에 대해 연산을 수행하여 하나의 결과 값을 리턴한다.

초기 값으로는 ul 문자열을 넘겨준다. 끝나면 닫는 ul 태그!!

그리고 html을 계속 만들어 나가면서 li를 만드는 getSearchItemHtml 함수에 item 데이터를 넘겨준다.

 

 

 

getSearchItemHtml 함수는 li로 이루어진 문자열을 반환한다.

검색 결과는 이미지와 텍스트로 이루어지므로 이미지는 item.image , 텍스트는 item.name인데

이렇게 받는 이유는 우리가 Searchmodel에서

 

이 데이터를 받기 때문에 data가 id, name, image로 이루어져 있어서 위와 같이 쓴 것이다!

 

그러면

 

이렇게 검색 결과가 나오는 것을 확인할 수 있따!!!

 

---

2. 검색결과 구현_3

: x 버튼 누르면 검색 결과가 초기화 되고, 검색 결과가 사라진다.

 

x버튼을 누르면 콘솔 창에서 onResetForm 함수가 실행된 것을 확인할 수 있다.

따라서

 

onResetForm 함수에 ResultView.hide를 해주었는데 hide는 사실상 view의 함수이다.

hide 함수는 css의 display 속성을 none으로!!

 

 

그러면 x 버튼을 눌렀을 때, 검색 결과가 초기화 된 것을 확인할 수 있다!

 

 

 

휴.. 이렇게 검색 결과 구현은 끝!! 호호호