Canvas를 활용한 인터랙티브 JavaScript 마우스 트래커 제작기

안녕하세요! 오늘은 [자바스크립트 사다리 타기] 프로젝트에 이어서 웹 페이지에 생동감을 불어넣는 것은 물론, 방문자의 시선을 단번에 사로잡을 수 있는 ‘캔버스 기반의 인터랙티브 JavaScript 마우스 트래커(Visual Particle System)’를 만들어 보았습니다. 그동안 다양한 자바스크립트 프로젝트를 진행하며 기초를 다져왔다면, 이번에는 Canvas API의 심화 기능을 활용해 한 단계 더 높은 수준의 인터랙션을 구현해 볼 차례입니다. 단순히 클릭에 반응하는 단계를 … 더 읽기

재귀 함수와 배열 셔플 알고리즘으로 만든 자바스크립트 사다리 타기 복불복 게임

안녕하세요! 18번째 포스팅[스크래치 복권 만들기]와 14번째 포스팅[타자 게임]등과 같이 평소 웹 게임 구현에 관심이 많았던 터라, 이번에는 고전적이면서도 로직의 정교함이 요구되는 ‘자바스크립트 사다리 게임’을 주제로 잡았습니다. 단순히 위에서 아래로 내려가는 게임이 아니라, 대각선 경로가 포함된 복잡한 구조를 어떻게 하면 자바스크립트와 Canvas API로 완벽하게 구현할 수 있을지 고민한 기록을 남겨봅니다. 1. 설계: 사용자 경험(UX) 중심의 레이아웃 … 더 읽기

효율적인 마케팅을 위한 자바스크립트 키워드 조합기 자동 조합 툴 제작

안녕하세요! 어느덧 프로젝트가 [19번째 비디오 플레이어 만들기]를 지나 20번째에 접어들었습니다. 이번에는 마케팅이나 SEO 작업을 할 때 가장 번거로운 과정 중 하나인 ‘키워드 조합’을 자동화해 줄 수 있는 자바스크립트 키워드 조합기를 만들어 보았습니다. 시중에는 이미 수많은 조합기가 존재하지만, 실제 업무에서 사용하다 보면 미세한 불편함들이 발목을 잡곤 합니다. 예를 들어, 조합 순서를 갑자기 바꾸고 싶거나, 특정 항목만 … 더 읽기

정규표현식 활용: 글자 수 세기 및 단어 빈도 자바스크립트 텍스트 분석기 제작 가이드

안녕하세요! 저번 [15번째 프로젝트: 객체 매핑으로 설계한 자바스크립트 단위 변환기 (Unit Converter)] 글에 이어서 오늘은 자바스크립트 텍스트 분석기를 제작하여 블로그를 작성해보려고 합니다. 우리는 일상 속에서 수많은 텍스트를 마주합니다. 블로그 포스팅을 작성할 때, 자기소개서를 준비할 때, 혹은 중요한 리포트를 제출할 때 우리는 항상 ‘글자 수’라는 물리적인 제약과 ‘단어 선택’이라는 질적인 고민을 동시에 하게 됩니다. 단순히 글자 … 더 읽기