01 / 14

SESSION 47 · Part 8 AI 이해와 활용

AI와 함께하는
디버깅·코드리뷰

에러 전달 포맷 · 컨텍스트 · 신뢰도 · 환각 경계

02 / 14

💭

왜 디버깅을 AI와
해야 할까?

혼자 검색하면 30분, AI에게 잘 물으면 3분.
하지만 잘못 물으면 엉뚱한 답으로 시간이 더 든다.

"잘 묻는 법"이 디버깅 능력의 절반이다.

03 / 14

🎯

이 세션에서
배우는 것

📋

에러 전달 포맷

AI가 빠르게 진단할 수 있는 5요소 포맷을 만든다

🔍

코드 리뷰 패턴

버그·성능·가독성·보안 4관점 프롬프트 패턴

⚠️

신뢰도 판단

AI의 답을 검증하고 환각을 가려내는 기준

04 / 14

📋

에러 전달 —
5요소 포맷

이 다섯 가지를 한 번에 묶어서 보내면 답의 정확도가 급상승한다.

1

에러 메시지 전문

잘라내지 말고 스택 트레이스까지 전부 — "…" 생략 금지

2

시도한 코드

에러가 난 그 함수·블록을 그대로. 코드 펜스(```)로 감싸기

3

기대한 결과

"이렇게 동작해야 한다"는 예상 — 입력과 원하는 출력

4

실제 결과

받은 출력·로그·스크린샷 — 무엇이 다른지 명확히

5

환경 정보

언어·버전·OS·프레임워크 — Node 20, React 18, macOS 14 등

05 / 14

같은 버그, 다른 결과

같은 문제도 어떻게 묻느냐에 따라 답의 질이 완전히 달라진다.

❌ 나쁜 질문

"코드가 안 돼요"
"에러 났어요. 도와줘요"
"왜 이게 안 작동하지?"
코드도 에러도 첨부 없음

✓ 좋은 질문

에러 메시지 전문 첨부
관련 코드 블록 포함
기대 vs 실제 결과 명시
환경(Node 20, React 18) 명시

06 / 14

📎

컨텍스트 첨부 —
주변 정보까지

문제의 코드만 던지지 말고, 함께 동작하는 것들도 함께 보내자.

📁

코드 리뷰 —
4관점 프롬프트

"리뷰해 줘" 한 마디보다, 관점을 명시하면 훨씬 깊은 답이 온다.

🐛

1. 버그

엣지 케이스, null/undefined 처리, 예외 누락 — 동작이 깨질 지점

⚡

2. 성능

불필요한 반복, O(n²) 알고리즘, 메모리 누수 — 느려질 지점

📖

3. 가독성

변수명, 함수 길이, 주석 — 6개월 뒤의 내가 읽을 수 있는가

🔒

4. 보안

SQL 주입, XSS, 비밀키 노출, 권한 누락 — 공격받을 지점

📋 "이 코드를 ① 버그 ② 성능 ③ 가독성 ④ 보안 관점에서 리뷰해 줘"

08 / 14

💬

실전 — AI와 디버깅 대화

5요소 포맷을 적용한 실제 예시를 보자.

👤

에러: TypeError: Cannot read property 'map' of undefined
코드: users.map(u => u.name)
기대: 사용자 이름 배열
실제: 위 에러로 크래시
환경: React 18, TypeScript 5

🤖

users가 undefined일 때 map을 호출해서 발생합니다. 세 가지 해법:
1. 옵셔널 체이닝: users?.map(u => u.name)
2. 기본값: (users ?? []).map(...)
3. API 응답이 늦을 가능성 — useEffect 후 setUsers 전에 렌더되는지 확인

👤

3번이 맞아. fetch 후 데이터 도착 전에 렌더링됨

🤖

그럼 로딩 상태를 추가하세요: const [loading, setLoading] = useState(true) → {loading ? <Spinner /> : users.map(...)}

09 / 14

👻

환각 — 그럴듯한 거짓말

AI는 "가장 그럴듯한 다음 토큰"을 고른다. 그래서 진짜처럼 보이는 가짜를 만들어낼 수 있다.

📚

존재하지 않는 함수

array.flatten() 같은 가상의 메서드를 자신 있게 추천

📦

없는 라이브러리

npm install fake-package-name — 실제로 없는 패키지

📜

잘못된 API 시그니처

실제 함수지만 인자 순서·타입을 틀리게 알려줌

기억: 환각은 버그가 아니다 — LLM의 본질적 특성이다.

10 / 14

✅

신뢰도 판단 —
검증의 기술

AI의 답을 그대로 믿지 말고, 항상 한 번 확인하자.

1

실행해본다

받은 코드를 실제로 돌려본다 — 에러 없이 동작하는가

2

공식 문서 확인

AI가 말한 함수·옵션이 실제 docs에 있는지 검색

3

출처 요구

"이 정보의 출처는?" — 답하지 못하면 의심해보자

4

중요 결정은 이중 확인

결제·보안·배포 같은 위험 영역은 사람이 한 번 더 검토

11 / 14

🩺

AI 디버깅 = 의사 진료받기

증상만 말하면 진단이 어렵다. 의사가 묻는 그 질문들을 미리 답해주자.

🏥 진료 비유

증상

=

에러 메시지 — 어디가 어떻게 아픈가

언제부터

=

재현 단계 — 어떤 동작 후에 발생하는가

무엇을 했더니

=

시도한 코드 — 어떤 처치를 받았는가

기대 vs 실제

=

정상이면 어떻고, 지금은 어떤가

환경

=

기저질환·약 — 언어·버전·OS

12 / 14

🔄

실전 디버깅 워크플로

다음 순서대로 움직이면 막힘이 줄어든다.

📋 5요소
정리

→

📎 컨텍스트
첨부

→

🤖 AI에
질문

→

▶️ 실행
검증

→

📚 문서
확인

→

✅ 적용

반복 가능: 답이 부족하면 더 좁힌 추가 질문으로 다시.

13 / 14

📌

핵심 정리

📋

5요소

에러·코드·기대·실제
·환경 포맷으로

📎

컨텍스트

관련 파일·로그
스크린샷 함께

🔍

4관점 리뷰

버그·성능
가독성·보안

👻

환각 경계

없는 함수·라이브러리
그럴듯한 거짓 가능

✅

검증 필수

실행·문서·출처
로 이중 확인

🩺

진료 자세

증상만 말하지 말고
맥락까지 함께

14 / 14

🚀

다음 세션
Session 48 · 나만의 첫 프로젝트 기획

도구 사용법을 익혔으니, 이제 실전이다.
막연한 아이디어를 어떻게 기능 목록과 MVP로 좁힐까?
나만의 첫 프로젝트 기획으로 들어간다.

💡 기억할 것: AI는 의사 — 증상만 말하지 말고 맥락까지 함께 전하자.

AI와 함께하는디버깅·코드리뷰

에러 전달 포맷 · 컨텍스트 · 신뢰도 · 환각 경계

왜 디버깅을 AI와해야 할까?

이 세션에서배우는 것

에러 전달 —5요소 포맷