웹개발 로드맵

graph TD
    Start["웹개발 시작"] --> Backend{"백엔드 선택"}
    Start --> Frontend["프론트엔드"]
    
    %% Java 기반
    Backend --> Java["Java 기반"]
    Java --> JavaCore["Java 기초<br/>- 문법, OOP<br/>- 컬렉션, 스트림"]
    JavaCore --> SpringBoot["Spring Boot"]
    SpringBoot --> JPA["Spring Data JPA<br/>- Hibernate<br/>- QueryDSL"]
    SpringBoot --> MyBatis["MyBatis<br/> MyBatis Plus"]
    JPA --> Security["Spring Security<br/>- OAuth2<br/>- JWT"]
    Security --> JavaAdvanced["심화<br/>- Spring Cloud<br/>- MSA<br/>- Kafka"]
    
    %% Python 기반
    Backend --> Python["Python 기반"]
    Python --> PythonCore["Python 기초<br/>- 문법, 자료구조<br/>- 함수형 프로그래밍"]
    PythonCore --> Django["Django / FastAPI"]
    Django --> PythonORM["ORM<br/>- SQLAlchemy<br/>- Django ORM"]
    PythonORM --> PythonAsync["비동기<br/>- asyncio<br/>- Celery"]
    PythonAsync --> PythonAI["AI/ML<br/>- TensorFlow<br/>- LangChain"]
    
    %% Node 기반
    Backend --> Node["Node 기반"]
    Node --> NodeCore["Node.js 기초<br/>- JavaScript<br/>- npm"]
    NodeCore --> Express["Express / NestJS"]
    Express --> NodeDB["ORM/DB<br/>- Prisma<br/>- TypeORM<br/>- Mongoose"]
    NodeDB --> NodeRT["실시간<br/>- Socket.io<br/>- WebSocket"]
    NodeRT --> NodeAdv["심화<br/>- GraphQL<br/>- BullMQ"]
    
    %% PHP 기반
    Backend --> PHP["PHP 기반"]
    PHP --> PHPCore["PHP 기초<br/>- 문법, OOP"]
    PHPCore --> Laravel["Laravel"]
    Laravel --> PHPDB["Eloquent ORM<br/>- MySQL"]
    PHPDB --> PHPAdv["심화<br/>- Composer<br/>- RESTful API"]
    
    %% Frontend
    Frontend --> HTML["HTML/CSS/JS"]
    HTML --> FrontChoice{"프레임워크 선택"}
    
    %% React 경로
    FrontChoice --> React["React"]
    React --> TypeScript["TypeScript"]
    TypeScript --> NextJS["Next.js"]
    NextJS --> StateManage["상태관리<br/>- Redux<br/>- Zustand"]
    StateManage --> ReactQuery["React Query<br/>- 데이터 페칭"]
    ReactQuery --> UILib["UI 라이브러리<br/>- Tailwind<br/>- MUI"]
    
    %% Vue 경로
    FrontChoice --> Vue["Vue 기반"]
    Vue --> VueCore["Vue 기초<br/>- 컴포지션 API<br/>- 리액티비티"]
    VueCore --> Nuxt["Nuxt.js"]
    Nuxt --> VueState["상태관리<br/>- Pinia<br/>- Vuex"]
    VueState --> VueUI["UI 라이브러리<br/>- Vuetify<br/>- Element Plus"]
    
    %% Infra
    JavaAdvanced --> Infra["인프라"]
    PythonAI --> Infra
    NodeAdv --> Infra
    PHPAdv --> Infra
    UILib --> Infra
    VueUI --> Infra
    
    Infra --> Docker["Docker<br/>- 컨테이너화<br/>- Docker Compose"]
    Docker --> AWS["AWS<br/>- EC2, S3, RDS<br/>- Lambda, CloudFront"]
    AWS --> K8s["Kubernetes<br/>- 오케스트레이션<br/>- Helm"]
    K8s --> CICD["CI/CD<br/>- GitHub Actions<br/>- Jenkins"]
    CICD --> Monitor["모니터링<br/>- Prometheus<br/>- Grafana"]
    Monitor --> End["풀스택 개발자"]
    
    %% Common Skills
    Infra --> Common["공통 스킬"]
    Common --> Redis["Redis / Kafka"]
    Common --> Elastic["ElasticSearch"]
    Common --> SecSkill["보안<br/>- HTTPS<br/>- CORS"]
    
    style Start fill:#e1f5ff
    style End fill:#c8e6c9
    style Java fill:#ffccbc
    style Python fill:#fff9c4
    style Node fill:#c5e1a5
    style PHP fill:#d1c4e9
    style Frontend fill:#f8bbd0
    style Vue fill:#e1bee7
    style Infra fill:#b2dfdb