[Vanila js] 키워드 검색 구현하기

Result

---

View

export default class KeywordListView extends View {

    constructor() {
        super(qs('#keyword-list-view'));
        this.template = new Template();

        this.bindEvents();
    }

    show(data = []) {
    }

    bindEvents() {
    }

    handleClick(event) {
    }

}

 

앞선 기능들과 마찬가지로 keyword-list-view에 적용할 interface다.

Result를 보면 키워드를 클릭하는 이벤트가 발생하니까 이벤트를 바인딩해주는 것이 필요하고

keyword 목록들을 보여주어야 하므로 show() 메서드가 구현될 것이다.

---

Controller

export default class Controller {

  constructor(store, {searchFormView, searchResultView, tabView, keywordListView}) {
    this.store = store;
    
    this.searchFormView = searchFormView;
    this.searchResultView = searchResultView;
    this.tabView = tabView;
    this.keywordListView = keywordListView;

    this.subscribeViewEvents();
    this.render();
  }
  
}

 

앞선 포스트에서도 줄줄이 설명했듯이 당연히 View는 Controller에 의존되므로 keywordListView의 의존성이 추가됐다.

추가로 usbscribeViewEvents에서 클릭 이벤트가 처리될 것이고 render에는 keyword list를 렌더링하는 작업이 추가될 것으로 예상이 될 것이다.

---

Model

export default class Store {
  constructor(storage) {
    if (!storage) throw "no storage";

    this.storage = storage;
    this.searchResult = [];
    this.searchKeyword = "";
    this.selectedTab = TabType.KEYWORD;
  }
  
  getKeywordList() {} // 추가된 기능
  
}

 

Store 객체는 Persistence Layer와 밀접하므로 데이터 정보를 들고 있다.

그래서 추천 검색어나 최신 검색어에 대한 정보가 저장된 storage는 Store에 의존되고 있다.

(첫 게시글부터 이런 템플릿을 맞추어서 작성했다면.. storage에 대한 설명을 충분히 했을텐데 안타깝다.)

 

const storage = {
  keywordData: [],
  historyData: [],
  productData: []
}

 

강사님 git이나 강의를 들으면 알 수 있겠지만, storage는 이런식으로 사용될 정보가 정적 데이터로 저장되어있다.

 

아, 그래서 이번 기능 구현에서는 추천 검색어에 대한 keyword들을 가져오기 위해 model 에서 storage에 접근해 keyword를 가져와야한다.

---

Quest

Q. keyword 클릭 시 검색 결과 불러오기

// View
show(keyword) {
    this.inputElement.value = keyword;
    this.showResetButton(true);
}
    
// Controller
this.keywordListView
.on("@click", (event) => {
  const keyword = event.detail.value;
  this.searchFormView.show(keyword);
  this.search(keyword);
});

 

나는 키워드를 클릭할 경우, View에서 텍스트 창에 글을 추가하고 reset button을 만들어주도록 했다.

근데 조금 멍청했다. 작업은 아래와 같이 수행이 되어야 한다.

1. 사용자는 Keyword List View에서 검색을 했다.

2. Controller로 처리를 해주어야 한다.

3. 검색한 키워드가 Store에 저장이 되었다.

4. 저장이 된 내용물을 View에 반영한다.

근데 내가 작성한 로직은 3번을 고려못한 것이 아쉬웠다. 이전에 작성한 search 메소드에서 Store 객체에 searchKeyword로 keyword 값을 전달하는데.. 이것을 이용해서 render 할 때, 추가하는 것이 더 깔끔해보였다.

 

물론, 내 코드도 동작하지만 비슷한 기능들의 통합성이라고 해야할까.. 강의가 너무 괜찮다.

  renderSearchResult() {
    this.searchFormView.show(this.store.searchKeyword);
    this.tabView.hide();
    this.keywordListView.hide();
    this.searchResultView.show(this.store.searchResult);
  }

.검색결과를 렌더링 하는 메소드의 응집도가 정말 좋다.