실습: 작은 웹사이트 만들기

Codex 학습 목차로 돌아가기

목표와 시작점

이 단락의 학습 자료: Codex 입문

1단계: 빈 작업 공간과 참고 버전 준비

Small Steps 자료를 풀고 expected는 별도 참고 폴더에 보관하세요. 새 website-lab의 brief.md부터 시작하며 다른 편의 통제 실습인 start·broken은 섞지 않습니다. expected의 코드 파일 다섯 개는 막힐 때 비교할 완성본입니다. 작업 터미널에서 node --version, Windows는 py -3 --version, macOS/Linux는 python3 --version을 확인하고 없는 명령은 설치와 경로 설정부터 해결하세요.

모든 OS는 같은 HTML/CSS/JavaScript를 씁니다. 데스크톱에서 website-lab을 선택하고 CLI는 cd 후 codex, IDE는 해당 폴더를 프로젝트로 엽니다. 휴대전화로 PC 작업을 추적해도 파일·미리 보기는 실행 호스트에 있으며 휴대전화의 127.0.0.1은 PC가 아닙니다. 휴대전화 시연을 위해 연습 서버를 공개하지 말고 먼저 PC에서 반응형을 확인합니다.

2단계: 결과물과 승인 조건 작성

아래를 brief.md로 저장하세요. 영어 UI 이름을 참고본과 맞춰 다섯 언어에서 같은 버튼을 확인합니다. 추가 후 표시가 Read, 완료 전환이 Update이므로 CRUD 네 동작을 충족하며 로그인·동기화·협업은 추가하지 않습니다. 외관뿐 아니라 손상 데이터·공백 입력·키보드 동작도 정의하세요.

# Small Steps website brief
Build a local todo website using HTML, CSS and JavaScript only.

## Files
- index.html: accessible page and form
- style.css: responsive layout
- core.mjs: immutable data functions
- app.js: DOM events and localStorage
- core.test.mjs: Node built-in tests

## Data contract
- Task: {id: string, title: string, completed: boolean}
- Trim titles; accept 1 to 100 non-blank characters. IDs must be unique.
- Export addTask(tasks, title, id), toggleTask(tasks, id), removeTask(tasks, id),
  visibleTasks(tasks, filter), decodeTasks(raw), encodeTasks(tasks).
- Filters: all, active, completed. Missing toggle/delete IDs leave data unchanged.
- Store {version: 1, tasks: [...]} under mokaair-codex-todo-v1.
- Invalid stored data must remain untouched; warn and allow temporary work.

## Interface and acceptance
- Labels: New task, Add task, Show, All tasks, Active, Completed, Delete.
- Show active and total counts, including when a filter is selected.
- Add, toggle, delete, filter and reload must work.
- Render task text as text, not HTML.
- Visible keyboard focus; preserve sensible focus after list updates.
- Fit 360px, 390px and 1280px viewports without page overflow.
- Include an About this exercise disclosure with a Reset practice data button.
- Reset practice data removes only this app's storage key.
- No dependencies, account, backend, analytics or external requests.

## Delivery
Explain changes, run node --test core.test.mjs, and list actual browser checks.
Do not claim checks that were not run. Do not publish or deploy.

3단계: 설계 확인 후 단계별 구현

Plan 모드로 brief.md를 읽고 다섯 파일의 책임·데이터 흐름·검증을 제안하게 합니다. core.mjs는 DOM을 접근하지 않고 app.js가 조작·저장을 맡으며 프레임워크·추가 서비스가 없는지 확인하세요. 손상·복원이 빠졌으면 계획에 보충하고 구현으로 전환합니다. 데이터·시험과 화면·상호작용 두 단계로 나눠 매번 실제 변경·미검증 항목을 보고하게 합니다.

Implement core.mjs and core.test.mjs from the approved brief.md contract.
Keep all data operations immutable. Test empty and long titles, Unicode,
duplicate IDs, filters, missing IDs, storage round trips and invalid storage.
Run node --test core.test.mjs and report the command, result and remaining work.
Do not change the brief, publish anything or build the UI in this stage.

Implement index.html, style.css and app.js using the tested core.mjs.
Follow the UI, storage, accessibility and responsive criteria in brief.md.
Do not weaken the data tests to accommodate UI bugs.
Run the data tests again. Give local preview instructions and list which
browser interactions you actually verified and which still need verification.

