CloudCraft는 실제 클라우드 계정 없이 콘솔형 UI에서 직접 설정을 조작하며 클라우드 아키텍처와 동작을 직관적으로 학습할 수 있도록 돕는 시뮬레이션 플랫폼입니다.
클라우드 서비스에 대한 이론적 지식만으로는 실제 클라우드 인프라 구축이 어려울 수 있습니다. CloudCraft는 실습 환경을 제공하여 Learning by Doing 방식으로 클라우드 서비스를 체험하고 학습할 수 있도록 지원합니다.
- 비용 부담 없음: AWS 계정 없이 무료로 학습 가능
- 대화형 학습: 실제 AWS 콘솔과 유사한 UI로 직접 조작
- 실시간 시각화: 설정에 따른 아키텍처 다이어그램 자동 생성
- 즉각적 피드백: 답안 검증 및 상세한 피드백 제공
- 단계별 학습: Unit 문제부터 복합 Cookbook까지 체계적 커리큘럼
2025.12.08 ~ 26.02.05
AWS 실제 콘솔과 유사한 인터페이스로 다양한 클라우드 서비스를 설정할 수 있습니다.
지원 서비스
- 컴퓨팅: EC2 Instance, Security Group
- 네트워킹: VPC, Subnet, Route Table
- 스토리지: S3 Bucket
- CDN: CloudFront
- 추가 서비스 확장 예정 (IAM, RDS 등)
사용자의 서비스 설정에 따라 React Flow 기반의 인터랙티브한 아키텍처 다이어그램이 자동 생성됩니다.
특징
- 서비스 간 연결 관계 시각화
- 줌 인/아웃 및 패닝 지원
클라우드 서비스 설정을 학습하는 기본 문제입니다.
- 예: "EC2 인스턴스 생성하기", "S3 버킷 만들기"
여러 Unit 문제를 조합한 복합 시나리오 문제입니다.
- 예: "S3 + CloudFront로 정적 웹사이트 배포하기"
- 실무 아키텍처 패턴 학습
- Package Manager:
- Containerization:
- CI/CD:
- Code Quality:
web29-boostcamp/
├── apps/
│ ├── server/ # NestJS Backend
│ │ ├── src/
│ │ │ ├── cookbooks/ # Cookbook 문제 API
│ │ │ ├── problems/ # Problem 문제 API
│ │ │ ├── entities/ # TypeORM 엔티티
│ │ │ ├── migrations/ # DB 마이그레이션
│ │ │ └── seeds/ # 시드 데이터
│ │ └── test/ # 테스트
│ │
│ └── web/ # Next.js Frontend
│ ├── src/
│ │ ├── app/ # App Router 페이지
│ │ ├── components/ # 재사용 컴포넌트
│ │ │ ├── aws-services/ # AWS 서비스 UI
│ │ │ └── diagram/ # 다이어그램 컴포넌트
│ │ ├── contexts/ # React Context
│ │ ├── hooks/ # Custom Hooks
│ │ ├── lib/ # 라이브러리 및 유틸 함수
│ │ └── types/ # TypeScript 타입 정의
│ └── public/
│
├── docker-compose.yml # 프로덕션 배포 설정
├── pnpm-workspace.yaml # Monorepo 설정
└── package.json
- Node.js 20 이상
- pnpm 8 이상
- Docker & Docker Compose (선택사항)
- MySQL 8 이상 (로컬 개발시)
git clone https://github.com/boostcampwm2025/web29-boostcamp.git
cd web29-boostcamppnpm install로컬 개발시에는 기본 포트(Frontend: 3000, Backend: 3001)로 자동 설정되어 별도 환경변수 설정이 필요 없습니다.
Backend (apps/server/.env)
# Database
DB_HOST=localhost
DB_PORT=3306
DB_USERNAME=your_username
DB_PASSWORD=your_password
DB_DATABASE=cloudcraft
# Application (선택사항, 기본값: 3001)
PORT=3001
NODE_ENV=development
FRONTEND_URL=http://localhost:3000# MySQL 데이터베이스 생성
mysql -u root -p
CREATE DATABASE cloudcraft;
# 마이그레이션 실행
cd apps/server
pnpm migration:run
# 시드 데이터 삽입
pnpm seed# 루트 디렉토리에서 전체 실행
pnpm dev
# 또는 개별 실행
pnpm dev:web # Frontend만 실행
cd apps/server && pnpm start:dev # Backend만 실행- Frontend: http://localhost:3000
- Backend: http://localhost:3001/api
# 프로덕션 빌드 및 실행
docker-compose up -d
# 로그 확인
docker-compose logs -f
# 종료
docker-compose down# 전체 테스트
pnpm test
# Frontend 테스트
cd apps/web
pnpm test
pnpm test:watch # Watch 모드
pnpm test:coverage # 커버리지
# Backend 테스트
cd apps/server
pnpm test
pnpm test:e2e # E2E 테스트
pnpm test:cov # 커버리지주요 엔티티 관계:
User (사용자)
↓
Problem (문제)
├── Unit 문제 (독립적)
└── Cookbook 문제
↓
CookbookProblem (연결 테이블)
↓
여러 Unit 문제들
↓
Solution (정답)
상세 스키마는 데이터베이스 설계 에서 확인할 수 있습니다.
main: 메인 브랜치 (직접 push 금지)feat/*: 기능 개발fix/*: 버그 수정refactor/*: 리팩토링docs/*: 문서 작업
| 타입 | 설명 |
|---|---|
| feat | 새로운 기능 정의 또는 추가, 새로운 타입 정의 |
| add | 이미지·아이콘 등 리소스 파일 추가 |
| refactor | 코드 리팩토링 또는 구조 개선 (파일/폴더 이동 포함) |
| design | UI 스타일링 (CSS 작업 등) |
| fix | 버그 수정 |
| del | 파일 삭제 |
| docs | 문서 수정 (README 등) |
| test | 테스트 코드 작성 |
| gitfix | .gitignore 수정 |
| chore | 주석 추가/제거, 포맷팅, 세미콜론 보완 등 코드 작동에 영향 없는 정리 작업 |
| setting | 프로젝트 설정 관련 작업 (패키지 설치 등) |
| deploy | 배포 관련 작업 |
- 이슈 생성 및 할당
- 브랜치 생성
- 코드 작성 및 테스트
- PR 생성
- 최소 1명의 리뷰 승인 필요
- CI 테스트 통과 후 머지
🐥 러닝바이두잉(Learning by Doing)을 실천하는 팀 러바두 입니다!
| J047_김승현 | J057_김용준 | J254_조윤주 | J303_김동규 |
|---|---|---|---|
vvzvvv |
shahhenshah |
zooyaam |
caffesale |
이 프로젝트는 부스트캠프 웹·모바일 10기 그룹 프로젝트입니다.
CloudCraft로 클라우드 여정을 시작하세요! ☁️✨
Made by Team 러바두