[VanillaJS] 최근 검색어(HistoryView) 생성하기

View

18번째 줄 : bindRemoveBtn은 버튼에 이벤트를 달아주기 위함이다. (Click, onRemove())

21. e.stopPropagation : 상위에 이벤트를 전파하는 것을 방지하는 것

button이 아닌 li태그에 이벤트가 전파되는것을 방지하기 위해 사용 했다.

23. onRemove(btn.parentElement.dataset.keyword)

onRemove는 MainController에 데이터를 보내기 위해 만들어 진것

파라미터 값은 btn의 부모태그인 li태그의 데이터셋

`<li data-keyword="${item.keyword}">

28. onRemove : 파라미터값은 histroy의 keyword(검색기록)

Controller

init(){

HistoryView.setup(document.querySelector('#search-history'))

HistoryView.on('@remove', e=>this.onRemoveHistory(e.detail.keyword))

},

onRemoveHistory(keyword){

HistoryModel.remove(keyword)

this.renderView()

},

renderView() {

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

TabView.setActiveTab(this.selectedTab)

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

this.fetchSearchKeyword()

HistoryView.hide()

}

else {

this.fetchSearchHistoryword()

KeywordView.hide()

},

fetchSearchHistoryword(){

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

HistoryView.render(data).bindRemoveBtn()

})

},

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

onClickKeyword(keyword) {

this.search(keyword)

},

search(query){

FormView.setValue(query)

HistoryModel.add(query)

},

1.init() : setup을 통해 HistoryView객체에 태그 저장

on을 통해 @remove이벤트(View)와 연결

@remove 발생시 @remove의 detail.keyword에 저장된 데이터(HistoryView.js → View.js)

를 파라미터로 onRemoveHistory를 실행

2.onRemoveHistory는 그 데이터를

HistoryModel의 remove 메소드를 이용시킨 후

remove(keyword) {

this.data = this.data.filter(item => item.keyword !== keyword)

}

변화가 있었기에 renderView를 불러와서 리로드 시킴

3. renderView는 이제 selectedTab의 값에 따라서

fetchSearchKeyword와

fetchSearchHistory 중 하나를 실행한다.

4. fetchSearchHistory : 이제 History를 패치한다.

list()를 불러와서 데이터를 훏고

그 데이터들은 HistoryView을 render해주고 render값에 bindRemoveBtn()으로 이벤트를 달아준다.

5.Keyword를 클릭했을 때, HistoryModel의 데이터 항목을 추가 하려고 하기 때문에 이벤트를 달아준다.

6.onClickKeyword는 키워드를 클릭시 발생

7.search는 

FormView.setValue(query) - input태그의 value값을 keyword로 바꾸어 줌

HistoryModel.add(query)는 HistoryModel에 데이터를 추가함

add(keyword = '') {

keyword = keyword.trim()

if (!keyword) return

if (this.data.some(item => item.keyword === keyword)) {

this.remove(keyword)

}

Model

export default {

data: [

{ keyword: '검색기록2', date: '12.03' },

{ keyword: '검색기록1', date: '12.02'},

{ keyword: '검색기록0', date: '12.01' },

],//컬렉션 형식

list() {

return Promise.resolve(this.data)

},//위 데이터를 리턴하는 것

add(keyword = '') {

keyword = keyword.trim()

if (!keyword) return

if (this.data.some(item => item.keyword === keyword)) {

this.remove(keyword)

}

const date = '12.31'

this.data = [{keyword, date}, ...this.data]

},

remove(keyword) {

this.data = this.data.filter(item => item.keyword !== keyword)

}