📝 그림이 아닌 '기능'을 만드는 즐거움
어제의 로그인과 시계에 이어, 오늘은 ToDo 리스트 기능을 구현했다.
단순히 HTML에 리스트를 적는 게 아니라, 사용자가 입력창에 할 일을 쓰고 엔터를 치면 실시간으로 <li> 태그가 생성되고 화면에 툭툭 붙는 과정이 정말 흥미로웠다.
❌ 버튼을 눌러 리스트를 삭제하는 로직을 짤 때는 진짜 앱을 만드는 기분이 들었다.
💾 브라우저의 기억 장치: LocalStorage
오늘의 가장 큰 수확은 localStorage 활용법을 익힌 것이다.
웹페이지를 새로고침하면 공들여 적은 할 일들이 사라져 버리는데, 이를 방지하기 위해 데이터를 브라우저에 '저장'하는 법을 배웠다.
- JSON.stringify: 자바스크립트의 배열을 문자열로 바꿔서 저장하기
- JSON.parse: 저장된 문자열을 다시 자바스크립트가 알아먹는 배열로 불러오기
처음엔 이 변환 과정이 낯설었지만, 새로고침 버튼을 눌러도 내가 쓴 할 일들이 꿋꿋하게 화면에 남아 있는 걸 확인한 순간...
그 짜릿함은 잊을 수 없다! "아, 이게 진짜 웹이 돌아가는 원리구나!" 싶었다.
🎯 내일의 도전: 스마트한 삭제 기능
지금은 화면에서 지워도 새로고침하면 다시 살아난다. (아직 Local Storage 연동 삭제를 안 했으니까! ㅋ)
내일은 Date.now()로 각 할 일에 고유한 주민번호(ID)를 부여하고, 특정 항목만 쏙 골라내서 삭제하는 filter 기능을 넣어볼 예정이다.
천천히, 하지만 확실하게 한 단계씩 올라가고 있다.
어린이집 적응 중인 둘째 덕분에 생긴 이 소중한 시간들을 헛되이 보내지 않은 것 같아 스스로가 대견하다.
"오늘의 작은 한 걸음이 내일의 멋진 결과물이 될 거라 믿으며, 오늘 공부 끝!"
#노마드코더 #바닐라JS #자바스크립트 #ToDoList #LocalStorage #JSON #육아맘공부 #오늘도성장 #개발일기