Promise를 활용한 자동완성 기능 개발

13 Sep 2023

Promise

소개

자동완성 기능은 사용자가 입력한 검색어에 대한 추천 결과를 제공하여 사용자 경험을 향상시키는 데 도움이 됩니다. 이 기능을 개발하기 위해 Promise를 활용하는 방법에 대해 알아보겠습니다.

개발 환경 설정

먼저, 자동완성 기능을 개발하기 위해 필요한 환경을 설정해야 합니다. 이를 위해서는 다음과 같은 도구들이 필요합니다:

HTML와 CSS: 자동완성 기능을 표현하기 위한 UI 요소를 구현하기 위해 필요합니다.
JavaScript: 검색어를 처리하고, 추천 결과를 가져오는 등의 기본적인 기능을 개발하기 위해 필요합니다.

Promise를 활용한 자동완성 기능 구현

사용자가 검색어를 입력할 때마다, keyup 이벤트를 감지하여 콜백 함수를 호출합니다.

const searchInput = document.querySelector('#search-input');
searchInput.addEventListener('keyup', onKeyUp);

콜백 함수에서는 입력된 검색어를 가지고 서버에 AJAX 요청을 보냅니다.

function onKeyUp() {
  const keyword = searchInput.value;
  fetch(`/api/suggestions?keyword=${keyword}`)
    .then(response => response.json())
    .then(data => {
      // 추천 결과를 처리하는 로직을 작성합니다.
    });
}

서버에서 받아온 추천 결과를 처리하기 위해, Promise를 활용합니다. 이를 위해 fetch 함수를 사용하여 AJAX 요청을 보내고, then 메서드를 이용해 비동기 처리 결과를 받아옵니다.

비동기 처리 결과를 받아온 후, UI에 추천 결과를 표시합니다.

function onKeyUp() {
  const keyword = searchInput.value;
  fetch(`/api/suggestions?keyword=${keyword}`)
    .then(response => response.json())
    .then(data => {
      showSuggestions(data.suggestions);
    });
}

function showSuggestions(suggestions) {
  const suggestionList = document.querySelector('#suggestion-list');
  suggestionList.innerHTML = ''; // 이전 추천 결과를 제거

  suggestions.forEach(suggestion => {
    const listItem = document.createElement('li');
    listItem.textContent = suggestion;
    suggestionList.appendChild(listItem);
  });
}

마무리

위의 방법을 활용하여 자동완성 기능을 개발할 수 있습니다. Promise를 사용하여 비동기 처리를 효과적으로 관리하고, 검색어에 따라 추천 결과를 동적으로 업데이트할 수 있습니다. 이를 통해 사용자에게 편리한 검색 기능을 제공할 수 있습니다.

#programming #javascript #promise #자동완성