Task 02 Task 02 오류 해결 도우미 실습 가이드
📥 실습 입력 (Input)
- •
day6_meeting_notes.md(회의록)
💾 실습 출력 (Output)
- •
day6_debug_solution.js
1. 스토리 및 실습 배경
화면을 띄우고 신나게 API 데이터를 가져오도록 JavaScript 코드를 작성했습니다. 그런데 브라우저 새로고침을 누르자 화면이 하얗게 멈추고 콘솔(Console)창에 TypeError: Cannot read properties of undefined (reading 'map')라는 에러 메시지가 붉은색으로 가득 찼습니다. 주니어 개발자는 원인을 몰라 코드만 수십 번 쳐다보고, 구글 검색창에 메시지를 쳐봐도 내 상황과 맞지 않는 영어 답변만 쏟아져 결국 좌절감에 빠졌습니다.
개발의 절반 이상은 오류를 찾아내고 고치는 '디버깅' 과정입니다. 초급자는 에러의 단서인 에러 로그를 읽고 해석하는 능력이 부족해 많은 시간을 낭비합니다. 이번 실습에서는 Codex에게 발생한 오류 현상과 에러 로그, 그리고 실행 코드를 전달하여 문제의 근본적인 발생 지점을 정확히 짚어내고 즉시 고쳐 쓸 수 있는 조치 요령을 처방받는 실습을 진행합니다.
2. 학습 목표
- 브라우저 콘솔 및 서버 로그의 에러 메시지를 읽고 문제의 유형을 판별할 수 있다.
- 에러가 발생한 원인과 발생 경로(Stack Trace)를 분석하는 논리적 디버깅 습관을 기른다.
- AI가 제안한 오류 분석 보고서를 바탕으로 안전한 방어적 코드(Defensive Coding)를 직접 적용할 수 있다.
🛠️ 실제 따라 하기 실습 가이드
- 실습용 파일 생성: 아래 다운로드 버튼을 눌러
day6_meeting_notes.md파일을automation/폴더 내에 저장합니다. - Codex 디버깅 의뢰: Codex Client 프롬프트 입력창에 아래 **Codex 요청 프롬프트**를 전송하여 진단을 의뢰합니다.
- 오류 패치 적용: Codex의 원인 진단과 조건식 가드 및 가독성 높은 코드를 로컬 소스에 적용하고 새로고침하여 에러가 사라졌는지 검증합니다.
실습 자료 다운로드
Codex 요청 프롬프트
Task 02 Prompt
작성한 코드에서 'TypeError: Cannot read properties of undefined (reading 'map')' 에러가 발생했습니다. 제공된 소스코드 day6_debug_source.js와 콘솔 에러 로그를 대조해 에러가 발생한 원인(Why)을 초보자 눈높이에서 설명해 주고, 해당 에러를 완벽히 통제할 수 있는 방어 코드가 가미된 수정 소스를 제시해 주세요.
4. 결과물 예시
Codex는 회의 기록을 분석해 아래와 같이 정규화된 데이터 엔티티 매핑 및 Mermaid ERD 스크립트를 출력합니다.
| 파일명 | 오류 현상 | 주요 원인 | 처방 조치 |
|---|---|---|---|
| day6_debug_source.js | TypeError: Cannot read properties of undefined (reading 'map') | 데이터 fetch 지연으로 인한 빈 값(undefined) 참조 | 옵셔널 체이닝 및 예외 분기 처리 |
5. AI 활용 포인트
- 에러 문맥 분석: 단순 오타(Syntax) 에러뿐 아니라, 호출 순서나 비동기 실행 타이밍(Asynchronous Flow)으로 발생하는 비정형 런타임 예외 현상의 맥락을 유추해 냅니다.
- 디버깅 과정 가이드: 단순 해결 코드만 주는 것이 아닌, '왜 이 줄에서 에러가 터졌는가?'에 대한 개념 교육적 해설을 제공합니다.