자바스크립트 기반의 Vercel 애플리케이션을 위한 검색 기능 구현하기

10 Nov 2023

vercel

Vercel은 서버리스 웹 애플리케이션을 배포하고 호스팅하기 위한 플랫폼으로 인기가 있습니다. 이 튜토리얼에서는 Vercel 애플리케이션에 검색 기능을 추가하는 방법을 살펴보겠습니다.

1. 검색 API 생성하기

검색 기능을 구현하려면 먼저 검색 API를 생성해야 합니다. 많은 선택 사항 중에서 Algolia 같은 외부 서비스를 사용하는 것을 추천합니다. Algolia는 사용하기 쉽고 강력한 검색 기능을 제공하여 개발자들이 쉽게 검색 기능을 구현할 수 있도록 도와줍니다.

Algolia에 계정을 만들고 데이터 색인화(indexing)를 설정한 후, 애플리케이션 내 검색 기능을 사용할 수 있는 API 키를 받아야 합니다.

2. 클라이언트 측 검색 기능 구현하기

Vercel 애플리케이션에서 검색 기능을 구현하기 위해 자바스크립트 코드를 작성해야 합니다. 이 코드는 클라이언트 측에서 실행되며, 사용자가 검색어를 입력하면 검색 결과를 가져옵니다.

// 검색 API 설정
const searchClient = algoliasearch('YourAppID', 'YourAPIKey');

// 검색 위젯 초기화
const search = instantsearch({
  indexName: 'YourIndexName',
  searchClient,
});

// 검색 입력 필드 추가
search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-box',
  })
);

// 검색 결과 표시
search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: `
        <div>
          <h3>{{name}}</h3>
          <p>{{description}}</p>
        </div>
      `,
    },
  })
);

// 검색 위젯 렌더링
search.start();

위 코드에서는 Algolia에서 제공하는 instantsearch.js 라이브러리를 사용하여 검색 기능을 구현합니다. searchClient 객체를 Algolia의 API 키로 초기화한 다음, 검색 입력 필드와 검색 결과를 표시할 요소를 추가합니다. 검색 결과는 item 템플릿에 정의된 형식으로 표시됩니다.

3. Vercel에 검색 기능 추가하기

검색 기능을 구현한 후, 해당 기능을 Vercel 애플리케이션에 추가해야 합니다. 다음 단계를 따라 Vercel에 검색 기능을 추가하세요.

Vercel 대시보드로 이동하여 해당 애플리케이션을 선택합니다.
“환경 변수” 탭으로 이동하고 새로운 환경 변수를 생성합니다. 예를 들어 ALGOLIA_APP_ID와 ALGOLIA_API_KEY 환경 변수를 생성할 수 있습니다. Algolia에서 받은 값을 해당 변수에 입력합니다.
Vercel 애플리케이션에 Search 페이지를 생성합니다. 이 페이지에서 검색 기능을 사용할 수 있습니다.
Search 페이지에 작성한 자바스크립트 코드를 추가합니다. 애플리케이션의 필요한 위치에 <script> 태그를 이용하여 코드를 추가하세요.
Vercel에 변경 사항을 배포하고 검색 기능이 정상적으로 작동하는지 확인하세요.

이제 Vercel 애플리케이션에 검색 기능이 추가되었습니다. 사용자는 검색어를 입력하여 원하는 결과를 쉽게 찾을 수 있습니다.

결론

Vercel 애플리케이션에 검색 기능을 구현하는 방법을 알아보았습니다. Algolia와 instantsearch.js를 사용하여 검색 API를 생성하고, 클라이언트 측에서 검색 기능을 구현했습니다. 이를 Vercel 애플리케이션에 추가하여 웹사이트나 애플리케이션에 검색 기능을 제공할 수 있습니다.

#javascript #Vercel