digda/
├── apps/
│   ├── client/               # SvelteKit 프론트엔드
│   │   ├── src/
│   │   │   ├── lib/
│   │   │   │   └── socket.js
│   │   │   ├── routes/
│   │   │   │   ├── +layout.svelte
│   │   │   │   └── +page.svelte
│   │   │   └── app.css
│   │   ├── package.json
│   │   ├── svelte.config.js
│   │   └── vite.config.js
│   │
│   └── server/              # Node.js 백엔드
│       │   ├── lib/
│       │   │   └── server_socket.js
│       ├── index.js
│       └── package.json
│
├── packages/                # 공유 패키지
│   ├── eslint-config/
│   └── tsconfig/
│
├── pnpm-workspace.yaml     # 워크스페이스 설정
├── package.json            # 루트 패키지
└── turbo.json             # Turborepo 설정

폴더구조 정의

Turborepo는 모노레포 환경에서 여러 패키지와 애플리케이션을 효율적으로 관리하고 빌드할 수 있도록 도와주는 도구

1. 캐싱: 빌드와 테스트 결과를 캐싱하여, 변경되지 않은 코드에 대한 작업을 건너뜁니다. 이를 통해 빌드 시간을 단축할 수 있습니다.
2. 병렬 처리: 종속성을 기반으로 작업을 병렬로 실행하여, 전체 작업의 속도를 향상시킵니다.
3. 의존성 그래프: 작업 간의 의존성을 자동으로 분석하여, 필요한 작업만 실행합니다.
4. 워크스페이스 관리: 모노레포 패턴을 쉽게 관리할 수 있도록 도와줍니다. 여러 애플리케이션과 패키지를 하나의 리포지토리에서 관리할 수 있습니다.

apps는 현재 front / back 구분하여 관리 packages는 apps에서 공유해야할 파일을 관리하며, turbo를 이용하여 공유

배포 시 이점

apps 별로 경로를 지정하여 배포 가능 그럼에도 최상단 repo에서 관리하기 때문에 packages의 각종 컴포넌트나 util을 공유할 수 있어 독립성을 유지하며 쉬운 관리가 가능해짐

스벨트킷을 사용하면서 node.js server를 둔 점

스벨트킷은 full-stack framework인데 node.js 서버를 추가로 고용한 것은 serverless 환경에서 배포 시 서버 유실문제를 방지하기 위해서였다. 처음엔 vite.config에 server를 두고 연결하였는데 이는 로컬과 배포 시 코드의 상이를 가져왔다.

svelteKit에서는 최신 기술을 이용하되 socket에 관하여서는 csr을 유지하고 필요시 restAPI와 route기능을 활용하기 위해 사용한다.

웹소켓 연결

node.js 서버에 socket을 열고 sveltekit이 첫페이지를 로딩하는 순간 스벨트킷(sveltekit)에서 (onMount) connecting 한다.

다음은 웹소켓 연결편으로