Plan 모드로 구현 전 계획하기

Codex 학습 목차로 돌아가기

목표와 준비

먼저 요청 작성을 읽습니다. 선택지, 코드 조사, 여러 단계가 있는 작업에 적합하며 배경 확인·질문·계획 작성을 할 수 있습니다. ‘계획’이라는 말만으로 충분하지 않고 읽기 전용 샌드박스와도 다릅니다. 권한과 폴더를 별도로 확인합니다.

1단계: 반복 가능한 시작 상태

첫 프로젝트의 ZIP에서 start 안의 index.html, style.css, app.js, core.mjs, core.test.mjs 다섯 파일을 새 codex-plan-lab 루트로 복사합니다. 필터가 수정된 expected는 사용하지 않습니다. 경로와 node --version을 확인하고 복원용 start를 남깁니다. 실제 프로젝트는 사용하지 않습니다.

node --test core.test.mjs

시작 상태 결과를 저장합니다. 예상은 2개 통과, 1개 실패입니다. 의도된 결함이므로 테스트를 약화하지 않습니다. 다르면 broken/expected가 아닌 start인지 확인하세요. 각 자료의 용도는 다릅니다.

화면은 첫 실습의 Python 미리 보기를 씁니다. 자신의 이전 실습 서버를 중단하고 codex-plan-lab에서 Windows는 py -m http.server 4173 --bind 127.0.0.1, macOS/Linux는 py 대신 python3로 시작합니다. HTML 직접 열기 대신 http://127.0.0.1:4173으로 들어가며 테스트는 다른 터미널, 종료는 서버 터미널 Ctrl+C입니다.

미리 보기를 연 뒤 필요한 이전 실습 기록을 먼저 보존하세요. About this exercise의 Reset practice data를 누르고 All tasks에서 빈 목록을 확인한 뒤 Read와 Build를 추가하고 Read만 완료합니다. Active/Completed는 잘못된 동작으로 두 항목 모두 표시해야 합니다. 실습 데이터만 초기화하고 브라우저 전체 저장소는 지우지 않습니다.

2단계: Plan 켜고 조사하기

데스크톱에서 실습 작업을 만들고 입력창 /plan 또는 Add의 Plan mode를 사용합니다. CLI는 실습 경로에서 codex를 시작하고 작업이 끝난 상태에서 /plan을 입력합니다. 공식 안내에는 Shift+Tab 전환도 있습니다. 모드를 확인한 뒤 요청합니다. 셸에 입력하지 않습니다. 없으면 업데이트와 지원 명령을 확인합니다.

Plan before implementation. In this codex-plan-lab, inspect index.html, app.js, core.mjs and core.test.mjs. Do not edit files yet.
Goal: make All, Active and Completed filters correct.
Keep the current UI, storage format and task ordering. Add no dependencies.
Report the existing selector and event wiring, the failing behavior and the smallest implementation scope. Ask about unresolved behavior before proposing a plan.
The plan must name files, acceptance cases, test commands and a scoped restoration method. Separate observations from assumptions.

index.html의 기존 선택기, app.js 이벤트, core.mjs visibleTasks의 빠진 로직을 구체적으로 찾았는지 봅니다. 화면 재작성/프레임워크라면 필요한 근거를 요청합니다. All 기본값, Active 미완료, Completed 완료, 순서 유지, 빈 입력은 빈 출력으로 선택을 명시합니다.

3단계: 계획 검토와 수정

다음처럼 입력/변경 위치/성공 조건이 있어야 하며 ‘분석, 개발, 테스트’만으로는 부족합니다. 문구가 같을 필요는 없지만 범위를 판단할 수 있어야 합니다. 결과는 미래 합격 조건이며 이미 통과한 실적이 아닙니다. 수동 확인과 에이전트 브라우저 사용도 구분합니다.

