예제 애플리케이션

비공식 베타 번역

이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →

참고

예제 설치에는 여러 패키지 매니저를 사용할 수 있지만, 모든 예제는 스크립트 실행기로 pnpm을 사용하도록 구성되어 있습니다. 따라서 반드시 먼저 설치해 주세요.

npm이나 yarn을 사용하려면 생성된 예제의 관련 package.json scripts 항목을 업데이트해야 합니다.

---

slug: typescript-performance-lessons title: v10 리팩토링 과정에서 얻은 TypeScript 성능 교훈 authors: [sachinraja]

Next.js 스타터 (Prisma, E2E 테스트, ESLint 포함) (권장)

npm

bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

yarn

sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

pnpm

sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

bun

sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter

• 배포 예시: nextjs.trpc.io

• 소스 코드

---

slug: typescript-performance-lessons title: v10 리팩토링 과정에서 얻은 TypeScript 성능 교훈 authors: [sachinraja]

create-t3-turbo - Expo 및 Turborepo를 활용한 T3 스택

git

bash
git clone git@github.com:t3-oss/create-t3-turbo.git

bash
git clone git@github.com:t3-oss/create-t3-turbo.git

• 소스 코드

---

slug: typescript-performance-lessons title: v10 리팩토링 과정에서 얻은 TypeScript 성능 교훈 authors: [sachinraja]

Next.js 스타터 (Prisma, E2E 테스트, ESLint, next-auth, WebSockets, 구독 기능 포함)

npm

bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

yarn

sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

pnpm

sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

bun

sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter

• 배포 예시: websockets.trpc.io

• 코드샌드박스

• 소스 코드

---

slug: typescript-performance-lessons title: v10 리팩토링 과정에서 얻은 TypeScript 성능 교훈 authors: [sachinraja]

Next.js Todo MVC 예제 (SSG 및 Prisma 적용)

npm

bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

bash
npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

yarn

sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

sh
yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

pnpm

sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

sh
pnpx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

bun

sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

sh
bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo

• 배포 예시: todomvc.trpc.io

• 코드샌드박스

• 소스 코드

---

slug: typescript-performance-lessons title: v10 리팩토링 과정에서 얻은 TypeScript 성능 교훈 authors: [sachinraja]

최소 구성 (Hello world) Node.js 서버 및 클라이언트

• 소스 코드

---

slug: typescript-performance-lessons title: v10 리팩토링 과정에서 얻은 TypeScript 성능 교훈 authors: [sachinraja]

순수 독립 실행형 서버 및 Node.js 프로시저 호출

• 코드샌드박스

• 소스 코드

---

slug: typescript-performance-lessons title: v10 리팩토링 과정에서 얻은 TypeScript 성능 교훈 authors: [sachinraja]

Express 서버 및 Node.js 프로시저 호출

• 코드샌드박스

• 소스 코드

---

slug: typescript-performance-lessons title: v10 리팩토링 과정에서 얻은 TypeScript 성능 교훈 authors: [sachinraja]

WebSockets 지원 Fastify 서버 및 Node.js 프로시저 호출

• 코드샌드박스

• 소스 코드

---

slug: typescript-performance-lessons title: v10 리팩토링 과정에서 얻은 TypeScript 성능 교훈 authors: [sachinraja]

Prisma를 활용한 SvelteKit

• 코드샌드박스

• 소스 코드

---

slug: typescript-performance-lessons title: v10 리팩토링 과정에서 얻은 TypeScript 성능 교훈 authors: [sachinraja]

Express 기반 Sign-In With Ethereum 인증

git

bash
git clone git@github.com:codingwithmanny/trpc-siwe-monorepo.git

bash
git clone git@github.com:codingwithmanny/trpc-siwe-monorepo.git

• 소스 코드

---

slug: typescript-performance-lessons title: v10 리팩토링 과정에서 얻은 TypeScript 성능 교훈 authors: [sachinraja]

별도의 백엔드 & 프론트엔드 저장소

• 소스 코드 - BE 저장소

• 소스 코드 - FE 저장소