검색: 전문 검색(Full-text) + 필터링

| 솔루션 | 셋업 | 한국어 | 비용 | 속도 |
|---|---|---|---|---|
| PostgreSQL FTS | 무료·간단 | ⭐⭐ | 0 | ⭐⭐⭐ |
| Meilisearch | 셀프호스트 | ⭐⭐⭐ | 0~ | ⭐⭐⭐⭐⭐ |
| Algolia | SaaS | ⭐⭐⭐⭐ | $$$ | ⭐⭐⭐⭐⭐ |
| Elasticsearch | 복잡 | ⭐⭐⭐⭐ | $$ | ⭐⭐⭐⭐ |
| Typesense | 셀프호스트 | ⭐⭐⭐ | 0~ | ⭐⭐⭐⭐⭐ |


결론:
- MVP·작은 데이터 → PostgreSQL FTS
- 빠른 통합·UX 우선 → Meilisearch
- 글로벌·예산 충분 → Algolia

-- 1. tsvector 컬럼 + 가중치
ALTER TABLE posts ADD COLUMN search tsvector;

UPDATE posts SET search =
  setweight(to_tsvector('simple', COALESCE(title, '')), 'A') ||
  setweight(to_tsvector('simple', COALESCE(content, '')), 'B') ||
  setweight(to_tsvector('simple', COALESCE(array_to_string(tags, ' '), '')), 'C');

CREATE INDEX idx_posts_search ON posts USING GIN(search);


-- 2. 트리거로 자동 갱신
CREATE FUNCTION posts_search_trigger() RETURNS trigger AS $$
BEGIN
  NEW.search :=
    setweight(to_tsvector('simple', COALESCE(NEW.title, '')), 'A') ||
    setweight(to_tsvector('simple', COALESCE(NEW.content, '')), 'B');
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER trg_posts_search
BEFORE INSERT OR UPDATE ON posts
FOR EACH ROW EXECUTE FUNCTION posts_search_trigger();


-- 3. 검색 쿼리
SELECT
  id, title,
  ts_rank(search, query) as rank,
  ts_headline('simple', content, query, 'MaxWords=20') as snippet
FROM posts, plainto_tsquery('simple', '리액트 타입스크립트') query
WHERE search @@ query
ORDER BY rank DESC
LIMIT 20;

-- mecab-ko (KISA 한국어 분석기)
CREATE EXTENSION pg_trgm;  -- 유사도 검색


-- 트라이그램 검색 (오타 허용)
CREATE INDEX idx_posts_title_trgm ON posts USING GIN (title gin_trgm_ops);

SELECT *, similarity(title, '리액크') as sim
FROM posts
WHERE title % '리액크'  -- 자동 유사도 비교
ORDER BY sim DESC;
-- → '리액트' 결과 반환 (오타 허용)

# 도커
docker run -p 7700:7700 -v $(pwd)/data:/data getmeili/meilisearch

import { MeiliSearch } from 'meilisearch';

const client = new MeiliSearch({
  host: process.env.MEILISEARCH_HOST!,
  apiKey: process.env.MEILISEARCH_KEY!,
});

const index = client.index('posts');


// 1. 인덱스 셋업
await index.updateSettings({
  searchableAttributes: ['title', 'content', 'tags'],
  filterableAttributes: ['authorId', 'category', 'published'],
  sortableAttributes: ['createdAt', 'likes'],
  rankingRules: [
    'words', 'typo', 'proximity', 'attribute', 'sort', 'exactness',
  ],
  stopWords: ['그리고', '하지만', '그래서'],
  synonyms: {
    'typescript': ['ts', '타입스크립트'],
    'react': ['리액트'],
  },
});


// 2. 데이터 동기화 (Postgres → Meilisearch)
async function syncPost(post: Post) {
  await index.addDocuments([{
    id: post.id,
    title: post.title,
    content: post.content,
    tags: post.tags,
    authorId: post.authorId,
    category: post.category,
    published: post.published,
    createdAt: post.createdAt.getTime(),
    likes: post.likesCount,
  }]);
}


// Prisma 미들웨어로 자동 동기화
prisma.$use(async (params, next) => {
  const result = await next(params);
  if (params.model === 'Post') {
    if (['create', 'update', 'upsert'].includes(params.action)) {
      await syncPost(result).catch(console.error);
    } else if (params.action === 'delete') {
      await index.deleteDocument(result.id).catch(console.error);
    }
  }
  return result;
});


// 3. 검색 API
app.get('/api/search', async (req, res) => {
  const { q = '', filter, sort, page = 1, limit = 20 } = req.query;

  const result = await index.search(q as string, {
    filter: filter as string,
    sort: sort ? [sort as string] : undefined,
    offset: (Number(page) - 1) * Number(limit),
    limit: Number(limit),
    attributesToHighlight: ['title', 'content'],
    highlightPreTag: '<mark>',
    highlightPostTag: '</mark>',
  });

  res.json(result);
});

'use client';
import { useState, useEffect } from 'react';
import { useDebouncedValue } from '@/hooks/useDebouncedValue';

export function SearchBar() {
  const [q, setQ] = useState('');
  const dq = useDebouncedValue(q, 200);
  const [results, setResults] = useState<any[]>([]);

  useEffect(() => {
    if (!dq) return setResults([]);
    fetch(`/api/search?q=${encodeURIComponent(dq)}`)
      .then(r => r.json())
      .then(d => setResults(d.hits));
  }, [dq]);

  return (
    <div className="relative">
      <input
        value={q}
        onChange={e => setQ(e.target.value)}
        placeholder="검색..."
      />
      {results.length > 0 && (
        <ul className="absolute top-full bg-white shadow-lg w-full">
          {results.map(r => (
            <li key={r.id}>
              <a href={`/posts/${r.id}`}
                 dangerouslySetInnerHTML={{ __html: r._formatted.title }} />
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}