# Filter plan
1. Read the existing selector, event handler and tests. Confirm the start fixture's failing filter assertion.
2. Edit only visibleTasks in core.mjs: active selects unfinished tasks; completed selects finished tasks; all keeps every task in order.
3. Run node --test core.test.mjs. Target: all 3 tests pass without changing their assertions.
4. Preview Read (completed) and Build (active). Expect All=Read,Build; Active=Build; Completed=Read. Empty lists stay empty.
Scope: no dependencies, storage migrations, UI redesign or deployment.
Restore: copy only core.mjs from the preserved start fixture back into this lab. The known failing baseline should return.

‘입력 배열을 직접 바꾸지 말고 검증 방법을 계획에 추가’라고 보완합니다. filter는 새 배열을 만들고 작업 객체는 바꾸지 않습니다. All은 원래 배열을 반환할 수 있지만 정렬/값 변경은 안 됩니다. 추가 변경이 필요하면 이유와 허용 범위를 명시해 갱신합니다.

상세해도 잘못된 계획은 구현 전에 수정하기

사례: 필터 버튼 재작성, 패키지 설치, 통과하도록 테스트 변경을 제안한 계획은 상세해도 이번 실습에 맞지 않습니다. 버튼과 이벤트는 이미 있고 부족한 곳은 visibleTasks입니다. 코드 근거가 없는 단계를 짚고 아래 수정을 요청한 뒤 범위, 빈 입력, 입력 불변 조건을 다시 확인하고 구현합니다.

Revise the plan only; do not implement yet. Use the existing filter controls and event wiring. Limit program changes to visibleTasks in core.mjs, add no dependencies and preserve all test assertions. For each proposed change, cite the observed gap. Include empty input, stable order, no input mutation, actual test execution and separate browser checks. Mark unknown facts instead of assuming them.

4단계: 구현하고 검증하기

검토 후 화면 모드 조작으로 구현으로 돌아옵니다. CLI는 현재 Shift+Tab 안내를 따르고 데스크톱은 Plan 해제를 확인합니다. 다음 요청 후 계획만 다시 오면 반복 전송하지 말고 모드를 확인합니다. 차이는 core.mjs 함수만 필요합니다. 참고 예시로 파일 전체를 무작정 덮어쓰지 않습니다.

Implement the reviewed filter plan now. Modify only visibleTasks in core.mjs. Preserve task order and do not mutate inputs. Keep tests and other files unchanged. Run node --test core.test.mjs, inspect the final diff and report actual results. If browser verification is unavailable, list the manual cases as NOT RUN. Do not publish or deploy this practice project.

export function visibleTasks(tasks, filter) {
  if (filter === "active") return tasks.filter((task) => !task.completed);
  if (filter === "completed") return tasks.filter((task) => task.completed);
  return tasks;
}

참고 수정은 3개 모두 통과해야 합니다. 이어 표의 화면 검증을 합니다. 전용 브라우저 프로필이나 화면에서 가상 작업만 삭제해 이전 저장값을 피합니다. 평소 브라우저 전체 데이터는 지우지 않습니다. Read/Build를 추가하고 Read만 완료한 뒤 빈 목록도 확인하며 실행/미실행을 기록합니다.

문제 해결, 복원과 완료 조건

모호하면 단계별 파일/합격 예시를 요청하고 코드와 다른 가정은 재확인합니다. 범위 밖 테스트/의존성 변경은 검토해 되돌립니다. Plan 유지로 구현하지 않은 것은 사이트 오류가 아닙니다. 필요한 권한만 해결하고 모든 보호 해제를 기본으로 삼지 않습니다. 출력 없는 테스트는 미실행입니다.

최종 계획, core.mjs만의 차이, 3개 테스트와 화면 표를 남겨 계획 완료/기능 검수를 구분합니다. 반복하려면 start/core.mjs만 복원해 2통과1실패를 확인하고 다른 폴더나 인증은 지우지 않습니다. 그림 1은 시작, 2는 조사/검토, 3은 구현/검증입니다. 긴 작업은 인계로 이어갑니다.

Codex 학습 목차로 돌아가기

자세한 설명 보기

Questions to /plan to Implementation

• AI 도구
• 튜토리얼
• Codex