Promise를 사용한 검색 기능 개발

13 Sep 2023

Promise

검색 기능은 대부분의 웹 애플리케이션에서 핵심적인 기능 중 하나입니다. 사용자는 특정 내용을 검색하여 원하는 결과를 빠르게 찾기를 기대합니다. 이를 실현하기 위해 프론트엔드에서 Promise를 사용하여 비동기적으로 데이터를 검색하는 방법을 알아보겠습니다.

1. 검색어 입력 이벤트 처리하기

먼저, 사용자가 검색어를 입력하는 이벤트를 처리하는 코드를 작성합니다. 이벤트 핸들러에서 Promise 객체를 사용하여 검색 결과를 얻게 됩니다.

const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const searchResults = document.getElementById('search-results');

searchButton.addEventListener('click', () => {
  const searchTerm = searchInput.value;
  searchResults.innerHTML = ''; // 검색 결과를 초기화

  if (searchTerm) {
    performSearch(searchTerm)
      .then(displayResults)
      .catch((error) => console.error(error));
  }
});

위의 코드에서 performSearch() 함수는 검색어를 기반으로 데이터를 검색하는 Promise를 반환합니다. displayResults() 함수는 검색 결과를 형식화하여 화면에 표시합니다.

2. 검색 결과를 받아오는 Promise 구현하기

다음으로, performSearch() 함수를 구현하여 검색 결과를 받아오는 Promise를 반환하는 코드를 작성합니다. 이 예시에서는 간단한 검색 서비스를 가정하여 사용자가 입력한 검색어와 일치하는 결과를 반환합니다.

function performSearch(searchTerm) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const searchResults = ['검색 결과 1', '검색 결과 2', '검색 결과 3']; // 가상의 검색 결과

      const filteredResults = searchResults.filter((result) =>
        result.includes(searchTerm)
      );

      if (filteredResults.length > 0) {
        resolve(filteredResults);
      } else {
        reject('검색 결과를 찾을 수 없습니다.');
      }
    }, 1000); // 가상의 검색 지연 시간
  });
}

위의 예시에서는 Promise 생성자를 이용하여 비동기 작업을 구현했습니다. 일부 예시 결과를 받아온 후, 입력한 검색어와 일치하는 결과만 필터링하여 해결(resolve)하거나, 일치하는 결과가 없다면 거절(reject)하는 방식으로 처리합니다.

3. 검색 결과를 화면에 표시하는 함수 구현하기

마지막으로, displayResults() 함수를 구현하여 검색 결과를 화면에 표시하는 코드를 작성합니다.

function displayResults(results) {
  results.forEach((result) => {
    const resultItem = document.createElement('li');
    resultItem.textContent = result;
    searchResults.appendChild(resultItem);
  });
}

위의 예시에서는 검색 결과를 <ul> 요소의 자식 요소로 동적으로 추가하는 방식으로 결과를 화면에 표시합니다.

이제 검색 기능 개발을 위해 Promise를 사용하는 방법에 대해 알게 되었습니다. 이를 활용하여 애플리케이션에 맞는 검색 기능을 구현해보세요!

#Javascript #Promise #비동기 #검색