IDE 확장 시작하기

Codex 학습 목차로 돌아가기

이 강의의 목표

IDE는 편집, 파일 탐색, 도구 실행을 모은 작업 화면입니다. 확장은 선택 영역을 Codex 맥락으로 전달하지만 열 줄 선택이 수정 권한을 열 줄로 제한하지는 않습니다. 요청문에 범위를 명시하고 파일 접근은 권한으로 제어합니다. 그림의 01은 맥락 선택, 02는 수정 요청, 03은 비교와 검증입니다.

시작 전: 공식 확장 설치하기

각 OS의 VS Code에서 Extensions로 Codex를 검색하고 게시자 OpenAI, 식별자 openai.chatgpt를 확인해 설치합니다. 아래 공식 IDE 페이지에서도 이동할 수 있습니다. 아이콘만으로 구분하지 마세요. 창 재로드 안내가 뜨면 파일을 저장한 후 진행합니다. 설치됨 표시는 존재 확인이며 실행이나 인증 완료는 아닙니다.

Codex 아이콘을 열고 없으면 View → Command Palette에서 Codex: Open Codex Sidebar를 검색합니다. Windows/Linux 단축키는 Ctrl+Shift+P, macOS는 Command+Shift+P입니다. 안내에 따라 계정과 워크스페이스를 확인합니다. CLI와 인증을 공유할 수 있으므로 로그아웃 전에 다른 작업 영향을 확인하세요.

공식 문서는 Cursor와 Windsurf도 안내하지만 이 실습은 VS Code를 사용합니다. Xcode와 JetBrains는 자체 통합이므로 VS Code 식별자를 설정 절차로 쓰지 않습니다. Windows의 WSL 창에서는 환경 표시와 터미널 경로를 확인하고 WSL 안에서 필요한 도구를 사용할 수 있어야 합니다.

1단계: 오류가 있는 실습 사본 열기

Small Steps 자료를 풀고 broken을 codex-ide-lab으로 복사하며 expected는 독립 참조로 보관합니다. File → Open Folder로 열고 index.html, style.css, app.js, core.mjs, core.test.mjs을 확인합니다. 신뢰 안내는 출처를 확인한 실습 사본에 대해 처리하며 다운로드 폴더 전체를 프로젝트로 삼지 않습니다.

Terminal → New Terminal을 열고 Windows의 Get-Location 또는 macOS/Linux의 pwd로 codex-ide-lab을 확인합니다. Node.js가 필요하므로 node --version 후 테스트합니다. 세 그룹 중 필터 그룹이 실패하고 나머지는 통과해야 합니다. 의도된 오류이므로 처음부터 실패 테스트를 지우거나 기대값을 바꾸지 않습니다.

node --test core.test.mjs

2단계: 선택 영역을 Codex에 전달하기

core.mjs에서 visibleTasks 전체를 선택하고 명령 팔레트의 현재 Codex 대화에 추가하는 동작으로 첨부합니다. 공식 명령 ID는 chatgpt.addToThread입니다. 다음으로 core.test.mjs를 열고 chatgpt.addFileToThread로 파일 전체를 첨부하세요. 표시 이름은 언어와 버전에 따라 다르므로 키보드 바로 가기 설정에서 ID를 검색해 해당 명령을 확인할 수 있습니다. ID는 터미널 명령이 아닙니다. 편집기 탭이 열렸다는 사실만으로 첨부되었다고 판단하지 말고 전송 전에 파일명, 범위, 첨부 표시를 확인하여 같은 이름의 다른 사본을 제외하세요.

Explain the selected visibleTasks function in core.mjs and the failing filter assertion in core.test.mjs. Do not edit yet. Identify which tasks should appear for All, Active and Completed, and quote the predicate that causes the mismatch. Confirm the working folder before answering.

첫 요청은 설명만입니다. completed 분기의 !task.completed 때문에 미완료 항목이 나온다고 짚어야 합니다. 필터 문제일 수 있다는 말뿐이면 분기와 검증을 요구합니다. 고쳤다고 하면 읽기 요청 범위를 넘었는지 확인하세요. 열린 파일은 맥락을 돕지만 필요한 함수와 실패를 이해했는지는 검증해야 합니다.

