---

📌 Todolist / Shoppinglist Script 분리

<script src="./01_shoppinglist.js" defer></script>

• defer

  • HTML 파싱 중단 없이 스크립트 파일 다운로드
  • HTML 파싱 완료 후 실행
  • HTML에 작성된 순서대로 실행 보장

---

📌 Todolist 복습

• localStorage 저장 방식

  • key - value 쌍
  • value에는 다양한 자료형 가능

• todolist 구조

  • key: "todos"
  • value: 배열
  • 배열 요소: JS 객체

⚠️ 모든 localStorage value가 배열일 필요는 없음

---

📌 저장 방식 관련 개념

• autosave → 일정 시간 지연 후 저장 (afterdelay)
• onFocusChange → 입력창 focus 변경 시 저장

---

📌 로그인 & 회원가입 기능 구현 목표

• UI: HTML + CSS
• 로직: JavaScript (데이터 저장 + 페이지 이동)

---

📂 파일 구조 (5개)

1. signin.html
2. signup.html
3. style.css (공통 규격 → id/class 활용)
4. signin.js
5. signup.js

---

📌 요구사항

1. 페이지 이동

• 로그인 페이지 → "회원가입" 클릭 시 → 회원가입 페이지 이동
• 회원가입 페이지 → "로그인" 클릭 시 → 로그인 페이지 이동
• 구현: window.location.href

2. CSS 레이아웃

• Flexbox로 폼 화면 중앙 배치
• 입력 필드와 버튼 간격 균등 배치
• 로그인/회원가입 페이지 스타일 통일

---