[바이브코딩 HTML 웹앱 20일 챌린지] 12일차 - 매일 반복할 습관 체크리스트 만들기
12일차에서는 매일 반복하는 습관을 체크할 수 있는 목록을 만듭니다. 할 일은 그날그날 바뀌지만, 습관은 반복된다는 점이 다르기 때문에 고정 항목 + 체크 상태 저장 흐름을 따로 구현하는 것이 핵심입니다.
오늘 기능이 들어가면 하루 관리 웹앱이 단기 작업 관리에서 생활 루틴 관리까지 확장됩니다. 초보자도 체크박스 이벤트와 localStorage 저장 패턴을 재사용해 안정적으로 구현할 수 있습니다.
1. 오늘 만들 기능 소개
오늘은 물 마시기, 스트레칭, 책 읽기 같은 습관 항목을 고정 리스트로 표시하고, 항목별 체크 상태를 저장/복원하는 기능을 구현합니다. 사용자는 페이지를 다시 열어도 오늘 체크한 상태를 그대로 확인할 수 있습니다.
2. AI에게 요청할 프롬프트
습관 항목의 기본 데이터와 저장 키를 함께 요청하면 구현이 깔끔해집니다.
하루 관리 웹앱 12일차 작업이야.
습관 체크리스트(예: 물 마시기, 스트레칭, 독서)를 체크박스로 만들고,
체크 상태를 localStorage("habitChecks")에 저장해줘.
페이지 로드 시 저장된 상태를 불러와 체크박스를 복원하는 JavaScript 코드를 작성해줘.3. 코드 작성과 실행 과정
먼저 HTML에 습관 카드와 체크박스 목록을 만듭니다. JavaScript에서는 체크박스 변경 이벤트를 감지해 각 항목의 true/false 상태를 객체로 저장합니다. 로드 시에는 저장된 객체를 읽어 각 체크박스의 checked 값을 복원합니다.
| 구현 요소 | 오늘 작업 | 검증 포인트 |
|---|---|---|
| 습관 목록 | 고정 체크박스 항목 생성 | 라벨-체크박스 연결 |
| 상태 저장 | change 이벤트마다 저장 | 키 이름 일관성 |
| 상태 복원 | 페이지 로드 시 checked 반영 | 새로고침 후 유지 확인 |
4. 코드 이해하기
오늘 핵심은 "고정 데이터와 상태 데이터 분리"입니다. 항목 이름은 HTML/배열로 고정하고, 체크 여부만 저장하면 코드가 단순하고 안정적입니다. 모든 정보를 문자열로 저장하기보다, 체크 상태만 객체로 관리하는 방식이 유지보수에 유리합니다.
또 체크박스 id를 규칙적으로 정해두면 확장할 때 편합니다. 작은 네이밍 규칙이 기능 추가 속도를 결정한다는 점을 기억해두세요.
5. 오늘 만든 내용 정리
오늘은 습관 체크리스트를 추가하고 체크 상태를 localStorage로 저장/복원했습니다. 이제 웹앱은 할 일, 메모, 기분, 타이머에 이어 루틴 관리까지 지원하게 되었고, 일상 기록 도구로서 완성도가 한 단계 올라갔습니다. 다음 13일차에서는 완료량을 바탕으로 진행률을 표시해 성취감을 시각화해보겠습니다.
6. 자주 묻는 질문
Q1. 체크 상태가 저장되지 않아요.
체크박스 `change` 이벤트에서 저장 함수가 호출되는지 먼저 확인하세요. 저장 키(`habitChecks`)가 로드 쪽 코드와 동일한지도 점검해야 합니다.
Q2. 항목을 추가하면 기존 저장이 꼬입니다.
항목 id/키를 중복 없이 유지해야 합니다. 기존 키 이름을 변경하면 이전 데이터와 매칭이 안 될 수 있습니다.
Q3. 습관 목록을 매일 초기화하고 싶어요.
날짜 키를 함께 저장해 날짜가 바뀌면 상태를 초기화하는 로직을 추가하면 됩니다. 지금 단계에서는 저장/복원 기본 흐름을 먼저 안정화하는 것이 좋습니다.