자바스크립트 fetch API를 사용한 실시간 검색 기능 구현

10 Sep 2023

javascript

이번 블로그 포스트에서는 자바스크립트의 fetch API를 사용하여 실시간 검색 기능을 구현하는 방법에 대해 알아보겠습니다.

fetch API란?

fetch API는 웹 브라우저에서 AJAX 요청을 보내고 응답을 받는 기능을 제공하는 자바스크립트 API입니다. 이를 이용하면 XMLHttpRequest 객체를 사용하지 않고도 비동기 요청을 처리할 수 있습니다.

실시간 검색 기능 구현하기

HTML 구조 작성하기

<input id="searchInput" type="text" placeholder="검색어를 입력하세요">
<ul id="searchResults"></ul>

자바스크립트 코드 작성하기

const searchInput = document.getElementById('searchInput');
const searchResults = document.getElementById('searchResults');

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value;
  
  // 검색어가 비어있으면 결과를 초기화합니다.
  if (searchTerm === '') {
    searchResults.innerHTML = '';
    return;
  }
  
  // 검색 요청을 보내고 결과를 받아옵니다.
  fetch(`https://api.example.com/search?term=${searchTerm}`)
    .then(response => response.json())
    .then(data => {
      // 결과를 화면에 표시합니다.
      searchResults.innerHTML = '';
      data.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        searchResults.appendChild(li);
      });
    })
    .catch(error => {
      console.error('검색 요청이 실패했습니다.', error);
      searchResults.innerHTML = '';
    });
});

API 요청 주소 변경하기

위 예시 코드에서는 https://api.example.com/search로 요청을 보내고 있습니다. 실제로 사용할 검색 API의 주소로 변경하여 사용하세요.

마치며

이번 포스트에서는 자바스크립트의 fetch API를 사용하여 실시간 검색 기능을 구현하는 방법을 알아보았습니다. fetch API를 사용하면 비동기 요청과 응답을 보다 간편하게 처리할 수 있습니다. 실제로 사용할 API 요청 주소에 맞게 코드를 변경하여 실시간 검색 기능을 구현해보세요.