[javascript] Ember.js에서 사용되는 데이터 검색 기능은 어떻게 구현하나요?

04 Dec 2023

javascript

컴포넌트 내부에서 필터링: 데이터 검색을 구현하는 가장 간단한 방법은 컴포넌트 내부에서 데이터를 필터링하는 것입니다. 이를 위해 filter 메서드를 사용할 수 있습니다. 예를 들어, 다음과 같은 코드로 컴포넌트 내에서 데이터를 검색할 수 있습니다:

import Component from '@ember/component';

export default Component.extend({
  searchTerm: '',

  filteredData: Ember.computed('searchTerm', 'data', function() {
    let searchTerm = this.get('searchTerm').toLowerCase();
    let data = this.get('data');

    return data.filter(item => {
      return item.title.toLowerCase().includes(searchTerm);
    });
  })
});

서비스를 통한 데이터 검색: Ember.js에서는 데이터를 관리하기 위해 서비스를 사용하는 것이 일반적입니다. 서비스를 활용하여 데이터 검색 기능을 구현할 수 있습니다. 예를 들어, 다음과 같이 서비스를 만들고 컴포넌트에서 이를 사용할 수 있습니다:

import Service from '@ember/service';

export default Service.extend({
  searchData(data, searchTerm) {
    let filteredData = data.filter(item => {
      return item.title.toLowerCase().includes(searchTerm.toLowerCase());
    });

    return filteredData;
  }
});

컴포넌트에서는 이 서비스를 주입하여 데이터 검색을 수행할 수 있습니다:

import Component from '@ember/component';
import { inject as service } from '@ember/service';

export default Component.extend({
  searchService: service(),

  searchTerm: '',

  filteredData: Ember.computed('searchTerm', 'data', function() {
    let searchTerm = this.get('searchTerm');
    let data = this.get('data');
    let searchService = this.get('searchService');

    return searchService.searchData(data, searchTerm);
  })
});

애드온 사용: Ember.js에서는 데이터 검색 기능을 간단하게 구현할 수 있는 여러 애드온이 있습니다. 예를 들어, ember-power-select 애드온은 다양한 옵션을 제공하여 복잡한 데이터 검색을 수행할 수 있도록 도와줍니다. 애드온을 사용하여 데이터를 검색하는 방법은 해당 애드온의 문서를 참조하시기 바랍니다.

위의 방법들은 Ember.js의 데이터 검색을 구현하는 일반적인 접근 방법을 보여주기 위한 예시입니다. 실제로는 프로젝트의 특정 요구사항에 따라 다른 방식으로 구현될 수 있습니다. Ember.js의 공식 문서와 추가 리소스를 참고하여 자세한 내용을 파악하시기를 권장합니다.