기존 코드베이스 이해

Codex 학습 목차로 돌아가기

목표와 준비

첫 프로젝트가 전제입니다. 모든 줄 번역이 아니라 진입점/동작 경로/저장 위치/확인 증거를 답합니다. 작은 사이트의 사용자 행동 하나를 추적해 변경 판단에 못 쓰는 파일명 목록으로 끝내지 않습니다.

1단계: 버전, 진입점, 기준 확인

ZIP expected의 다섯 파일을 새 codex-read-lab에 복사하고 원본을 남깁니다. start/broken이 아닙니다. Windows PowerShell은 Get-Location, macOS/Linux는 pwd로 다섯 파일이 바로 있는 경로를 확인합니다. 익숙한 형태로 보이게 하려고 package.json을 추가하지 않습니다.

node --version
node --test core.test.mjs

3개 통과를 실제 기록한 뒤 읽기 조사로 갑니다. 실패면 오류/버전을 남기고 구조 이해 중 불명확한 결함을 몰래 고치지 않습니다. 실제 프로젝트에서는 기존 미커밋 변경을 기록하고 전체 초기화/포맷을 피합니다.

데스크톱에서는 codex-read-lab을 로컬 프로젝트로 추가하고 그 안에서 새 작업을 만듭니다. CLI는 확인한 실습 터미널에서 codex를 실행합니다. 작업 경로를 확인하고 다음 요청을 시스템 셸이 아닌 Codex 입력창에 보내세요.

Read this codex-read-lab without editing any files. Identify the actual entry point, file responsibilities and commands available from the files, not from framework assumptions.
Trace adding a task, marking it complete, changing the filter and reloading the page. Name the relevant functions and DOM elements.
Separate observed code from inferred intent. List what the existing tests cover and what still needs browser verification. If evidence is missing, say so instead of inventing a backend or build step.

2단계: 근거 있는 파일 지도

표를 실제 파일로 확인합니다. index.html이 CSS와 module app.js를 읽고 app.js가 core.mjs를 import합니다. 테스트는 Node 내장이며 npm script가 아닙니다. API/DB 서버/bundler가 없으므로 답변에 있으면 근거를 요청해 수정합니다.

Read 추가는 submit 기본 동작 방지, addTask 텍스트 검증/새 배열, tasks 대입, persist 저장, 입력 비우기/render, 입력 포커스를 추적합니다. 이름/순서/타입을 실제 파일로 확인한 뒤 기능안을 생각합니다.

filter.value는 표시를 고르며 숨겨진 tasks를 삭제하지 않습니다. 완료는 화면 행 번호 아닌 task.id를 씁니다. 이해 없이 Completed를 고치면 미완료 데이터를 삭제해 겉모습만 맞을 수 있습니다.

3단계: 저장과 오류 경로 추적

app.js의 mokaair-codex-todo-v1은 localStorage 키입니다. 시작 decodeTasks는 JSON 버전/필드를, 저장 encodeTasks는 버전 문서를 다룹니다. 브라우저 origin과 저장 차단이 관련되며 클라우드 동기화가 아닙니다. catch의 임시 상태 표시도 설명하게 합니다.

세 번째 테스트의 잘못된 JSON/버전/중복 ID/필드 타입을 확인합니다. 디코딩 규칙 증거이지 실제 화면 오류/포커스/새로 고침 저장 보장은 아닙니다. 데이터 함수와 사용자 조작을 나눠 테스트와 검토에 남깁니다.

4단계: 화면으로 이해를 확인하고 지도 남기기

codex-read-lab에서 Python 서버를 시작합니다. Windows는 첫째, macOS/Linux는 둘째만 쓰고 http://127.0.0.1:4173을 엽니다. 자신의 이전 실습이 포트를 쓰면 그 터미널에서 멈추고 경로 불명 화면을 재사용하지 않습니다. 테스트는 다른 터미널입니다.

py -m http.server 4173 --bind 127.0.0.1

python3 -m http.server 4173 --bind 127.0.0.1

