GN⁺: HN에 공개: Triplit – 서버와 클라이언트에서 실행되는 오픈 소스 동기화 데이터베이스

Triplit 개요

Triplit은 서버와 브라우저 간 데이터를 실시간으로 동기화하는 오픈소스 데이터베이스임. Typescript 패키지로 제공되며, 서버에 데이터를 저장하고 클라이언트에 지능적으로 동기화함.

• 실시간 동기화: 속성 수준에서 증분 업데이트와 충돌 해결 제공
• 로컬 캐싱: 클라이언트 측 데이터베이스로 구동
• 내구성 있는 서버 측 저장소: 관리자 대시보드 포함
• 플러그형 저장소 제공자: SQLite, IndexedDB, LevelDB, Memory 등 지원
• 낙관적 업데이트: 빠른 상호작용 제공
• 관계형 쿼리: 복잡한 데이터 모델 지원
• 오프라인 모드: 자동 재연결 및 일관성 보장
• 롤백 및 재시도 관리: 업데이트 실패 시 처리
• 스키마: 데이터 안전성과 Typescript 자동 완성 제공
• 권한 관리: 서버에서 읽기 및 쓰기 권한 강제
• 협업/멀티플레이어: CRDTs로 구동
• 저지연: 델타 패치를 사용한 최소 네트워크 트래픽
• 간단한 API: Javascript와 React에서 데이터 쿼리 및 변형 지원
• 완전한 오픈소스

Monorepo 개요

triplit/packages에는 Triplit을 구동하는 다양한 프로젝트가 포함됨:

• TriplitDB: 브라우저, Node, Deno, React Native 등 모든 JS 환경에서 실행 가능하며, 네트워크 상에서 여러 작성자와 일관성을 유지하면서 빠르고 실시간으로 업데이트되는 쿼리 제공
• Client: 로컬 및 원격 TriplitDB와 상호작용하는 브라우저 라이브러리
• CLI: 프로젝트 스캐폴딩, 풀스택 개발 환경 실행, 서버 마이그레이션 등을 위한 명령어 제공
• React: @triplit/client를 위한 React 바인딩
• Svelte: @triplit/client를 위한 Svelte 바인딩
• Console: Triplit 프로젝트의 데이터 보기 및 변형, 스키마 관리 앱
• Server: Triplit 클라이언트 간 데이터 동기화를 위한 Node 서버
• Server-core: Triplit을 실행하는 서버를 구축하기 위한 프로토콜 무관 라이브러리
• Docs: Nextra로 구축된 Triplit 문서
• Types: 다양한 Triplit 프로젝트를 위한 공유 타입
• UI: shadcn으로 구축된 Triplit 프론트엔드 프로젝트를 위한 공유 UI 컴포넌트

빠른 시작

새 프로젝트 시작:

npm create triplit-app@latest my-app

기존 프로젝트에 종속성 추가:

npm install --save-dev @triplit/cli
npm run triplit init

스키마 정의 (my-app/triplit/schema.ts):

import { Schema as S, ClientSchema } from '@triplit/client';

export const schema = {
  todos: {
    schema: S.Schema({
      id: S.Id(),
      text: S.String(),
      completed: S.Boolean({ default: false }),
    }),
  },
} satisfies ClientSchema;

Triplit 개발 동기화 서버 시작:

npm run triplit dev

환경 변수 설정 (.env 파일):

VITE_TRIPLIT_SERVER_URL=http://localhost:6543
VITE_TRIPLIT_TOKEN=copied-in-from-triplit-dev

앱에서 쿼리 정의 (React 예시):

import { TriplitClient } from '@triplit/client';
import { useQuery } from '@triplit/react';
import { schema } from '../triplit/schema';

const client = new TriplitClient({
  schema,
  serverUrl: import.meta.env.VITE_TRIPLIT_SERVER_URL,
  token: import.meta.env.VITE_TRIPLIT_TOKEN,
});

function App() {
  const { results: todos } = useQuery(client.query('todos'));

  return (
    <div>
      {Array.from(todos.values()).map((todo) => (
        <div key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() =>
              client.update('todos', todo.id, (todo) => ({
                todo.completed = !todo.completed,
              }))
            }
          />
          {todo.text}
        </div>
      ))}
    </div>
  );
}

앱 시작, 다른 브라우저 탭 열고 실시간 데이터 동기화 확인.

GN⁺의 의견

• Triplit은 실시간 동기화와 로컬 캐싱을 결합하여 빠르고 일관된 사용자 경험을 제공함.
• 다양한 저장소 제공자를 지원하여 유연한 데이터 관리가 가능함.
• 오프라인 모드와 자동 재연결 기능은 네트워크 불안정 상황에서도 데이터 일관성을 유지함.
• 간단한 API와 다양한 프레임워크 지원으로 개발자 친화적임.
• 그러나 초기 설정과 환경 변수 관리가 다소 복잡할 수 있음.