AI 챗은 대표님의 오더로 시작했습니다. "사무실 간식 5만원어치 알려줘"처럼 말만 하면 간식 구성을 짜 주는 기능이요. 개발은 백엔드 개발자 한 분과 저, 둘이서 했습니다. GPT를 부르고 결과를 가공하는 건 백엔드, 그 응답을 받아 화면에 풀어내는 건 제 몫이었어요. 둘이서 서비스 전체를 만든 이야기는 따로 써 보려고 합니다.

이번 글은 그중 AI 챗 이야기입니다. 백엔드와 프론트가 LLM을 어떻게 나눠 맡았는지, 그리고 AI가 없는 간식을 추천하던 문제를 어떻게 잡았는지를 정리했습니다.

글에 실린 화면은 서비스 종료 후 만든 데모에서 다시 찍었습니다. UI는 원래 코드 그대로지만, 화면 속 답변 문장은 GPT가 아닌 데모용 모델이 만든 것입니다.

화면이 먼저 나왔습니다

챗 화면은 GPT가 붙기 전에 먼저 만들었습니다. 2024년 10월 말, 백엔드에 아직 아무것도 없을 때 더미 데이터로 시작했어요.

계속 읽기 →

고객사별로 간식 구성을 짜는 웹앱인데요, 가격표와 운영 가능 상품, 고객사별 특별단가가 들어 있는 엑셀을 올리면 브라우저 안에 상품 DB가 만들어지고, 거기서 검색해 고객사 탭마다 장바구니를 채운 다음 정해진 양식의 엑셀로 내보냅니다.

서버는 없습니다. Vite + React로 만든 SPA이고, 데이터는 전부 브라우저의 IndexedDB(Dexie)에 들어갑니다. 여기에 LLM(Gemini)을 붙인 과정을 정리해 봤습니다.

글의 화면은 촬영용으로 만든 샘플 엑셀(상품 164개, 고객사 5곳)로 다시 찍었습니다. 상품명·고객사·단가는 모두 가짜이고, AI 결과는 실제 Gemini 응답입니다.

규칙으로 할 수 있는 데까지

AI부터 붙인 건 아닙니다. 추천 기능은 이렇게 늘어났어요.

계속 읽기 →

"useMemo와 useCallback을 꼭 사용해야 할까?"

React 개발자라면 한 번쯤 고민해봤을 문제입니다. 그 문제 해결에 도움이 될 React Compiler를 소개합니다.

TL;DR

• React Compiler는 빌드 타임에 자동으로 메모이제이션을 적용하는 도구
• Next.js 16에서 안정화되어 프로덕션 사용 가능
• Meta Quest Store에서 초기 로드 최대 12% 향상, 특정 인터랙션 2.5배 빠름
• 과도한 수동 메모이제이션은 오히려 생산성을 31-46% 저하
• 당분간은 "성능 문제가 있을 때만 최적화" 원칙 유지

배경: 메모이제이션의 딜레마

React 개발을 하다 보면 필연적으로 만나는 고민이 있습니다.

function ProductList({ products }) {
  const sortedProducts = products.sort((a, b) => a.price - b.price);

  const handleClick = (id) => {
    console.log(id);
  };

  return (
    <div>
      {sortedProducts.map(p => (
        <ProductCard
          key={p.id}
          product={p}
          onClick={handleClick}
        />
      ))}
    </div>
  );
}

이 코드를 메모이제이션 해야 할까요?

"최적화를 위해 useMemo와 useCallback을 써야 하나?"라는 질문에 팀마다 다른 답을 가지고 있습니다:

• A: "모든 걸 메모이제이션하자!"
• B: "성능 문제가 생기면 그때 추가하자"
• C: "...뭐가 맞는지 모르겠다"

그리고 많은 경우, A팀의 코드베이스는 점점 유지보수 지옥이 되어갑니다.

계속 읽기 →

문서 사이트를 운영하다 보면 검색 기능은 필수입니다. 특히 한국어 컨텐츠가 많은 사이트에서는 한글에 특화된 검색 기능이 중요합니다. 이번 글에서는 Fumadocs의 기본 검색 엔진인 Orama가 한글을 제대로 지원하지 않는 문제를 해결하기 위해 커스텀 한글 검색 엔진을 구현한 과정을 공유합니다.

문제 발생

😮 : 한글 검색에 문제가 있나?

Fumadocs를 사용해 문서 사이트를 구축했는데, 한 가지 큰 문제가 있었습니다. 한글 검색이 제대로 작동하지 않는 것이었습니다.

원인 분석

Fumadocs는 기본적으로 Orama라는 검색 엔진을 사용하는데, 검색 결과 알게된 사실은…

GitHub Discussion #748에서 Orama 팀의 답변:

계속 읽기 →