필요한 이전 실습 기록을 먼저 보존한 뒤 About this exercise에서 Reset practice data를 누르세요. All tasks에서 빈 목록을 확인하고 Read와 Build를 추가해 Read만 완료합니다. All은 둘, Active는 Build, Completed는 Read입니다. All로 돌아가 새로 고쳐 저장을 확인합니다. 핵심 로직과 화면 연결 검증이며 모든 오류 경로를 포함하지 않습니다. 끝나면 실습 데이터만 지웁니다.

편집기로 다음 틀을 project-map.md에 저장하고 실제 테스트/미확인을 넣습니다. 원래 다섯 파일은 바꿀 필요 없습니다. Codex가 쓰면 새 문서만 허용하고 원래 다섯 파일 불변을 확인하게 합니다. 읽기 단계 종료를 리팩터링 허가로 혼동하지 않습니다.

# Small Steps project map

## Entry and runtime
index.html loads style.css and app.js as a browser module.
app.js imports core.mjs. Local HTTP preview; no dependency installation.

## Flow
submit -> addTask -> tasks -> persist -> input clear -> render -> input focus
checkbox change -> toggleTask by ID -> persist -> render with focus restoration
filter change -> render -> visibleTasks; hidden tasks stay in tasks
reload -> localStorage -> decodeTasks -> tasks -> render

## Storage
Key: mokaair-codex-todo-v1. Versioned JSON; invalid data is rejected.
Browser storage failures leave a temporary session and a visible message.

## Verification
node --test core.test.mjs: fill actual result and date.
Browser filters, reload, keyboard and storage errors: record separately.
Do not claim checks you did not perform.

## Change boundaries
Filter logic: core.mjs visibleTasks.
DOM and storage orchestration: app.js.
Layout and controls: style.css and index.html.
Unknowns and next task: fill from evidence.

실패 경로를 읽고 판단 근거 밝히기

app.js의 submit 처리기와 core.mjs의 addTask를 함께 읽습니다. 공백뿐인 입력은 trim 후 길이가 0이므로 addTask가 title-length를 던집니다. 이벤트의 catch가 메시지를 표시하고 return하므로 해당 제출은 persist, 입력 비우기, render까지 진행하지 않습니다. 이는 코드를 읽어 도출한 경로이지 버튼을 직접 누른 증거가 아닙니다. localStorage 쓰기 실패도 추적하세요. storageAvailable이 false가 되면 현재 탭에서 임시 작업은 계속되지만 새로고침 후 보존은 보장되지 않습니다.

‘필터를 바꾸면 데이터를 저장한다’, ‘테스트 세 개가 통과하면 버튼도 정상이다’라는 잘못된 설명도 확인합니다. filter의 change는 render만 호출하며 핵심 함수 테스트는 DOM을 조작하지 않습니다. 아래 절을 project-map.md에 추가하고 미실행 항목은 NOT RUN으로 남깁니다. 인용한 함수를 찾을 수 없으면 expected 복사본을 열었는지 확인한 뒤 프로그램 파일 다섯 개를 건드리지 않고 안내 문서를 고칩니다.

## Evidence and limits
- Blank input: core.mjs/addTask throws; app.js/submit catches and returns before persist.
- Filter change: app.js connects change to render; that handler does not persist.
- Count: app.js/render counts all tasks, not only the displayed subset.
- Storage failure: app.js/persist disables further writes after a failed setItem.
- Automated baseline: node --test core.test.mjs; record actual exit and totals.
- Browser submit/filter/reload checks: NOT RUN until performed.

오해, 중단과 검수

의존성 설치에는 선언 파일을, 목록뿐이면 submit 추적을, 테스트 성공을 전체 화면 정상으로 보면 미확인 범위를 요청합니다. 넓게 찾기 전에 루트를 확인하고 expected 결론을 broken에 적용하지 않도록 실제 경로로 구분합니다.

추가/완료/필터/새로 고침을 함수로 설명하고 미확인 하나 이상을 말하면 완료입니다. Ctrl+C로 서버를 끄고 지도/원본 다섯 파일 일치를 확인합니다. 잘못 바꾼 파일만 복원합니다. 그림 1은 기준, 2는 추적, 3은 증거 확인이며 다음은 기능 구현입니다.

Codex 학습 목차로 돌아가기

자세한 설명 보기

Three numbered stages: identify the starting point, perform the exercise, and verify the result. Original illustration, not a product screenshot.

• AI 도구
• 튜토리얼
• Codex