HoshCode

HoshMe

앱 정보

HoshCode는 복잡한 기술 개념을 수동적인 비디오나 텍스트가 아닌, 인터랙티브 애니메이션, 애니메이션 다이어그램, 실습을 통해 가르치는 시각적 중심의 소프트웨어 개발 학습 플랫폼입니다.

🎨 시각적 학습 엔진
튜토리얼을 시청하는 대신 애니메이션 시각화를 통해 탐색해 보세요.
• JavaScript 루프 시각화 도구 — 루프 실행 시 변수가 실시간으로 업데이트되는 것을 확인하세요.
• HTTP 요청 라이프사이클 — 앱, 백엔드, 데이터베이스를 통해 요청이 흐르는 과정을 확인하세요.
• React 컴포넌트 트리 — 컴포넌트를 탭하여 속성을 검사하고 상태가 전파되는 것을 확인하세요.
• 데이터베이스 관계 — 대화형 테이블 검사를 통해 ERD 다이어그램을 탐색하세요.
• CI/CD 파이프라인 — 전체 배포 프로세스를 단계별로 시각화하세요.

⏯️ 대화형 컨트롤
모든 레슨에는 다음이 포함됩니다.
• 정확한 탐색을 위한 재생/일시정지/단계별 컨트롤
• 학습 속도 조절(0.5배~2배)
• 시각화를 다시 시작할 수 있는 재설정 기능
• 코드 스니펫이 포함된 애니메이션 설명

📚 종합 코스
HoshCode는 두 가지 체계적인 학습 경로를 제공합니다.

1. AI 기반 모바일 앱 개발 (12주)

JavaScript → TypeScript → React Native → Expo → 내비게이션 → 상태 관리 → API → 인증 → 기기 기능 → 테스트 → 플레이 스토어 배포 → AI 도구 → 캡스톤 프로젝트

2. AI 기반 풀스택 개발 (16주)
프런트엔드: HTML → CSS → JavaScript → TypeScript → React
백엔드: Python → Django → PostgreSQL → REST API
DevOps: Docker → 클라우드 배포 → CI/CD → 보안
추가 사항: AI 도구 통합 → 캡스톤 프로젝트

🔒 안전하고 개인화된 학습
• JWT 토큰을 사용한 안전한 인증
• 모든 강의의 학습 진행 상황 추적
• 개인화된 학습 대시보드
• 다운로드한 강의 오프라인 접속
• 다크/라이트 테마 지원

💡 시각적 학습의 장점

연구에 따르면 시각적 학습은 학습 효과를 65% 향상시킵니다. HoshCode는 추상적인 프로그래밍 개념을 구체적이고 탐구 가능한 형태로 제시하여 코드의 기능뿐만 아니라 작동 원리까지 이해할 수 있도록 돕습니다.

다음과 같은 분들에게 적합합니다:
✓ 코딩을 처음 시작하는 초보자
✓ IT 분야로 전직하려는 직장인
✓ 실습 위주의 학습을 원하는 학생
✓ 최신 프레임워크를 익히고자 하는 전문가

지금 바로 시각적인 학습을 시작하세요. HoshCode를 지금 다운로드하세요!

새로운 기능

Five fully interactive lessons are implemented in `src/engine/visualizers/`:
1. JavaScript Loop Visualizer
- Animates array elements as a `for` loop iterates
- Shows index, sum, and condition variables updating in real time
- Color-coded loop phases: init, check, body, increment, done
- SVG loop flow diagram with animated active phase
2. HTTP Request Lifecycle
- Sequence diagram: Mobile App → Django → PostgreSQL → response
- Animated message arrows between actors