3단계: 수정 범위를 정확히 요청하기

Fix only the Completed filter in core.mjs so completed tasks appear. Keep the public function signatures and existing tests unchanged. Preserve All and Active behavior, task order, and input arrays. Run node --test core.test.mjs and report the actual result. Show the final diff and any remaining limitation.

같은 작업에서 전송합니다. 승인 요청은 폴더와 명령이 실습에 맞는지 확인합니다. 핵심 수정은 completed 분기의 task.completed이며 active 동작과 테스트 기대값은 유지합니다. Codex가 테스트 성공을 보고해도 자신의 통합 터미널에서 다시 실행해 독립 검증을 남깁니다.

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;
}

비교용 참조 결과이지 먼저 붙여 넣고 Codex가 고쳤다고 주장하는 코드가 아닙니다. 같은 함수에 의도된 오류라는 오래된 주석이 남으면 정리합니다. 화면 변경, 의존성 추가, 백엔드는 필요 없습니다. 세 그룹 통과뿐 아니라 실제 diff가 요청 범위인지도 판단합니다.

편집기에서는 수정되었는데 테스트는 계속 실패할 때

먼저 파일을 저장한 뒤 통합 터미널의 작업 디렉터리를 확인합니다. 저장하지 않은 편집기 텍스트는 테스트가 읽는 디스크 파일과 다를 수 있고, 같은 이름의 다른 사본 때문에 올바른 수정을 보면서 엉뚱한 파일을 테스트할 수도 있습니다. core.mjs의 전체 경로, 저장 상태, 테스트 디렉터리를 확인한 뒤 원래 테스트를 다시 실행하세요. 셋 다 맞는데 실패하면 전체 오류와 현재 diff를 Codex에 전달하며 기대값을 바꾸거나 확장을 다시 설치하지 않습니다. 문맥 첨부, 파일 저장, 테스트 실행은 각각 확인해야 합니다.

4단계: 차이와 동작 확인하기

사본에 Git이 있으면 Source Control을 보고 없으면 Explorer의 Select for Compare/Compare with Selected로 보존한 broken과 수정본을 비교합니다. diff를 보기 위해 실제 프로젝트를 커밋할 필요는 없습니다. 조건과 낡은 주석만 대상이며 테스트가 오류를 허용하도록 바뀌지 않았는지 확인합니다.

codex-ide-lab 미리 보기 검증 전에 보관할 이전 실습 기록을 남기세요. 같은 브라우저 주소에는 다른 강의 데이터가 남을 수 있습니다. About this exercise를 열고 Reset practice data를 누른 뒤 Show에서 All tasks를 선택해 빈 목록을 확인합니다. 실습 데이터만 초기화하며 소스 파일은 복원하지 않습니다. 로컬 미리 보기에서 Read와 Build를 추가하고 Read를 완료합니다. All은 둘 다, Active는 Build, Completed는 Read입니다. 새로고침 후에도 Completed에 Read가 있고 빈 목록 필터도 오류가 없어야 합니다. OS별 실행은 첫 프로젝트를 참고하세요. localhost 검증은 배포된 웹사이트가 아닙니다.

문제 해결, 복구, 다음 단계

명령이 없으면 현재 창의 활성 확장과 환경을 확인합니다. WSL과 로컬 창은 다를 수 있습니다. 선택 맥락이 빠지면 첨부, 파일, 범위를 확인하거나 core.mjs의 visibleTasks를 명시하고 필요한 코드를 제공합니다. node는 같은 통합 터미널에서 확인하며 다른 셸의 성공으로 대신하지 않습니다. 응답 중단 후에는 diff를 보고 남은 작업을 요청합니다.

다시 연습하려면 보관한 broken/core.mjs만 실습 사본에 복원해 원래 필터 실패가 돌아오는지 확인합니다. 다른 작업을 지우는 전체 강제 초기화는 하지 않습니다. 로컬 검증은 broken의 의도된 실패, expected의 통과, 참조 화면이며 확장이 생성한 결과라고 주장하지 않습니다. 다음은 디버깅, 테스트와 리뷰, Git 차이입니다.

Codex 학습 목차로 돌아가기

자세한 설명 보기

Editor to Selection to Diff

• AI 도구
• 튜토리얼
• Codex