---

📝 JavaScript 학습 로드맵 (실습 중심)

1. 기초 문법 (완료 ✅)

• 변수, 상수
• 조건문, 반복문
• 함수

---

2. 내장 객체 (이론 → 실습)

• String: length, indexOf, slice, split, toUpperCase
• Array: push, pop, map, filter, forEach, join
• Object: key-value 구조, Object.keys, Object.values
• Date: 현재 시각, 특정 날짜 생성
• Math: random, floor, ceil

➡️ 실습 파일 예시

• 02_js_string_methods.html / .js → 문자열 다루기
• 03_js_array_methods.html / .js → 배열 메서드 출력해보기

---

3. 고급 문법 (심화 ✅)

• 익명 함수, 화살표 함수
• 콜백 함수
• 스코프, 호이스팅
• 클로저 기초

---

4. DOM(Document Object Model) (실습 필수)

• document.getElementById / querySelector
• innerText, innerHTML
• style 변경
• 요소 생성/추가: createElement, appendChild
• 요소 삭제: removeChild

➡️ 실습 파일 예시

• 04_dom_basic.html / .js → 버튼 클릭 시 <p> 추가하기
• 05_dom_delete.html / .js → 버튼 누르면 요소 삭제

---

5. 이벤트 (실습 필수)

• onclick, addEventListener
• 입력창 이벤트: input, change, keyup
• 마우스 이벤트: mouseover, mouseout
• 폼 이벤트: submit

➡️ 실습 파일 예시

• 06_event_click.html / .js → 버튼 클릭 시 색 변경
• 07_event_input.html / .js → 입력값을 실시간 표시

---

6. Web API

• LocalStorage: setItem, getItem, removeItem
• SessionStorage: 브라우저 종료 시 데이터 삭제
• 차이점 확인

➡️ 실습 파일 예시

• 08_localstorage_basic.html / .js → 입력값 저장 후 새로고침 시 유지
• 09_sessionstorage_basic.html / .js → 입력값 새로고침 시 사라짐

---

7. 프로젝트: Todo List 만들기

단계별 구현

1. 입력창 값 받아오기 (input.value)
2. 버튼 클릭 시 리스트 추가 (appendChild)
3. 완료 체크 기능 (CSS 클래스 토글)
4. 삭제 버튼 추가 (removeChild)
5. LocalStorage 저장/불러오기

➡️ 실습 파일 예시

• todo_step1_input.html / .js → 입력값만 콘솔 출력
• todo_step2_add.html / .js → 리스트 추가
• todo_step3_done.html / .js → 완료 체크
• todo_step4_delete.html / .js → 삭제 기능
• todo_step5_storage.html / .js → LocalStorage 적용