로컬 개발

Docker 없이 개별 앱을 로컬에서 실행하는 방법입니다.

전체 명령어

# 모든 앱 동시 실행 (turbo)
pnpm dev

# 개별 앱
pnpm --filter web dev
pnpm --filter api dev
pnpm --filter docs dev

web 앱 개발

pnpm --filter web dev

• 포트: 3001
• HMR: Vite hot reload
• TanStack Router: src/routes/ 파일 추가/수정 시 routeTree.gen.ts 자동 갱신

인증 API를 호출하려면 api도 함께 실행하고 .env.dev의 VITE_API_URL이 올바른지 확인하세요.

타입 체크 & 린트

pnpm --filter web check-types
pnpm --filter web lint
pnpm --filter web build

api 앱 개발

PostgreSQL과 OAuth/JWT 환경 변수가 필요합니다.

# DB만 Docker로
docker compose up db -d

# Prisma 스키마 적용
cd apps/api
DATABASE_URL=postgresql://postgres:example_password@localhost:5432/mydb \
  pnpm exec prisma generate
DATABASE_URL=postgresql://postgres:example_password@localhost:5432/mydb \
  pnpm exec prisma migrate deploy

# API 실행
DATABASE_URL=postgresql://postgres:example_password@localhost:5432/mydb \
GOOGLE_CLIENT_ID=... \
GOOGLE_CLIENT_SECRET=... \
JWT_SECRET=... \
  pnpm --filter api dev

• 포트: 3000
• watch 모드: nest start --watch

Docker Compose로 api를 띄운 경우 pnpm docker:db:setup으로 Prisma 작업을 대신할 수 있습니다.

docs 앱 개발

pnpm --filter docs dev

• 포트: 8000
• 마크다운 수정 시 즉시 반영

공유 packages 빌드

@repo/api 등 workspace 패키지 변경 시:

pnpm --filter @repo/api build

Turbo는 build 태스크에서 dependsOn: ["^build"]로 의존 패키지를 자동 빌드합니다.

개발 팁

Dev Canvas API

개발 모드에서 injectDevCanvasApi()가 window.devCanvas를 등록합니다. 브라우저 콘솔에서 store, canvas, 선택 노드 등을 디버깅할 수 있습니다.

devCanvas.store.app.getState().nodes;
devCanvas.getSelectedNodeIds();
devCanvas.getNodeById('<node-id>');
devCanvas.canvas?.getObjects();

TanStack Router Devtools

개발 빌드 하단에 Router Devtools 패널이 표시됩니다.

Zustand Devtools

Redux DevTools Extension으로 app-store 상태를 inspect할 수 있습니다.

다음 단계

Docker 개발 →