[VanillaJS] 추천 검색어(KeywordView) 생성하기

View

5번줄 : View의 속성을 받아 KeywordView라는 객체 생성

7번줄 : <div id = search-keyword>값을 엘리멘트로 받음(왜냐면 메인 컨트롤러에서 불러와야 하기 때문임) 위와 같은 방식을 통해 메인 컨트롤러와 FormView 두 곳에서 객체로써 엘리먼트를 가져올 수 있음

15. render 함수를 만듬(render는 화면에 나타내는 것을 의미)

여기서 함수 파라미터로 data=[]는 MainController를 통해 KeywordModel에서 가져오는 것임

16. 렌더를 통해서 가져올 것이 무엇인지 물어보는것

data.length에 Ture false여부에 따라 HTML태그를 가져올 지, 혹은 메세지를 가져올지 결정함

17 .bindClickEvent는 이름과 같이 클릭이벤트를 위한 것 다만 bind인 것은 render가 일어날 타이밍에 묶여서 이러한 속성을 함께 묶어 표현하기 위함. 

1) 만약 22번줄의 함수에 추가한다면 메시지가 나오지 않는다면 클릭이벤트가 발생하지 않고,

2) 만약  setup()과 같은 함수에 넣는다면 나중에 의미적으로 흐려질 수 있음

18.show() - 만약 ResultView(결과창)을 열어 보거나HistoryView(최근 검색어)로 넘어가게 된다면,

추천 검색어는 hide()되어야 한다. 그리고 render시에 다시 show되어야 하므로 show()함수를 넣었다.

hide()는 창이 변할 때, 실행 될 것이다

19.return this는 HistoryView에 RemoveBtn과 연관이 있는 거 같다...

22. getKeywordHtml -> 말 그대로 Keyword의 Html을 get하기 위함이다.

HTML코드를 출력하기 위해서 data.reduce를 사용했는데

여기서 

data는 KeywordModel의 data [Array]이다.

reduce = 자바스크립트 Array메소드이며 주로 행렬의 모든 문자열을 다룰 때 사용한다.

(reduce에 관해서는 reduce포스팅을 참조하길 바란다.)

29번째 함수를 벗어난 , <'ul...>은 reduce의 초기값을 나타는데 이 결과로 '<ul class="....> html(Variable) + </ul> 가 된다.

32. KeywordView.bindClickEvent는 모든 li엘리먼트에 클릭 이벤트를 걸어주기 위함이다.

33. querySelectorAll로 얻은 엘리먼트 유사행렬이다. 그렇기에 foreach문과 같은 반복문을 사용할 수 없고

이로 인하여 Array.from을 통해서 행렬형식으로 만들어 주었다.

그리고 foreach문을 이용하여 모든 li태그에 이벤트를 삽입해주었다.

38. onClickKeyword는 클릭 이벤트가 발생 시에 MainController가 컨트롤 할 수 있게 만든 것이다.

39는 Keyword라는 변수를 문자열이 아닌 객체로 만들기 위해 {Keyword}와 같이 사용하였고

거기에 담기는 것은 e. currentTarget.dataset

e = click  // currentTarget = li태그 // dataset = li의 data-Keyword이다.

42.새로운 이벤트를 만든다. 파라미터는 각각 이벤트의 이름과 , 보낼 데이터

emit(event, data) {

const evt = new CustomEvent(event, { detail: data })

this.el.dispatchEvent(evt)

View.js의 emit

CustomEvent는 새로운 이벤트를 만드는 것이고

dispatchEvent는 모르겠다.

Controller

export default{

init(){

KeywordView.setup(document.querySelector('#search-keyword'))

KeywordView.on('@click', e=>this.onClickKeyword(e.detail.keyword))

//여기서 onClickKeyword는 view의 onClickKeyword와 다르다.

 

KeywordView를 셋팅하는 내용

fetchSearchKeyword() {

KeywordModel.list().then(data => {

KeywordView.render(data)

})

},

KeywordModel의 데이터들을 가져오는 것

list()함수의 Promise를 이용하여 then으로 가져왔고

가져온 데이터를 가져와 

KeywordView의 render를 실행했다.

Controller의 역할 수행 톡톡톡

renderView() {

console.log(tag, 'rednerView()')

TabView.setActiveTab(this.selectedTab)

if (this.selectedTab === '추천 검색어') {

this.fetchSearchKeyword()

HistoryView.hide()

}

fetchSearchKeyword( )를 조건에 따라 실행시킨다.

Model

export default {

data: [

{keyword: '이탈리아'},

{keyword: '세프의요리'},

{keyword: '제철'},

{keyword: '홈파티'}

],

list() {

return new Promise(res => {

setTimeout(() => {

res(this.data);console.log(this)

}, 200)

})

}

}

list()함수를 만들고 Promise를 이용하여서 data를 보낸다.