tRPC End-to-End Type Safe APIs · 강의

tRPC 모노레포 설정

tRPC 프로젝트를 위한 모노레포 작업 공간을 구성하고 백엔드, 프런트엔드, 공유 형식을 분리합니다.

tRPC 모노레포 설정은(는) CoddyKit의 무료 tRPC End-to-End Type Safe APIs 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 tRPC End-to-End Type Safe APIs 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. tRPC End-to-End Type Safe APIs 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

What is a Monorepo?

Welcome to setting up a tRPC project in a monorepo! But what exactly is a monorepo?

A monorepo is a single repository containing multiple distinct projects.
Unlike a polyrepo (multiple repos for multiple projects), everything lives together.
Think of it as a big folder holding many smaller, related projects.

It's a powerful way to manage complex applications.

Why Monorepos for tRPC?

Monorepos offer unique advantages when working with tRPC:

Shared Types: Easily share TypeScript types between your frontend and backend.
Atomic Commits: Changes to the API and its consuming client can be committed together.
Simplified Refactoring: Rename a type in one place, and your editor updates everywhere.
Consistent Tooling: Share configurations for linters, formatters, and build tools.

This approach makes end-to-end type safety even more robust.

Choosing a Monorepo Tool

To manage a monorepo effectively, you'll need a workspace manager. These tools help link your internal packages.

Popular options include:

pnpm Workspaces: Efficient, uses symlinks for dependencies.
Yarn Workspaces: A common choice, built into Yarn.
Nx: A powerful build system and monorepo tool.
Turborepo: Focuses on fast builds and caching.

For this lesson, we'll use pnpm Workspaces due to its simplicity and efficiency.

Initializing the Monorepo

First, create a new directory for your monorepo and initialize a `package.json`.

Then, create a `pnpm-workspace.yaml` file to define your workspace roots. This tells pnpm where to find your sub-projects.

mkdir trpc-monorepo
cd trpc-monorepo
pnpm init

# pnpm-workspace.yaml
packages:
  - 'packages/*'

Structuring the 'packages' Folder

The `packages` directory will contain all your individual projects (or 'apps'). We'll typically have:

server: Your tRPC backend.
client: Your frontend application (e.g., React, Next.js).
shared: A package for common utilities, types, and Zod schemas shared by `server` and `client`.

Let's create these basic directories.

mkdir -p packages/server
mkdir -p packages/client
mkdir -p packages/shared

Setting up the 'server' Package

Inside `packages/server`, we'll set up a basic Node.js project. It needs its own `package.json` and `tsconfig.json`.

The `tsconfig.json` will specify compilation options for your backend code.

// packages/server/package.json
{
  "name": "server",
  "version": "1.0.0",
  "main": "src/index.ts",
  "scripts": {
    "dev": "ts-node-dev src/index.ts"
  },
  "dependencies": {
    "@trpc/server": "latest",
    "cors": "latest",
    "express": "latest"
  },
  "devDependencies": {
    "typescript": "latest",
    "ts-node-dev": "latest"
  }
}

// packages/server/tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "dist"
  }
}

Setting up the 'client' Package

Similarly, `packages/client` will house your frontend application. This example shows a basic React setup, but it could be Next.js or any other framework.

It will also have its own `package.json` and `tsconfig.json`.

// packages/client/package.json
{
  "name": "client",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "@trpc/client": "latest",
    "@trpc/react-query": "latest",
    "react": "latest",
    "react-dom": "latest",
    "@tanstack/react-query": "latest"
  },
  "devDependencies": {
    "typescript": "latest",
    "vite": "latest",
    "@vitejs/plugin-react": "latest"
  }
}

// packages/client/tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "../shared" }]
}

Creating the 'shared' Package

The `packages/shared` directory is crucial for tRPC monorepos. It will contain types and definitions that both your `server` and `client` need.

This ensures end-to-end type safety by having a single source of truth for your API contract.

// packages/shared/package.json
{
  "name": "shared",
  "version": "1.0.0",
  "main": "src/index.ts",
  "types": "src/index.ts"
}

// packages/shared/tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "strict": true,
    "declaration": true,
    "outDir": "dist"
  },
  "include": ["src"]
}

Linking Shared Types

Now that we have our `shared` package, we need to tell `server` and `client` about it.

We add `"shared": "workspace:*"` to the `dependencies` of both `server` and `client`'s `package.json` files.

Then, run `pnpm install` at the monorepo root to link them up.

// packages/server/package.json (snippet)
"dependencies": {
  "@trpc/server": "latest",
  "shared": "workspace:*" // Add this line!
}

// packages/client/package.json (snippet)
"dependencies": {
  "@trpc/client": "latest",
  "shared": "workspace:*" // Add this line!
}

pnpm install

Practical Example: Sharing a Type

Let's see how sharing types works. We'll define a `User` type in `shared` and use it in a mock backend and frontend snippet.

This demonstrates the core benefit: defining types once and using them everywhere.

// packages/shared/src/index.ts
export type User = {
  id: string;
  name: string;
  email: string;
};

// packages/server/src/index.ts (mock)
import { User } from 'shared';

const getUser = (): User => ({
  id: '123',
  name: 'Alice',
  email: 'alice@example.com'
});

console.log(getUser().name);

// packages/client/src/App.tsx (mock)
import { User } from 'shared';

const displayUser = (user: User) => {
  console.log(`User: ${user.name}`);
};

const currentUser: User = {
  id: '456',
  name: 'Bob',
  email: 'bob@example.com'
};
displayUser(currentUser);

Monorepo Setup Check

You've learned about setting up a tRPC monorepo. Which of the following is NOT a primary benefit of using a monorepo for a tRPC project?

Recap: tRPC Monorepo Setup

You've successfully explored how to set up a tRPC monorepo!

We defined a monorepo as a single repository for multiple projects.
Learned its benefits for tRPC, especially shared types.
Used `pnpm Workspaces` to structure `server`, `client`, and `shared` packages.
Understood how to link these packages to share code and types.

This foundation is key for building scalable and type-safe tRPC applications!

자주 묻는 질문

“tRPC 모노레포 설정” 강의는 무료인가요?

네 — “tRPC 모노레포 설정” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 tRPC End-to-End Type Safe APIs 강의 전체를 잠금 해제할 수 있습니다. tRPC End-to-End Type Safe APIs 강의에는 총 4개의 강의가 포함되어 있습니다.

“tRPC 모노레포 설정”에서 뭘 배우나요?

tRPC 프로젝트를 위한 모노레포 작업 공간을 구성하고 백엔드, 프런트엔드, 공유 형식을 분리합니다. 브라우저에서 직접 실행하는 실습 코드로 tRPC End-to-End Type Safe APIs을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

tRPC End-to-End Type Safe APIs을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 tRPC End-to-End Type Safe APIs은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“tRPC 모노레포 설정” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 tRPC End-to-End Type Safe APIs 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 tRPC End-to-End Type Safe APIs 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← tRPC End-to-End Type Safe APIs(으)로 돌아가기