Home/javascript-2주완성/day09

← Day 8 · Day 10 →

Day 9이벤트와 상호작용

이 문서 서버의 테마 토글(다크/라이트 전환)이 정확히 오늘 배울 걸로 만들어져 있다 — serve.ts의 THEME_INIT 스크립트를 다시 봐도 좋다.

1. addEventListener

button.addEventListener("click", () => {
  console.log("클릭됨");
});

button.addEventListener("click", (event) => {
  event.preventDefault();     // 기본 동작 막기 (예: 폼 제출, 링크 이동)
  console.log(event.target);   // 실제로 클릭된 요소
});
인라인 onclick="..." 속성은 쓰지 않는다 — addEventListener를 쓰면 한 요소에 리스너를 여러 개 붙일 수 있고, 관심사 분리도 된다.

2. 이벤트 위임 (delegation)

리스트 항목이 나중에 동적으로 추가돼도 동작하게 하려면, 각 항목이 아니라 부모에 리스너 하나만 건다.

list.addEventListener("click", (event) => {
  const item = event.target.closest("li");   // 클릭된 지점에서 가장 가까운 li 찾기
  if (!item) return;                            // li 바깥(여백 등) 클릭이면 무시
  console.log("클릭된 항목:", item.textContent);
});

3. localStorage

localStorage.setItem("theme", "dark");
localStorage.getItem("theme")     // "dark" — 문자열만 저장 가능
localStorage.removeItem("theme");

// 객체를 저장하려면 JSON으로 직렬화 (Day 12에서 다시 다룸)
localStorage.setItem("prefs", JSON.stringify({ theme: "dark" }));
const prefs = JSON.parse(localStorage.getItem("prefs") ?? "{}");

🎯 실습 과제 — _submissions/day09.js

과제 1. 테마 토글
setupThemeToggle(button): 버튼 클릭 시 localStorage의 "theme" 값을 "dark" ↔ "light"로 토글하고, document.documentElement.style.setProperty("--primary-background-color", ...)로 반영한다 (dark일 땐 "#222", light일 땐 "white").

function setupThemeToggle(button) {
  // TODO: addEventListener("click", ...) 안에서 처리
}

과제 2. 위임된 리스트 클릭
setupListDelegation(list, onItemClick): list 안의 li를 클릭하면(현재 있든 나중에 추가되든) onItemClick(text)를 그 li의 텍스트로 호출한다. 이벤트 위임 패턴을 써야 한다 (각 li에 개별 리스너 X).

과제 3. 저장된 설정 불러오기
loadPrefs(): localStorage의 "prefs" 키를 읽어 JSON 파싱해서 리턴하되, 값이 없거나 파싱 실패하면 { theme: "dark" }를 기본값으로 리턴한다.

과제 4 (도전). 디바운스
debounce(fn, delay): 연속 호출 시 마지막 호출 후 delayms가 지나야 실제로 fn이 실행되는 함수를 리턴한다. (검색창 입력 이벤트에 흔히 쓰는 패턴, setTimeout/clearTimeout 사용)

✅ 다 작성했으면: 
cd ~/Documents/javascript-2주완성
bun _grade.ts day09

Day 10: 비동기 JS: Promise →