할일앱2 [바이브코딩 HTML 웹앱 20일 챌린지] 8일차 - 새로고침해도 할 일이 사라지지 않게 만들기 8일차에서는 새로고침해도 할 일이 사라지지 않도록 `localStorage` 저장 기능을 붙입니다. 지금까지는 페이지를 다시 열면 목록이 초기화됐지만, 오늘부터는 입력한 데이터가 브라우저에 남아 다시 불러와지는 흐름을 구현합니다.이 단계는 웹앱이 "진짜 도구"로 넘어가는 중요한 전환점입니다. 초보자도 저장/불러오기 구조를 한 번 익혀두면 메모, 기분 기록, 다크모드까지 같은 패턴으로 확장할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 목표는 할 일 목록 상태를 저장하고 복원하는 것입니다. 할 일을 추가/완료/삭제할 때마다 현재 목록을 .. 2026. 5. 6. [바이브코딩 HTML 웹앱 20일 챌린지] 6일차 - 버튼을 누르면 할 일이 추가되게 만들기 6일차에서는 드디어 버튼 클릭으로 할 일이 실제로 추가되게 만듭니다. 5일차에 준비한 입력창, 버튼, 목록 UI에 JavaScript를 연결해서 사용자 입력이 화면에 반영되는 첫 동작을 구현하는 날입니다.이 단계부터 "정적인 페이지"가 아니라 "반응하는 웹앱"으로 넘어갑니다. 초보자 기준에서는 모든 문법을 완벽히 이해하려고 하기보다, 클릭 이벤트가 어떤 순서로 실행되는지 흐름을 잡는 데 집중하면 훨씬 빠르게 성장할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 목표는 입력창에 작성한 할 일을 버튼 클릭 한 번으로 목록에 추가하는 것입니다.. 2026. 5. 4. 이전 1 다음
