🚀 JavaScript 강의 & 프로젝트 모음

JavaScript 문법 정리부터 실전 프로젝트까지
학습 과정과 포트폴리오를 위한 종합 자료집

---

📋 목차

• 📚 강의 노트
• 🎮 주요 프로젝트
• 💡 학습 성과
• 🛠️ 사용 기술
• 📁 폴더 구조
• 🚀 시작하기

---

📚 강의 노트

📅 날짜	📖 주제	🔗 링크	📝 설명
2025-06	개인 과제 프로젝트	📂 2025_Assignment	실전 프로젝트 모음집
2025-06-01	jQuery 기초 학습	📂 250601_jQuery	DOM 조작 & 이벤트 처리 실습
2025-06-05	REST API 학습	📂 202506_REST	CRUD 작업 & HTTP 통신

💡 각 폴더에는 상세한 실습 예제, 코드 설명, 그리고 개별 README가 포함되어 있습니다.

---

🎮 주요 프로젝트

🏇 Horse Racing Game

• 기술: jQuery, CSS3, JavaScript
• 기능: 키보드 조작 경마 게임, 난이도 선택, 실시간 순위
• 특징: 게임 상태 관리, 랜덤 AI, 사용자 상호작용

📝 Todo REST API Application

• 기술: XMLHttpRequest, JSON Server, jQuery
• 기능: CRUD 작업, 필터링, 실시간 데이터 동기화
• 특징: RESTful API 패턴, 데이터 검증, 동적 UI

🎯 jQuery DOM 조작 실습

• 기술: jQuery, HTML5, CSS3
• 기능: 동적 요소 생성/삭제, 스타일 변경, 데이터 관리
• 특징: 이벤트 기반 조작, 학생 성적표 시스템

---

💡 학습 성과

🏆 핵심 역량	📈 습득 기술
Frontend 개발	HTML5, CSS3, JavaScript
라이브러리 활용	jQuery 3.7.1
API 통신	XMLHttpRequest, REST API
게임 개발	실시간 상호작용, 상태 관리
데이터 관리	JSON 처리, CRUD 작업

🎯 프로젝트별 학습 포인트

🏇 Horse Racing Game

• ✅ 게임 루프 및 상태 관리
• ✅ 키보드 이벤트 처리
• ✅ setInterval을 활용한 애니메이션
• ✅ 난이도별 게임 밸런스 조절

📝 Todo REST Application

• ✅ RESTful API 설계 및 구현
• ✅ HTTP 메서드별 적절한 사용
• ✅ 데이터 검증 및 오류 처리
• ✅ 동적 테이블 생성 및 관리

🎯 jQuery DOM 실습

• ✅ jQuery 선택자 및 메서드 활용
• ✅ 이벤트 기반 프로그래밍
• ✅ 동적 UI 생성 및 조작
• ✅ 배열/객체 기반 데이터 처리

---

🛠️ 사용 기술

Frontend

Tools & Others

---

📁 폴더 구조

📦 JavaScript-Learning-Repository
├── 📂 2025_Assignment/          # 개인 과제 프로젝트
│   ├── 🏇 Horse Racing Game
│   └── 📄 README.md
├── 📂 250601_jQuery/            # jQuery 학습 자료
│   ├── 🎯 DOM 조작 실습 (4개)
│   └── 📄 README.md
├── 📂 202506_REST/              # REST API 학습
│   ├── 📝 Todo CRUD Application
│   └── 📄 README.md
└── 📄 README.md                 # 메인 저장소 소개

---

🚀 시작하기

📋 사전 요구사항

• 모던 웹 브라우저 (Chrome, Firefox, Safari, Edge)
• Node.js (REST API 프로젝트용)
• JSON Server (REST API 프로젝트용)

⚡ 빠른 시작

# 저장소 클론
git clone https://github.com/your-username/javascript-learning-repository.git

# 프로젝트 폴더로 이동
cd javascript-learning-repository

# 원하는 프로젝트 폴더로 이동하여 HTML 파일 실행
# 예: Horse Racing Game
cd 2025_Assignment
# project_0605.html을 브라우저에서 열기

# REST API 프로젝트의 경우
cd 202506_REST
npm install -g json-server
json-server --watch todos.json --port 7777
# ex.36.asyncprogramming2.html을 브라우저에서 열기

---

🤝 기여하기

이 저장소는 개인 학습 목적으로 제작되었지만, 개선 사항이나 제안사항이 있으시면 언제든 환영합니다!

1. 🍴 Fork the Project
2. 🔄 Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. 💾 Commit your Changes (git commit -m 'Add some AmazingFeature')
4. 📤 Push to the Branch (git push origin feature/AmazingFeature)
5. 🔍 Open a Pull Request

---

📞 연락처

개발자: [Your Name]
이메일: your.email@example.com
GitHub: @your-username

---

📄 라이선스

이 프로젝트는 학습 목적으로 제작되었으며, MIT License를 따릅니다.

---

⭐ 이 저장소가 도움이 되었다면 Star를 눌러주세요! ⭐