LocalStorage를 활용한 자바스크립트 할 일 목록(Todo List) 만들기

우리가 웹 서핑을 하다 보면 아이디를 저장하거나, 장바구니에 담은 물건이 다음날에도 그대로 남아있는 것을 볼 수 있습니다. 반면, 우리가 지난번 만든 스톱워치는 페이지를 새로고침하는 순간 모든 기록이 0으로 돌아갔죠. 오늘 만들 자바스크립트 할 일 목록(To-do List)은 바로 이 차이를 해결하는 프로젝트입니다. 앞서 우리가 만든 ‘OX 퀴즈‘와 ‘스톱워치’가 브라우저의 현재 상태(State)를 보여주는 데 집중했다면, 이번 프로젝트는 … 더 읽기

SetInterval과 밀리초 계산법을 익히는 자바스크립트 스톱워치

지난 포스팅에서 자바스크립트로 OX 퀴즈를 만들며 Timer API의 기초를 다뤄보았습니다. 많은 분이 타이머 기능에 관심을 가져주셨는데요. 오늘은 그 연장선상에서 조금 더 정밀한 ‘자바스크립트 스톱워치(Stopwatch)’를 만들어보려 합니다. 단순히 1초씩 줄어드는 타이머와 달리, 스톱워치는 0.01초(밀리초) 단위까지 실시간으로 화면에 뿌려줘야 합니다. 이 과정에서 우리는 자바스크립트의 비동기 처리와 메모리 관리, 그리고 더 나아가 사용자 경험(UX)을 위한 버튼 상태 제어까지 … 더 읽기

이벤트 위임 패턴으로 최적화한 자바스크립트 OX 퀴즈 게임

자바스크립트의 기초인 DOM 조작과 Timer API를 활용해 자바스크립트 OX 퀴즈를 직접 만들어 보세요. 5초 타이머 애니메이션 구현부터 정답 판별 로직까지, 실전 코딩 실력을 키울 수 있는 상세한 가이드를 제공합니다.