이 저장소는 자바스크립트의 핵심 엔진 동작 원리와 인터랙티브 웹 디자인을 심도 있게 학습하며 제작한 프로젝트들의 모음입니다.
단순한 기능 구현을 넘어 상태 관리 최적화, 비동기 데이터 흐름 제어, 이벤트 위임 등 브라우저 환경에서의 효율적인 렌더링과 유지보수 가능한 코드 설계를 중점적으로 다루었습니다.
- 주제: 외부 API 연동 기반 실시간 타자 연습 서비스
- 핵심: 비동기 코드(
async/await) 전환 및 상태 객체(gameState) 중심의 데이터 흐름 설계. - 기능: Random Word API 실시간 데이터 바인딩, 입력 검증 로직 최적화, 로딩 상태 제어.
- 주제: 그리드 시스템과 충돌 알고리즘 기반의 퍼즐 게임
- 핵심: 2차원 배열 좌표계 매핑 및 **선언적 배열 메서드(
every,some)**를 활용한 로직 단순화. - 기능: 벽/오브젝트 충돌 감지 엔진, 라인 클리어 및 데이터 동기화, 키보드 인터랙션 객체 매핑.
3. PlayTune 🎵
- 주제: 오디오 API 제어 및 대규모 플레이리스트 관리 시스템
- 핵심: 메모리 효율을 극대화하는 이벤트 위임(Event Delegation) 구조 및 오디오 상태 동기화.
- 기능: HTML5 Audio API 커스텀 컨트롤, 셔플/반복 재생 알고리즘, 실시간 프로그레스 바 스트리밍 연동.
4. CSS 3D Lab 🧪
- 주제: 3D Transform 기반의 인터랙티브 가상 공간
- 핵심: 수학적 계산을 통한 Cylinder Shape(8면체) 공간 설계 및 하드웨어 가속(GPU) 최적화.
- 기능:
preserve-3d계층 구조 설계, 비디오 배경 최적화, 마우스 호버에 따른 동적 인터랙션.
- State Management: 전역 변수 파편화를 방지하기 위해 상태 객체를 도입하여 "데이터 기반 UI 렌더링" 원칙을 실습했습니다.
- Asynchronous Logic:
.then()체이닝의 한계를 극복하기 위해async/await와 예외 처리를 도입, 가독성 높은 비동기 흐름을 구축했습니다. - Performance & Efficiency: 이벤트 리스너를 최소화하는 이벤트 위임 패턴과 DOM 리플로우를 고려한 스타일 제어를 통해 성능 최적화를 고민했습니다.