빠르게 움직이며 무너뜨리지 마세요.\n종단 간 타입 안전 API를 손쉽게 구축하세요.

풀스택 애플리케이션의 생산성을 높이기 위해 TypeScript 추론의 모든 힘을 경험해 보세요.

스타

빠른 시작

Supported by

22 more

Many thanks to all of our amazing sponsors!

자동 타입 안전성

서버 측을 변경했나요? 파일 저장 전에도 TypeScript가 클라이언트에서 오류를 미리 알려줍니다!

빠른 개발 경험

tRPC는 빌드나 컴파일 단계가 없어 코드 생성, 런타임 비대화, 빌드 과정이 필요없습니다.

프레임워크 중립적

모든 JavaScript 프레임워크 및 런타임과 호환됩니다. 기존 프로젝트에 쉽게 추가할 수 있습니다.

자동 완성

tRPC 사용은 API 서버 코드용 SDK를 사용하는 것과 같아 엔드포인트에 대한 확신을 줍니다.

가벼운 번들 크기

tRPC는 의존성이 전혀 없고 클라이언트 측 용량이 아주 작아 가볍습니다.

필수 구성 요소 내장

React, Next.js, Express, Fastify, AWS Lambda, Solid, Svelte 등을 위한 어댑터를 제공합니다.

사용처

tRPC는 선도적인 기술 팀과 수많은 포춘 500대 기업에서 검증받고 신뢰받고 있습니다.

탁월한 개발자 경험과 함께하는 간편한 사용

타입 안전한 API를 구축하기 위해 tRPC를 시작하는 것은 빠르고 쉽습니다.

ts
const t = initTRPC.create();
 
const router = t.router;
const publicProcedure = t.procedure;
 
const appRouter = router({
  greeting: publicProcedure
    .input(z.object({ name: z.string() }))
    .query((opts) => {
      const { input } = opts;
               const input: {
    name: string;
}
 
      return `Hello ${input.name}` as const;
  }),
});
 
export type AppRouter = typeof appRouter;

ts
const t = initTRPC.create();
 
const router = t.router;
const publicProcedure = t.procedure;
 
const appRouter = router({
  greeting: publicProcedure
    .input(z.object({ name: z.string() }))
    .query((opts) => {
      const { input } = opts;
               const input: {
    name: string;
}
 
      return `Hello ${input.name}` as const;
  }),
});
 
export type AppRouter = typeof appRouter;

프로시저 정의하기

tRPC API를 만드는 첫 단계는 프로시저를 정의하는 것입니다.

프로시저는 백엔드를 구축하는 데 사용할 함수입니다. {조합 가능}하며 쿼리, 뮤테이션, 구독이 될 수 있습니다. 라우터는 여러 프로시저를 포함합니다.

이 프로시저에서는 Zod 검증기를 사용해 클라이언트의 입력이 프로시저가 기대하는 형태와 정확히 일치하는지 확인합니다. 또한 쿼리에서 간단한 텍스트 문자열을 반환할 것입니다.

파일 끝에서는 라우터 타입을 익스포트하여 프론트엔드 코드에서 바로 사용할 수 있도록 합니다.

ts
const { listen } = createHTTPServer({
  router: appRouter,
});
 
// The API will now be listening on port 3000!
listen(3000);

ts
const { listen } = createHTTPServer({
  router: appRouter,
});
 
// The API will now be listening on port 3000!
listen(3000);

HTTP 서버 생성하기

appRouter를 사용하여 HTTP 서버를 생성합니다. 이제 tRPC 서버가 실행 중입니다!

tRPC는 다양한 어댑터를 제공하므로 여러분의 환경에 맞게 사용할 수 있습니다. Next.js, Express, Fetch API(Astro, Remix, SvelteKit, Cloudflare Workers 등), Fastify, AWS Lambda 또는 일반 Node HTTP 서버를 지원합니다.

ts
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });

ts
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });

클라이언트를 연결하고 쿼리를 시작하세요!

이제 서버가 실행 중이므로 클라이언트를 생성하고 데이터 쿼리를 시작할 수 있습니다.

클라이언트 생성 시 AppRouter 타입을 전달하여 코드 생성 없이도 백엔드 API와 일치하는 TypeScript 자동 완성 및 Intellisense를 활용할 수 있습니다!

직접 사용해 보세요!

Node.js

React

Next.js

tRPC를 사용하는 최소한의 Node.js 애플리케이션입니다.

Loading sandbox...

⚠️

Heads up!

WebContainers require modern Web APIs that likely aren't supported by your browser. Either open this page in a Chrome, or download this sandbox from StackBlitz and run it locally.

You can dismiss this warning to see the code, although you'll likely see unexpected errors.

Open in StackBlitz