T3로 Next.js 프로젝트 세팅하기

T3란?

T3는 Theo↗에 의해 구성된 Nextjs 웹 개발 스택으로 간단함(simplicity), 모듈성(modularity), 풀스택 타입 안정성(full-stack type safety)에 집중하였습니다.
T3 공식 사이트

T3 스택은 "TypeScript", "tRPC", "Tailwind CSS"를 핵심 구성 요소로 가지고 있습니다. 각 기술은 다음과 같은 역할을 담당합니다.

1. TypeScript: JavaScript의 상위 집합인 TypeScript는 정적 타입 지원으로 코드의 안정성과 유지 관리를 향상시키는 프로그래밍 언어입니다. TypeScript를 사용하면 런타임 버그를 줄이고, 가독성 높은 코드를 작성할 수 있습니다.
2. tRPC: tRPC는 타입 세이프 웹 API를 위한 프레임워크로, 프론트엔드와 백엔드 간 타입 정의를 공유하고 효율적으로 API를 개발할 수 있게 도와줍니다. 이를 통해 개발 시간을 단축하고, 실수를 줄일 수 있습니다.
3. Tailwind CSS: Tailwind CSS는 작은 CSS 클래스 조합을 통해 빠르게 반응형 디자인을 구현할 수 있는 유틸리티 기반의 CSS 프레임워크입니다. 개발자들은 커스텀 디자인을 쉽게 적용하고, 작성한 CSS 코드의 양을 줄일 수 있습니다.

T3 시작하기

npm create t3-app@latest

cli 커맨드로 t3 기술 스택들을 선택하여 간단하게 완성된 템플릿을 만들 수 있습니다. 권장되는 추가 옵션들은 해당 페이지에서 볼 수 있습니다. t3 시작하기

해당 기술 스택과 실제로 배포할 수 있는 디비, 서버까지 경험해볼 수 있는 튜토리얼이 있습니다.

T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScript, Tailwind, Prisma & More)

배포는 Vercel, 디비는 Planetscale, ORM은 Prisma로 서비스를 구성하고 있으며 사용자 인증은 별도로 개발하지 않고 Clerk를 사용하고 있습니다.

또한 Axiom을 이용해 사용자들의 실시간 로그 및 메트릭 데이터를 수집하고 관리합니다.

인프라와 백엔드 지식이 부족하지만 서비스에 대한 아이디어를 빠르게 구현해고 싶은 개발자들에게 유용할 것 같습니다.