Skip to content

README.md

Latest commit

 

History

History
194 lines (137 loc) · 6.15 KB

README.md

File metadata and controls

194 lines (137 loc) · 6.15 KB
Raw

🚀 JavaScript 강의 & 프로젝트 모음

JavaScript jQuery HTML5 CSS3

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

HTML5 CSS3 JavaScript jQuery

Tools & Others

JSON Git VS Code

📁 폴더 구조

📦 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를 눌러주세요! ⭐

Thank You