저장되는 할 일 웹앱 만들기

명세와 계획을 만드는 데 두 강을 썼어요. 오늘은 드디어 불을 켭니다. 완성 예시를 먼저 열어 보고, 어떤 동작이 남아야 하는지 손으로 눌러 보세요. 할 일을 하나 추가하고 완료 표시를 한 뒤 새로고침해도 그대로라면 오늘의 핵심을 이미 본 거예요.

오늘 만들 것

기존 소개 사이트에 /tasks.html 페이지를 추가해요.

• 할 일 추가
• 완료 상태 전환
• 한 항목 삭제
• 전체·할 일·완료 필터
• 남은 개수 표시
• 브라우저를 닫거나 새로고침해도 목록 유지

서버, 로그인, 데이터베이스는 쓰지 않습니다. 저장은 현재 브라우저 안의 localStorage만 사용해요.

준비물

• TASK_APP_BRIEF.md와 PLAN.md
• 입문 코스에서 만든 Git 저장점
• 약 40분

따라 하기

1. 구현 전에 작업 상태 확인하기

TASK_APP_BRIEF.md와 PLAN.md를 읽고, 현재 Git 상태를 확인해 줘.
두 문서가 충돌하면 구현하지 말고 먼저 알려 줘.
충돌이 없으면 오늘 구현할 단계와 건드릴 파일만 짧게 요약해.
아직 수정은 시작하지 마.

Codex가 tasks.html, tasks.css, tasks.js, index.html 이외의 파일을 바꾸겠다고 하면 이유를 물어보세요. 납득할 이유가 없으면 범위에서 빼면 됩니다.

2. 계획대로 한 번에 구현 맡기기

이제 구현을 허용합니다. 큰 작업에서는 모든 줄을 지시하기보다 결과와 경계를 주고, Codex가 저장소를 읽어 맞는 방법을 찾게 하는 편이 낫습니다.

합의한 TASK_APP_BRIEF.md와 PLAN.md를 기준으로 할 일 웹앱을 구현해 줘.

반드시 지킬 것:
- 외부 패키지나 CDN을 추가하지 않는다
- tasks.html, tasks.css, tasks.js로 나눈다
- 기존 index.html에는 할 일 앱으로 가는 링크만 추가한다
- 폼 라벨, 키보드 포커스, 충분히 큰 버튼을 제공한다
- localStorage 값이 없거나 깨져도 빈 목록으로 안전하게 시작한다
- 사용자가 입력한 문장은 HTML로 해석하지 않고 텍스트로만 보여 준다
- 폭 360px에서 가로 스크롤이 생기지 않게 한다

완료 후 바꾼 파일, 구현한 동작, 아직 직접 확인하지 못한 것을 나눠 보고해.
가능하면 로컬 서버를 열고 확인할 주소도 알려 줘.

마지막의 “확인하지 못한 것”이 중요해요. Codex에게 솔직한 빈칸을 허용하면 실행하지 않은 검사를 통과했다고 말할 이유가 줄어듭니다.

3. 브라우저에서 첫 요리 맛보기

Codex가 알려 준 로컬 주소를 열거나 tasks.html을 브라우저로 여세요. 다음 순서대로 딱 한 번만 눌러 봅니다.

1. 우유 사기를 입력해 추가
2. 체크해서 완료
3. 완료 필터에서 보이는지 확인
4. 새로고침
5. 항목이 남아 있는지 확인
6. 삭제

여기서 실패가 있더라도 바로 세부 코드를 고치지 마세요. 보이는 증상과 재현 순서를 Codex에게 주세요.

버그를 재현했어.
1) '우유 사기' 추가
2) 완료 체크
3) 새로고침
결과: 항목은 남지만 완료 표시가 풀린다.

원인을 먼저 설명하고, 관련된 최소 파일만 수정해 줘.
수정 후 같은 순서로 무엇을 확인했는지 보고해.

실제 증상은 다를 수 있어요. 위 문장을 복사하되 결과 부분은 내가 본 사실로 바꾸세요. “안 돼”보다 재현 순서가 있는 보고가 훨씬 빠르게 고쳐집니다.

4. 접근성은 마지막 장식이 아니라 기능으로 보기

마우스를 내려놓고 Tab, Shift+Tab, Enter, Space만으로 추가·완료·필터·삭제를 해 보세요. 현재 위치가 눈에 보이지 않거나 버튼 이름이 “X”뿐이라면 고칠 부분이에요.

할 일 앱을 키보드와 화면 읽기 관점에서만 점검해 줘.
새 기능은 추가하지 말고, 라벨·버튼 이름·포커스 표시·상태 안내에서
실제 문제가 있는 것만 최소 수정해. 무엇을 왜 바꿨는지 알려 줘.

5. 계획 체크박스 갱신하기

작동하는 것을 확인한 뒤 Codex에게 PLAN.md의 구현 단계만 체크하게 하세요. 검증과 리뷰 단계는 아직 체크하면 안 됩니다.

PLAN.md에서 실제로 구현 완료한 항목만 체크해 줘.
검증, 리뷰, 배포 항목은 아직 완료 처리하지 마.

막혔을 때

• 새로고침하면 전부 사라져요 — 브라우저가 파일 URL의 저장을 제한할 수 있어요. Codex에게 로컬 서버를 시작하게 하고 http://localhost... 주소로 여세요.
• 한글이 깨져요 — tasks.html의 <meta charset="utf-8"> 존재 여부를 확인하게 하세요.
• 입력한 <b>가 굵게 보여요 — 사용자 입력을 innerHTML로 넣은 신호일 수 있어요. textContent를 사용하도록 리뷰시키세요.
• 기존 소개 페이지 디자인이 망가졌어요 — 공용 CSS를 억지로 공유하지 말고 tasks.css가 할 일 앱에만 적용되게 범위를 좁히세요.
• 기능을 너무 많이 넣었어요 — TASK_APP_BRIEF.md의 “하지 않을 일”과 비교해 범위 밖 기능을 제거하게 하세요.

마무리 체크

□ index.html에서 tasks.html로 이동할 수 있다
□ 할 일을 추가·완료·삭제할 수 있다
□ 전체·할 일·완료 필터가 맞게 작동한다
□ 새로고침 후 내용과 완료 상태가 남아 있다
□ 키보드만으로 주요 기능을 사용할 수 있다
□ PLAN.md의 검증·리뷰·배포는 아직 미완료다

앱이 한 번 작동한 것은 출발점이에요. 다음 강에서는 “내가 눌러 보니 됐다”를 재현 가능한 검증 기록으로 바꿉니다.