[javascript] 비동기 데이터 요청을 이용한 실시간 검색 기능 구현

11 Dec 2023

javascript

사용자 경험이 중요시되는 웹 애플리케이션에서 실시간 검색 기능은 매우 중요합니다. 사용자가 검색어를 입력하는 동안 자동으로 검색 결과를 보여주는 기능은 사용자 경험을 크게 향상시킬 수 있습니다. 이러한 기능을 구현하기 위해서는 비동기 데이터 요청을 활용하여 실시간으로 서버와 통신해야 합니다.

필요한 기술

HTML/CSS: 검색 입력 필드와 검색 결과를 보여줄 UI를 구현합니다.
JavaScript: 사용자가 입력하는 동안 이벤트를 감지하여 서버에 데이터를 요청하고, 그에 따른 결과를 UI에 표시합니다.
서버 사이드 코드: 검색어에 따른 결과를 제공해 줄 API나 서버 사이드 코드가 필요합니다.

구현 방법

1. HTML/CSS 작성

먼저, 검색 입력 필드와 검색 결과를 보여줄 UI를 작성합니다.

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

2. JavaScript를 이용한 비동기 요청

사용자가 입력할 때마다 JavaScript를 사용하여 서버에 데이터를 요청하고, 그 결과를 UI에 표시합니다.

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

searchInput.addEventListener('input', function() {
  const keyword = searchInput.value;
  fetch(`/search?keyword=${keyword}`)
    .then(response => response.json())
    .then(data => {
      // 검색 결과를 UI에 표시
      searchResults.innerHTML = data.map(result => `<div>${result.title}</div>`).join('');
    });
});

3. 서버 사이드 코드 작성

서버 측에서는 클라이언트의 검색어에 따른 결과를 제공해 줄 API나 서버 사이드 코드를 작성합니다.

app.get('/search', (req, res) => {
  const keyword = req.query.keyword;
  // 검색어에 따른 결과를 데이터베이스에서 가져와서 클라이언트에 응답
  const results = searchFromDatabase(keyword);
  res.json(results);
});

결론

이러한 방법을 통해 사용자가 검색어를 입력하는 동안 실시간으로 검색 결과를 보여주는 실시간 검색 기능을 구현할 수 있습니다. 이를 통해 사용자의 편의성을 높일 수 있을 뿐만 아니라, 사용자들이 더 나은 검색 경험을 할 수 있게 됩니다.

참고 자료: