How to build a convenient typescript full-stack monorepo

Context

많은 팀이 풀스택 모노레포를 구성한 후 거친 부분을 지속적으로 패치하고 해킹하며, 결국 모노레포 자체가 가치가 없다는 결론에 도달하는 패턴이 반복되었다. 근본 원인은 모노레포 구조 자체가 아니라 빠르게 구성되고 일일 개발에 편리하지 않은 초기 설정이다.

Technical Solution

• 폴더 구조를 3가지로 명확히 분리: apps/ (실행 가능한 애플리케이션), libs/ (공유 런타임 코드), packages/ (도구 및 설정)
• npm workspaces를 package.json에 등록하여 워크스페이스 간 의존성 해결 및 심링크된 내부 패키지 자동 링크: "workspaces": ["apps/*", "libs/*", "packages/*"]
• Buildless internal packages 도입으로 공유 코드가 TypeScript 소스 파일을 직접 참조하게 변경: "main": "src/index.ts" 지정
• API는 Hono, 클라이언트는 Vite 기반 React로 구성하여 타입 안전성 확보: 클라이언트가 API 타입 직접 import 가능
• Turborepo는 CI 단계에서만 필요한 곳에 제한적으로 적용하여 도구 스택 최소화

Key Takeaway

풀스택 TypeScript 모노레포는 복잡한 빌드 파이프라인 대신 현대적 Node.js의 모듈 해석 능력과 심링크를 활용하면 재빌드 사이클 없이도 개발 생산성을 유지할 수 있다. 아키텍처와 도구 선택의 핵심은 추상적 확장성보다 일일 작업의 편리함을 우선시하는 것이다.