[바이브코딩 HTML 웹앱 20일 챌린지] 8일차 - 새로고침해도 할 일이 사라지지 않게 만들기
8일차에서는 새로고침해도 할 일이 사라지지 않도록 `localStorage` 저장 기능을 붙입니다. 지금까지는 페이지를 다시 열면 목록이 초기화됐지만, 오늘부터는 입력한 데이터가 브라우저에 남아 다시 불러와지는 흐름을 구현합니다.
이 단계는 웹앱이 "진짜 도구"로 넘어가는 중요한 전환점입니다. 초보자도 저장/불러오기 구조를 한 번 익혀두면 메모, 기분 기록, 다크모드까지 같은 패턴으로 확장할 수 있습니다.
1. 오늘 만들 기능 소개
오늘의 목표는 할 일 목록 상태를 저장하고 복원하는 것입니다. 할 일을 추가/완료/삭제할 때마다 현재 목록을 배열 형태로 만들어 `localStorage`에 저장하고, 페이지가 열릴 때 저장된 데이터를 읽어 화면에 다시 렌더링합니다.
핵심은 "화면 데이터"와 "저장 데이터"를 같이 관리하는 습관입니다. 지금은 간단한 할 일 목록이지만, 이후 메모장이나 습관 체크에도 같은 구조를 재사용할 수 있습니다.
2. AI에게 요청할 프롬프트
AI에게 요청할 때는 저장 시점과 복원 시점을 분리해서 명확히 적는 것이 좋습니다.
하루 관리 웹앱 8일차 작업이야.
할 일 목록을 localStorage에 저장하고, 새로고침 후 자동으로 불러오게 script.js를 수정해줘.
할 일을 추가/완료/삭제할 때마다 저장되게 하고,
페이지 로드 시 저장된 데이터를 읽어 목록을 다시 렌더링해줘.응답을 받은 뒤에는 저장 키 이름(예: `todos`)을 고정하세요. 키 이름이 중간에 바뀌면 데이터가 사라진 것처럼 보일 수 있습니다.
3. 코드 작성과 실행 과정
먼저 `saveTodos()`와 `loadTodos()` 같은 함수를 분리해 만듭니다. `saveTodos()`는 현재 DOM 목록을 순회해 텍스트와 완료 상태를 객체 배열로 만들고 `JSON.stringify`로 저장합니다. `loadTodos()`는 페이지 진입 시 `localStorage.getItem` 값을 읽어 `JSON.parse` 후 항목을 다시 생성합니다.
| 함수/시점 | 역할 | 주의 포인트 |
|---|---|---|
| saveTodos() | 현재 목록 상태를 저장 | 문자열 변환(JSON.stringify) 필수 |
| loadTodos() | 저장 데이터로 목록 복원 | null 체크 후 파싱 |
| 이벤트 후 처리 | 추가/완료/삭제 직후 save 호출 | 저장 누락 방지 |
테스트는 "추가 → 완료 체크 → 새로고침" 순서로 해보세요. 완료 상태까지 유지되면 제대로 구현된 것입니다. 직접 바꿔보기 미션으로 저장 키를 `dailyTodos`로 바꿔보거나, 저장 전에 최신순 정렬 규칙을 넣어보면 데이터 흐름을 더 깊게 이해할 수 있습니다.
4. 코드 이해하기
오늘 핵심 개념은 브라우저 저장소와 JSON 변환입니다. `localStorage`는 문자열만 저장할 수 있으므로 배열/객체는 `JSON.stringify`로 바꿔 저장하고, 꺼낼 때 `JSON.parse`로 원래 형태로 복원해야 합니다.
또 한 가지 중요한 점은 "저장 타이밍"입니다. 목록이 바뀌는 모든 시점에서 저장을 호출해야 상태가 일관됩니다. 기능이 동작하는 것과 데이터가 유지되는 것은 별개라는 점을 오늘 확실히 익혀두면 좋습니다.
5. 오늘 만든 내용 정리
오늘은 localStorage를 연결해 새로고침 후에도 할 일 목록이 유지되도록 만들었습니다. 이제 웹앱이 일회성 화면이 아니라 실제로 기록을 보관하는 도구로 발전했습니다. 다음 9일차에서는 같은 저장 패턴을 활용해 메모장 기능까지 확장해보겠습니다.
6. 자주 묻는 질문
Q1. 새로고침하면 여전히 목록이 사라져요. 어디를 확인해야 하나요?
`loadTodos()`가 페이지 로드 시점에 실제로 호출되는지 먼저 확인하세요. 그다음 저장 키 이름과 파싱 코드가 일치하는지 점검하면 대부분 해결됩니다.
Q2. localStorage에 저장된 값이 이상한 문자열로 보여요.
정상입니다. JSON 문자열로 저장되기 때문입니다. 코드에서 `JSON.parse`로 다시 객체 배열로 바꿔 사용하면 됩니다.
Q3. 브라우저를 바꾸면 데이터가 왜 안 보이나요?
localStorage는 브라우저/도메인별 저장소라서 다른 브라우저와 공유되지 않습니다. 지금 단계에서는 로컬 저장 연습이 목적이므로 이 동작이 정상입니다.