vibe-first-app

간단한 To-Do 메모 앱 예제 프로젝트입니다.
HTML + CSS + JavaScript만으로 동작하며, 브라우저 localStorage를 사용해 메모를 저장합니다.

파일 구성

• todo.html: To-Do 앱 전체 구현(마크업, 스타일, 로직 포함)
• intro.html, hello.html: 기존 예제 페이지

기술 스택

• HTML5: 앱 구조(입력 폼, 목록, 빈 상태 문구)
• CSS3: 심플한 카드 UI, 버튼 스타일, 반응형 레이아웃
• Vanilla JavaScript (ES6+): 항목 추가/삭제, 렌더링, 저장/복원 로직
• Web Storage API (localStorage): 새로고침 후 데이터 유지

구현 기능

1. 메모 입력 후 추가 버튼(또는 Enter)으로 목록에 항목 추가
2. 각 항목에 삭제 버튼 제공
3. 새로고침 이후에도 기존 메모 유지 (localStorage)
4. 메모가 없을 때 빈 상태 안내 문구 표시

핵심 동작 방식

1) 상태 관리

• 메모 데이터는 todos 배열로 관리합니다.
• 항목 구조 예시:
  • id: 문자열(생성 시각 기반 고유값)
  • text: 메모 내용

2) 추가 로직

• 폼 submit 이벤트에서 기본 새로고침을 막습니다.
• 입력값을 trim()으로 정리한 뒤, 비어있지 않으면 새 항목을 생성합니다.
• 새 항목을 배열 맨 앞에 추가(unshift)하고 저장/렌더링을 실행합니다.

3) 삭제 로직

• 각 항목의 삭제 버튼 클릭 시 해당 id를 기준으로 필터링하여 제거합니다.
• 제거 후 localStorage를 갱신하고 다시 렌더링합니다.

4) 저장/복원 로직

• 저장: JSON.stringify(todos)로 직렬화해 localStorage에 저장
• 복원: 페이지 로드 시 JSON.parse()로 불러오고 배열 유효성 검사
• 파싱 오류 발생 시 빈 배열로 안전하게 처리

반응형 UI 포인트

• 기본 화면: 입력창 + 추가 버튼을 가로 배치
• 작은 화면(max-width: 520px)에서는 세로 배치로 전환
• 카드 컨테이너의 max-width를 제한해 데스크톱/모바일 모두 가독성 유지

실행 방법

1. 브라우저에서 todo.html 파일을 엽니다.
2. 메모를 입력하고 추가 버튼을 눌러 항목을 생성합니다.
3. 필요 시 삭제 버튼으로 항목을 제거합니다.
4. 새로고침해도 저장된 메모가 유지되는지 확인합니다.