[Frontend] VanillaJS vs Vue.js (3)

KeywordModel.js

export default {

data: [

{keyword: '이탈리아'},

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

{keyword: '제철'},

{keyword: '홈파티'}

],

list() {

return new Promise(resolve => {

setTimeout(() => {

resolve(this.data)

}, 200)

})

}

}

list()

프로미스를 리턴하고

setTimeout을 이용하여 0.2초 뒤에

this.data를 다른 함수에 파라미터로 전달한다.

MainController.js

fetchSearchKeyword() {

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

KeywordView.render(data)

})

},

fetchSearchKeyword()

selectedTab이 추천검색어일때 키워드를 서치함

KeywordModel.list()를 실행한 후(이 때 this.data를 전달)

이후에 then을 통해서

data를 전달 받고

render()를 통해서 렌더링

HistoryModel.js

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)

}

}

list()

keyWord와 동일

add()

문자열을 받고

keyword의 공백을 제거

null값이 아니면

그리고 그 중

this.data들이 중복되었다면 중복된 keyword는 제거

여튼 최종적으로 data = this.data + 추가된 데이터

SearchModel.js

const data = [

{

id: 1,

name: '[키친르쎌] 홈메이드 칠리소스 포크립 650g',

image: 'https://cdn.bmf.kr/_data/product/H1821/5a4ed4e8a6751cb1cc089535c000f331.jpg'

},

{

id: 2,

name: '[키친르쎌] 이탈리아 파티 세트 3~4인분',

image: 'https://cdn.bmf.kr/_data/product/H503E/300d931e3b8252ed628b6a3c2f56936b.jpg'

}

]

export default {

list() {

return new Promise(res => {

setTimeout(()=> {

res(data)

}, 200);

})

}

}

이하 동일