자바스크립트를 활용한 다양한 미니 프로젝트 실습과 핵심 코드 해설을 다룹니다.
우리가 웹 서핑을 하다 보면 아이디를 저장하거나, 장바구니에 담은 물건이 다음날에도 그대로 남아있는 것을 볼 수 있습니다. 반면, 우리가 지난번 만든 스톱워치는 페이지를 새로고침하는 순간 모든 기록이 0으로 돌아갔죠. 오늘 만들 자바스크립트 할 일 목록(To-do List)은 바로 이 차이를 해결하는 프로젝트입니다. 앞서 우리가 만든 ‘OX 퀴즈’와 ‘스톱워치’가 브라우저의 현재 상태(State)를 보여주는 데 집중했다면, 이번 프로젝트는 … 더 읽기
지난 포스팅에서 자바스크립트로 OX 퀴즈를 만들며 Timer API의 기초를 다뤄보았습니다. 많은 분이 타이머 기능에 관심을 가져주셨는데요. 오늘은 그 연장선상에서 조금 더 정밀한 ‘자바스크립트 스톱워치(Stopwatch)’를 만들어보려 합니다. 단순히 1초씩 줄어드는 타이머와 달리, 스톱워치는 0.01초(밀리초) 단위까지 실시간으로 화면에 뿌려줘야 합니다. 이 과정에서 우리는 자바스크립트의 비동기 처리와 메모리 관리, 그리고 더 나아가 사용자 경험(UX)을 위한 버튼 상태 제어까지 … 더 읽기
자바스크립트의 기초인 DOM 조작과 Timer API를 활용해 자바스크립트 OX 퀴즈를 직접 만들어 보세요. 5초 타이머 애니메이션 구현부터 정답 판별 로직까지, 실전 코딩 실력을 키울 수 있는 상세한 가이드를 제공합니다.