[js] mvc 패턴을 연습해보자 -4 최근 검색어(1)

요구사항

● 최근 검색어 이름, 검색일자, 삭제 버튼이 목록 형태로 탭 아래 위치한다 (추천 검색어와 비슷)

● 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면으로 이동한다 (추천 검색어와 같음)

 

HistoryListView.js 파일을 만들고 초기 세팅을 해준다.

그런데 가만보니, KeywordListView와 굉장히 유사한 방식이기 때문에,

 

export default class HistoryListView extends KeywordListView {

constructor() {

super(qs("#history-list-view"), new Template());

}

}

extends View가 아닌 extends KeywordListView로 해준다.

 

그러나 KeywordListView.js 에서는 

qs("#keyword-list-view")

&

this.template = new Template()

이렇게 하드코딩 되어있기 때문에,

 

KeywordListView.js 에서 constructor부분을 밑 코드처럼 바꾸어 준다.

 

export default class KeywordListView extends View {

constructor(element = qs("#keyword-list-view"), template = new Template()) {

super(element);

this.template = template;

this.bindEvent();

}

 

그 후 HistoryListView.js 에서도 받아준다.

export default class HistoryListView extends KeywordListView {

constructor() {

super(qs("#history-list-view"), new Template());

}

}

사실 여기 부분 이해가 잘 가지 않는다ㅠㅠ

 

 

그 후 템플릿 클래스를 KeywordListView와 비슷한 로직으로 생성해준다.

 

class Template {

getEmptyMessage() {

return `<div class="empty-box">검색 이력이 없습니다.</div>`

}

getList(data=[]) {

return `

<ul class="list">

${data.map(this._getItem).join("")}

</ul>

`

}

_getItem({id, keyword, date}) {

return `

<li data-keyword="${keyword}">

${keyword}

<span class="date">${formatRelativeDate(date)}</span>

<button class="btn-remove"></button>

</li>

`

}

}

 

formatRelativeDate(date)

 

이 부분은 강의에서 제공해주는 헬퍼함수이다.

쉽게 말하자면 몇분 전, 몇초 전 등을 표현하는 함수이다.

 

다음은 이 것들을 화면에 그려주는 Controller.js 파일의 render함수로 가보자

render() {

if (this.store.searchKeyword.length > 0) {

return this.renderSearchResult();

}

this.tabView.show(this.store.selectedTab);

if(this.store.selectedTab === TabType.KEYWORD) {

this.keywordListView.show(this.store.getKeywordList());

this.historyListView.hide();

} else if (this.store.selectedTab === TabType.HISTORY) {

this.keywordListView.hide();

this.historyListView.show(this.store.getHistoryList());

} else {

throw "사용할 수 없는 탭입니다.";

}

this.searchResultView.hide();

}

renderSearchResult() {

this.SearchFormView.show(this.store.searchKeyword);

this.tabView.hide();

this.keywordListView.hide();

this.historyListView.hide();

this.searchResultView.show(this.store.searchResult);

}

}

 

historyListView와 관련된 것들을 추가시켜주었다.

 

이렇게 하면

 

● 최근 검색어 이름, 검색일자, 삭제 버튼이 목록 형태로 탭 아래 위치한다 (추천 검색어와 비슷)

● 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면으로 이동한다 (추천 검색어와 같음)

 

두 가지 요구사항 한 번에 완료!

 

 

 

-참고 인프런 김정환 "만들고 비교하며 학습하는 리액트"