자바스크립트 웹사이트 맞춤 검색 엔진 개발

10 Sep 2023

javascript

Search Engine

웹사이트에는 많은 양의 정보가 포함되어 있지만, 사용자들은 원하는 정보를 찾는 데 어려움을 겪을 수 있습니다. 이러한 문제를 해결하기 위해 자바스크립트로 맞춤 검색 엔진을 개발하는 방법을 알아보겠습니다.

검색 엔진 개발을 위한 기본 요구사항

검색 엔진을 개발하기 위해서는 몇 가지 기본 요구사항이 있습니다.

웹페이지 콘텐츠를 인덱싱할 수 있어야 합니다.
사용자의 검색어와 관련된 콘텐츠를 검색할 수 있어야 합니다.
검색 결과를 정렬하고 필터링할 수 있어야 합니다.
사용자 경험을 향상시키기 위해 자동완성 등의 기능을 제공해야 합니다.

자바스크립트로 검색 엔진 개발하기

자바스크립트는 웹 개발에 널리 사용되는 언어로, 검색 엔진을 개발하기에 적합한 도구입니다. 다음은 자바스크립트로 검색 엔진을 개발하기 위한 기본적인 단계입니다.

1. 웹페이지 콘텐츠 인덱싱

검색 엔진은 웹페이지의 콘텐츠를 인덱싱하여 검색에 사용할 수 있는 데이터로 변환해야 합니다. 이를 위해 웹크롤러를 개발하여 웹페이지를 스크랩하고 필요한 정보를 추출해야 합니다. 자바스크립트에서는 Puppeteer와 같은 라이브러리를 사용하여 웹크롤링 작업을 수행할 수 있습니다.

const puppeteer = require('puppeteer');

async function scrapeWebpage(url) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);

  // 웹페이지 스크랩 작업 수행

  await browser.close();
}

scrapeWebpage('https://example.com');

2. 검색 기능 구현

검색 엔진은 사용자가 입력한 검색어와 관련된 콘텐츠를 찾아주어야 합니다. 이를 위해 웹페이지 콘텐츠를 색인화하고, 검색어에 따라 적합한 결과를 반환하는 함수를 개발해야 합니다. 자바스크립트에서는 Elasticsearch나 Algolia와 같은 검색 엔진 라이브러리를 사용하여 검색 기능을 구현할 수 있습니다.

const { Client } = require('@elastic/elasticsearch');

const client = new Client({ node: 'http://localhost:9200' });

async function searchContent(query) {
  const { body } = await client.search({
    index: 'webpages',
    body: {
      query: {
        match: {
          content: query,
        },
      },
    },
  });

  return body.hits.hits;
}

searchContent('javascript');

3. 검색 결과 정렬 및 필터링

검색 엔진은 검색 결과를 정렬하고 필터링하는 기능을 제공해야 합니다. 이를 위해 검색 쿼리에 다양한 파라미터를 추가하여 검색 결과를 제어할 수 있습니다. 예를 들어, Elasticsearch에서는 sort, filter 등의 파라미터를 사용하여 검색 결과를 조작할 수 있습니다.

async function searchContent(query, sort, filter) {
  const { body } = await client.search({
    index: 'webpages',
    body: {
      query: {
        match: {
          content: query,
        },
      },
      sort: [{ field: sort, order: 'desc' }],
      filter: {
        term: { category: filter },
      },
    },
  });

  return body.hits.hits;
}

searchContent('javascript', 'date', 'programming');

4. 자동완성 기능 제공

검색 엔진은 사용자 경험을 향상시키기 위해 자동완성 기능을 제공해야 합니다. 이를 위해 검색어를 입력하는 동안 실시간으로 검색어에 맞는 추천 결과를 보여주어야 합니다. 자바스크립트에서는 Typeahead.js나 React Autosuggest와 같은 라이브러리를 사용하여 자동완성 기능을 구현할 수 있습니다.

import Autosuggest from 'react-autosuggest';

const suggestions = ['JavaScript', 'HTML', 'CSS'];

function getSuggestions(value) {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;
  return inputLength === 0 ? [] : suggestions.filter((lang) =>
    lang.toLowerCase().slice(0, inputLength) === inputValue
  );
}

function SearchBar() {
  const [value, setValue] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  const onChange = (event, { newValue }) => {
    setValue(newValue);
  };

  const onSuggestionsFetchRequested = ({ value }) => {
    setSuggestions(getSuggestions(value));
  };

  const onSuggestionsClearRequested = () => {
    setSuggestions([]);
  };

  const inputProps = {
    placeholder: '검색어를 입력하세요',
    value,
    onChange,
  };

  return (
    <Autosuggest
      suggestions={suggestions}
      onSuggestionsFetchRequested={onSuggestionsFetchRequested}
      onSuggestionsClearRequested={onSuggestionsClearRequested}
      getSuggestionValue={(suggestion) => suggestion}
      renderSuggestion={(suggestion) => <div>{suggestion}</div>}
      inputProps={inputProps}
    />
  );
}

export default SearchBar;

결론

자바스크립트를 이용한 웹사이트 맞춤 검색 엔진 개발은 웹페이지의 콘텐츠를 효과적으로 인덱싱하고, 사용자의 검색 요구에 맞는 결과를 손쉽게 제공할 수 있게 해주는 강력한 도구입니다. 이를 통해 사용자들은 웹사이트에서 필요한 정보를 빠르고 정확하게 얻을 수 있게 됩니다.