엔드투엔드 타입 안전한 API를 손쉽게 만듭니다
소개
tRPC를 사용하면 스키마나 코드 생성 없이 완전히 타입 안전한 API를 구축하고 소비할 수 있습니다. 이 도구는 REST와 GraphQL의 개념을 결합합니다. 둘 중 하나라도 익숙하지 않다면, 잠시 시간을 내어 핵심 개념을 확인해 보세요.
풀스택 TypeScript 프로젝트에서 클라이언트와 서버 간 API 계약의 동기화는 일반적인 문제점입니다. tRPC는 코드 생성 단계 없이 TypeScript의 타입 추론을 직접 활용하여 이를 해결하며, 빌드 시점에 문제를 감지합니다.
tRPC는 단독으로 실행하거나, 광범위한 어댑터 생태계를 활용하여 기존 REST API에 엔드포인트로 마운트할 수 있습니다.
기능
- ✅ 충분히 테스트되었으며 프로덕션 환경에 적합합니다.
- 🧙♂️ 입력, 출력, 오류에 대한 클라이언트 측 완전한 정적 타입 안전성 및 자동완성.
- 🐎 빠른 개발 경험 - 코드 생성 단계나 불필요한 런타임 코드, 별도 빌드 파이프라인이 없습니다.
- 🍃 가벼움 - tRPC는 런타임 의존성이 없으며 클라이언트 번들 크기도 매우 작습니다.
- 🐻 신규 및 기존 프로젝트 지원 - 쉽게 시작하거나 기존 브라운필드 프로젝트에 추가할 수 있습니다.
- 🔋 프레임워크 비종속적 - tRPC 커뮤니티는 가장 인기 있는 모든 프레임워크에 대한 어댑터를 구축했습니다.
- 🥃 구독 지원 - 애플리케이션에 타입 안전한 실시간 업데이트를 추가할 수 있습니다.
- ⚡️ 요청 배치 처리 - 동시에 발생한 요청을 자동으로 하나로 묶을 수 있습니다.
- 👀 예제 - 학습하거나 시작점으로 사용할 예제를 확인해 보세요.
빠른 살펴보기
비디오 및 커뮤니티 리소스 페이지에서 더 많은 내용을 확인해 보세요.
tRPC 사용해 보기
- 최소 예제 — Node.js http 서버 + 클라이언트.
- 최소 Next.js 예제 — 단일 엔드포인트 + 페이지.
또는 예제 앱을 사용하여 로컬에서 시작해 보세요.
tRPC 도입하기
새 프로젝트 만들기
tRPC는 다양한 프레임워크 내에서 사용할 수 있으므로, 먼저 어디에서 사용할지 결정해야 합니다.
백엔드에서는 다양한 프레임워크 및 바닐라 Node.js에 대한 어댑터가 있습니다. 프론트엔드에서는 TanStack React Query 또는 Next.js 통합, 다양한 기타 프레임워크를 위한 서드파티 통합, 또는 JavaScript가 실행되는 모든 곳에서 작동하는 바닐라 클라이언트를 사용할 수 있습니다.
스택을 선택한 후, 템플릿을 사용하여 앱을 스캐폴딩하거나, 선택한 백엔드 및 프론트엔드 통합에 대한 문서를 사용하여 처음부터 시작할 수 있습니다.
기존 프로젝트에 tRPC 추가하기
기존 프로젝트에 tRPC를 추가하는 것은 새 프로젝트를 시작하는 것과 크게 다르지 않으므로 동일한 리소스가 적용됩니다. 주요 과제는 기존 애플리케이션에 tRPC를 어떻게 통합해야 할지 파악하는 것이 어려울 수 있다는 점입니다. 다음은 몇 가지 팁입니다:
- 기존 백엔드 로직을 모두 tRPC로 이전할 필요는 없습니다. 일반적인 마이그레이션 전략은 처음에는 tRPC를 새로운 엔드포인트에만 사용하고, 나중에 기존 엔드포인트를 tRPC로 마이그레이션하는 것입니다.
- 어디서 시작해야 할지 확실하지 않다면 백엔드 어댑터 및 프론트엔드 구현에 대한 문서와 예제 앱을 확인해 보세요.
- 더 큰 코드베이스의 일부로서 tRPC가 어떻게 보일 수 있는지에 대한 영감을 찾고 있다면 tRPC를 사용하는 오픈소스 프로젝트에서 몇 가지 예시를 찾을 수 있습니다.
커뮤니티
Discord에 참여하여 질문을 하고 경험을 공유해 보세요!