AI랑 같이하는 코딩

9일차에서는 하루 관리 웹앱에 메모장 기능을 추가합니다. 지금까지 할 일 목록을 중심으로 만들었다면, 오늘은 짧은 생각이나 기록을 남길 수 있는 공간을 붙여 개인 대시보드로서의 활용도를 높이는 단계입니다.

핵심은 복잡한 에디터가 아니라 "빠르게 쓰고 저장하는 메모"입니다. 초보자 기준에서는 textarea, 저장 버튼, localStorage 연동만 제대로 구현해도 실사용 가능한 기능이 됩니다.

1. 오늘 만들 기능 소개

오늘 목표는 메모 입력 영역과 저장 흐름을 만드는 것입니다. 사용자가 textarea에 텍스트를 입력하고 저장 버튼을 누르면 메모가 localStorage에 저장되고, 페이지를 다시 열어도 같은 메모가 자동으로 복원되도록 구현합니다.

이 기능은 할 일 목록과 성격이 다릅니다. 할 일은 여러 항목 배열로 관리하지만, 메모는 보통 하나의 긴 문자열로 저장하면 간단합니다. 이런 데이터 형태 차이를 이해해두면 이후 기분 기록이나 설정 저장도 훨씬 쉬워집니다.

2. AI에게 요청할 프롬프트

AI에게 요청할 때는 메모 저장 키와 동작 시점을 분명히 적어주세요.

하루 관리 웹앱 9일차 작업이야.
메모 카드에 textarea와 저장 버튼을 추가하고,
저장 버튼 클릭 시 textarea 값을 localStorage("dailyMemo")에 저장해줘.
페이지 로드 시 저장된 메모를 자동으로 textarea에 불러오게 script.js 코드를 작성해줘.

키 이름을 고정하면 나중에 기능이 늘어나도 데이터 충돌을 피하기 쉽습니다. 예를 들어 할 일은 `todos`, 메모는 `dailyMemo`처럼 역할별로 나누는 습관이 좋습니다.

3. 코드 작성과 실행 과정

먼저 메모 카드 section 안에 `textarea`와 저장 버튼을 배치합니다. 그다음 `script.js`에서 요소를 선택하고, 저장 버튼 클릭 이벤트에서 `localStorage.setItem`을 실행합니다. 페이지가 로드될 때는 `getItem`으로 값을 가져와 textarea 기본값으로 넣어 복원합니다.

테스트는 간단합니다. 메모를 입력하고 저장한 뒤 새로고침해 같은 내용이 남아 있으면 성공입니다. 직접 바꿔보기 미션으로 "마지막 저장 시간" 텍스트를 함께 표시해보세요. 저장 버튼 클릭 시 현재 시각을 아래에 찍어주면 사용자 피드백이 훨씬 좋아집니다.

4. 코드 이해하기

오늘 핵심은 "단일 값 저장" 패턴입니다. 배열/객체를 저장했던 8일차와 달리, 메모는 문자열 한 개라 `JSON.stringify` 없이 바로 저장할 수 있습니다. 이 차이를 이해하면 데이터 구조에 맞는 저장 방식을 선택할 수 있습니다.

또 UX 관점에서는 저장 직후 사용자에게 짧은 피드백(예: "메모가 저장되었습니다")을 보여주면 좋습니다. 기능 완성은 저장 로직 + 사용자가 안심할 피드백이라는 점을 기억해두면 앱 완성도가 높아집니다.

5. 오늘 만든 내용 정리

오늘은 메모 입력과 저장/복원 기능을 추가해 웹앱의 기록 범위를 확장했습니다. 이제 할 일뿐 아니라 생각과 아이디어도 같은 대시보드 안에서 관리할 수 있게 되었고, localStorage 활용 패턴도 한 단계 더 익혔습니다. 다음 10일차에서는 오늘의 기분을 선택해 기록하는 기능을 추가해보겠습니다.

6. 자주 묻는 질문

7. 다음 단계로 이어가기