Full-Stack 앱 구축이 매번 처음부터 시작하는 느낌이 되어서는 안 됩니다

Source: Dev.to

Introduction

BearStudio에서는 새로운 웹 프로젝트를 꽤 자주 시작합니다.
그리고 매번 시작은 똑같았습니다: 의미 있는 무언가를 만들기 전에 기반을 다지는 데 몇 시간을 허비했습니다.

• React와 TypeScript 프로젝트를 띄우기.
• 라우팅 추가.
• 데이터 패칭 및 뮤테이션 패턴 선택.
• 인증 설정.
• Prisma를 설치하고 마이그레이션 연결.
• Tailwind 도입.
• UI 컴포넌트를 고르거나 직접 만들기.
• 린팅, 테스트, CI, Docker 설정.

모든 것이 제자리에 갖춰질 때쯤, 아직 실제 기능 하나도 배포하지 못한 상태였습니다. 이 과정이 특별히 어려운 것은 아니었지만, 반복적이었고 흥미로운 작업을 시작하기 전에 에너지를 소모시켰습니다.

그래서 우리는 **Start UI (web)**이라는 오픈소스 풀스택 스타터를 만들게 되었습니다.
레포지토리:

Why TanStack Start?

TanStack Start를 살펴보니 우리가 원하던 개발자 경험과 일치했습니다: 명시적이고, 현대적이며, 타입‑안전하고, 불필요한 추상화가 없었습니다.

• 라우팅, 데이터 로딩, 액션을 위한 깔끔한 기반 제공.
• 기본 React와 서버 패턴에 가깝게 작업할 수 있게 함.
• 구조를 제공하지만 선택을 강제하지 않음.

TanStack Start는 모든 것을 해결하려 하지 않으며, 우리는 그 점이 마음에 듭니다. 기본을 단순하게 유지하면서도 아키텍처 결정을 위한 여지를 남겨줍니다. 여기서 우리만의 스택이 들어갑니다.

Where oRPC Fits In

클라이언트‑서버 통신을 위해 우리는 oRPC를 사용합니다. 이는 TanStack Start의 일부가 아니라 별도의 선택이며 다음을 제공합니다:

• 완전 타입‑안전한 프로시저 호출
• 더 명확한 관심사 분리
• 중복된 타입 없음
• 예측 가능한 요청·응답 흐름

oRPC는 애플리케이션 로직 경계를 담당하고, TanStack Start는 라우팅과 UI 구성을 담당합니다. 두 도구는 서로 방해하지 않으면서 잘 어우러집니다.

The Setup Pain We Wanted to Remove

우리는 보일러플레이트가 재미있어서 스타터를 만든 것이 아닙니다. 매 프로젝트마다 같은 반복적인 장애물에 부딪혔기 때문에 만들었습니다:

• 이미 해결한 프로젝트 구조를 다시 만들기.
• 프로젝트마다 거의 변하지 않는 인증 흐름을 다시 작성하기.
• Prisma 설정과 마이그레이션을 수작업으로 처리하기.
• 서버와 클라이언트 타입을 수동으로 복제하지 않고 맞추기.
• 동일한 UI 프리미티브를 다시 만들기.
• 테스트를 나중으로 미루고 후회하기.
• 백 번째 Docker 설정하기.

각 문제는 작지만, 모두 합쳐지면 프로젝트가 실제로 느껴지기 시작할 때 속도가 크게 떨어집니다.

What Start UI (web) Gives You From Day One

목표는 간단합니다: 새 프로젝트를 만들면 거의 즉시 기능을 개발할 수 있어야 합니다.

• 깔끔한 React와 TypeScript 구조.
• TanStack Start로 설정된 라우팅.
• oRPC가 제공하는 완전 타입‑안전 API 프로시저.
• 이미 설정된 Better Auth로 인증 처리.
• 스키마와 마이그레이션이 연결된 Prisma.
• 설치된 Tailwind와 shadcn/ui가 제공하는 견고한 컴포넌트 세트.
• 바로 사용할 수 있는 유닛·E2E 테스트.
• ESLint, Prettier, CI 준비 완료.
• 로컬·프로덕션 환경 모두에서 동작하는 Docker.
• 최소 디자인 시스템을 갖춘 Storybook 포함.

이 스택에 포함된 어떤 것도 여러분을 구속하기 위한 것이 아니라, 반복적인 부분을 없애어 실제 중요한 일에 집중할 수 있게 해줍니다.

Why It Matters

프로젝트 초반은 흥미로워야 합니다. 설정 단계가 오래 끌수록 그 흥미는 금방 사라집니다. Start UI (web)는 지루한 작업을 없애어 더 빨리 실질적인 진행 상황을 볼 수 있게 함으로써 모멘텀을 유지하도록 도와줍니다.

Who This Helps

이 스타터는 다음과 같은 경우에 유용합니다:

• 자주 새로운 프로젝트를 시작하는 에이전시·팀
• 신뢰할 수 있는 베이스라인을 찾는 프리랜서
• 실제 상황에서 TanStack Start를 탐험하고 싶은 개발자
• 보일러플레이트를 건너뛰고 더 빠르게 만들고 싶은 모든 사람

프레임워크가 아니며, 경직되지도 않습니다. 여러분이 위에 구축할 수 있는 견고한 기반입니다.

Open Source and Continuously Improved

우리는 Start UI (web)를 내부에서 사용하고 실제 필요에 따라 지속적으로 다듬고 있습니다. 여기서 확인해 보세요:

우리는 2 000 stars를 크리스마스 전에 달성하고자 합니다. 도움이 되거나 아이디어를 불러일으켰다면, 별 하나만 눌러주셔도 큰 힘이 됩니다.

읽어 주셔서 감사합니다. TanStack Start, oRPC, Better Auth 혹은 다른 주제에 대해 이야기하고 싶다면 언제든 환영합니다.