각 단계 후 직접 파일을 보고 시험을 실행하세요. 참고 core.test.mjs에는 여러 단언을 가진 상위 시험 세 개가 있지만 생성된 시험 수는 달라도 되므로 개수만 비교하지 않습니다. 구현·시험이 같은 오해를 공유할 수 있어 다음 독립 화면 점검이 필요합니다. 막히면 expected의 해당 파일을 비교해 원인을 이해하고 미저장 작업을 통째로 덮어쓰지 마세요. 되돌리기는 Git과 복원을 먼저 확인합니다.

4단계: 같은 폴더 미리 보기

node --test core.test.mjs
py -3 -m http.server 4173 --bind 127.0.0.1

node --test core.test.mjs
python3 -m http.server 4173 --bind 127.0.0.1

http://127.0.0.1:4173을 열고 터미널을 유지하며 다른 명령은 별도 터미널을 씁니다. 포트가 사용 중이면 자신의 연습 서버인지 확인한 뒤 중단을 판단하고 빈 포트로 바꾸면 URL·검증 기록도 바꾸세요. HTML 직접 열기의 file URL은 ES module을 제한할 수 있습니다. 다른 버전이 보이면 전체 재작성을 요청하기 전에 제공 폴더·URL·Network의 app.js를 확인합니다.

5단계: 기능과 화면 검증

About this exercise를 펼쳐 모두 버려도 되는 가상 데이터인지 확인한 뒤 Reset practice data로 전용 키만 지웁니다. Show에서 All tasks를 선택하고 0 active / 0 total을 확인한 뒤 Read·Build를 추가하고 Read를 완료하세요. All tasks는 두 개, Active는 Build, Completed는 Read, 통계는 1 active / 2 total이어야 합니다. 새로고침 후 유지되는지 확인하고 All tasks로 돌아와 Read를 삭제하면 Build가 남습니다. 첫 화면 한 장으로 끝내지 말고 다음 표를 검증하세요.

반응형 모드는 실제 iOS/Android 시험이 아니며 첨부 Windows/Edge 참고 화면은 이번 생성 결과의 증거가 아닙니다.

<img src=x>

6단계: 손상 데이터·수정·전달

고급 확인은 로컬 가상 페이지에서만 합니다. 필요한 기록을 저장하고 개발자 도구 Storage/Application → Local Storage에서 현재 127.0.0.1과 포트를 선택하세요. mokaair-codex-todo-v1을 bad-json으로 바꿔 새로고침하면 경고가 나와야 합니다. 임시 항목 추가 후 저장값이 몰래 덮어써지지 않고 bad-json인지 확인합니다. Reset practice data로 해당 키만 지운 뒤 새 항목·새로고침으로 저장 복구를 확인하세요. 다른 사이트 전체 데이터를 지우지 않습니다.

인계 전에 가상 데이터를 비운 뒤 아래 순서로 진행하고 기대와 관찰을 나누어 적습니다. 참조 구현을 써도 자신의 페이지를 관찰하세요. 필터를 적용해도 전체 작업을 세는 조건은 보이는 일부만 세는 오류를 잡습니다. 미리보기를 사용할 수 없으면 미검증으로 남기고 기대값을 실측으로 적지 마세요.

# Website handoff
Root / source version:
Node test command / exit status:
Browser / version / viewport / date:

| Step | Expected active / total | Observed |
| --- | --- | --- |
| Reset fictional practice data; select All tasks | 0 / 0 | |
| Add Read, then Build | 2 / 2 | |
| Complete Read | 1 / 2 | |
| Select Active; only Build visible | 1 / 2 | |
| Select Completed; only Read visible | 1 / 2 | |
| Select All tasks, delete Read | 1 / 1 | |

Input/storage recovery evidence:
Keyboard and narrow-layout evidence:
Actual changed files:
Unverified requirements:
How to restart / restore:

실패하면 입력·동작·예상·실제 값을 정확히 전달하고 버그 절차로 해당 계층만 수정·재검증하게 합니다. brief·파일 다섯 개·Node 기록·넓은/좁은 화면·미실측 플랫폼·복원 방법을 전달하세요. 원래 터미널 Ctrl+C로 서버를 중지하고 인계 형식으로 재시작법을 요청합니다. 프레임워크·백엔드·공개 호스팅은 별도 명시한 범위이며 로컬 표시를 배포 완료로 보지 않습니다.

Codex 학습 목차로 돌아가기

자세한 설명 보기

Brief to HTML / CSS to Browser checks

• AI 도구
• 튜토리얼
• Codex