요즘 웹 애플리케이션에서는 사용자 경험을 향상시키기 위해 검색 자동완성 기능을 많이 사용합니다. 사용자가 검색어를 입력할 때마다 실시간으로 관련된 결과를 보여주는 기능이죠. 이번 기사에서는 터보링크(TurboLinks)를 사용하여 자바스크립트 앱에 검색 자동완성 기능을 추가하는 방법에 대해 알아보겠습니다.

터보링크란?

터보링크는 웹 애플리케이션의 페이지 전환을 더 빠르게 만들어주는 라이브러리입니다. 기존의 전통적인 웹 페이지 전환 방식은 매번 새로운 페이지를 서버로부터 전달받아 렌더링하는 방식이었습니다. 하지만 터보링크를 사용하면 페이지의 특정 부분만 업데이트하여 필요한 부분만 다시 그릴 수 있습니다. 이렇게 함으로써 페이지 전환 속도를 크게 향상시킬 수 있습니다.

검색 자동완성 기능 추가하기

자바스크립트 앱에 검색 자동완성 기능을 추가하기 위해서는 먼저 검색어 입력에 대한 이벤트를 감지해야 합니다. 터보링크는 AJAX 요청을 통해 서버로부터 결과를 가져와 화면에 보여주는 방식을 사용합니다. 이를 위해 검색어 입력 이벤트에 해당하는 자바스크립트 코드를 작성해야 합니다.

document.getElementById('search-input').addEventListener('input', function() {
  var keyword = this.value;
  
  fetch('/search', {
    method: 'POST',
    body: JSON.stringify({ keyword: keyword }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    var resultsContainer = document.getElementById('results-container');
    resultsContainer.innerHTML = '';

    data.results.forEach(function(result) {
      var resultItem = document.createElement('div');
      resultItem.textContent = result;
      resultsContainer.appendChild(resultItem);
    });
  });
});

위의 코드는 검색어 입력 영역에서 input 이벤트를 감지하여 사용자가 입력한 검색어를 서버에 전송하고, 받은 결과를 화면에 출력하는 기능을 구현한 예시입니다.

터보링크와 연동하기

검색 자동완성 기능을 터보링크와 연동하기 위해서는 터보링크 이벤트에 해당하는 자바스크립트 코드를 작성해야 합니다. 터보링크의 visit 이벤트를 활용하여 새로운 페이지로 이동할 때마다 검색 자동완성 기능을 다시 초기화해야 합니다.

document.addEventListener('turbolinks:visit', function() {
  var searchInput = document.getElementById('search-input');
  
  searchInput.value = '';
  searchInput.dispatchEvent(new Event('input'));
});

위의 코드는 새로운 페이지로 이동할 때마다 검색어 입력 값을 초기화하고 검색 자동완성 기능을 다시 호출하는 예시입니다.

마무리

이번 글에서는 터보링크를 사용하여 자바스크립트 앱에 검색 자동완성 기능을 추가하는 방법을 알아보았습니다. 터보링크를 활용하면 페이지 전환 속도와 사용자 경험을 크게 향상시킬 수 있습니다. 검색 자동완성 기능이 필요한 웹 애플리케이션에서는 터보링크를 고려해보는 것이 좋습니다.

#터보링크 #자바스크립트