버그 분석과 해결을 위한 효과적인 프롬프트 패턴을 알아봅니다.
디버깅 프롬프트 구조
기본 디버깅 요청
에러 분석
다음 에러를 분석하고 해결해줘.
에러 메시지:
TypeError: Cannot read properties of undefined (reading 'map')
at UserList (UserList.tsx:15:23)
관련 코드:
[코드]
상황:
- API 호출 후 발생
- 처음에는 정상 동작
- 새로고침 시 발생
원인 분석과 해결책 제시해줘.
동작 오류
코드가 예상대로 동작하지 않아.
코드:
[코드]
기대 동작:
- 버튼 클릭 시 모달 열림
- 폼 제출 시 데이터 저장
- 성공 후 리다이렉트
실제 동작:
- 모달은 열림
- 데이터 저장 안됨
- 콘솔에 에러 없음
원인을 찾고 수정해줘.
상세 디버깅
비동기 문제
비동기 코드에서 문제가 발생해.
코드:
async function fetchData() {
const users = await api.getUsers();
const posts = await api.getPosts();
// users가 undefined인 경우가 있음
return processData(users, posts);
}
증상:
- 가끔 users가 undefined
- 네트워크 오류 시 더 자주 발생
- 에러 처리가 안됨
확인해야 할 것:
- 에러 처리
- 레이스 컨디션
- 타임아웃
상태 관리 문제
React 상태 업데이트가 이상해.
코드:
[상태 관리 코드]
증상:
- 상태 변경이 즉시 반영 안됨
- 이전 값이 나타남
- 무한 리렌더링 발생
확인:
- useState 사용법
- useEffect 의존성
- 불변성 유지
- 비동기 업데이트
메모리 누수
메모리 누수가 의심돼.
증상:
- 시간이 지나면 느려짐
- 메모리 사용량 계속 증가
- 컴포넌트 언마운트 경고
관련 코드:
[코드]
확인 사항:
- cleanup 함수
- 이벤트 리스너 해제
- 타이머/인터벌 정리
- 구독 해제
환경별 디버깅
프로덕션 전용 에러
로컬에서는 되는데 프로덕션에서 안 돼.
환경:
- 로컬: Next.js dev 모드
- 프로덕션: Vercel 배포
에러:
[프로덕션 에러 로그]
차이점:
- 환경 변수
- 빌드 최적화
- SSR/CSR 차이
원인 분석해줘.
브라우저 호환성
특정 브라우저에서만 문제야.
동작 브라우저: Chrome, Firefox
문제 브라우저: Safari, iOS Safari
코드:
[코드]
증상:
- Safari에서 레이아웃 깨짐
- iOS에서 스크롤 이상
CSS/JS 호환성 문제 확인해줘.
성능 디버깅
느린 렌더링
컴포넌트 렌더링이 느려.
컴포넌트:
[코드]
측정 결과:
- 리렌더링 횟수: 20+
- 렌더링 시간: 100ms+
확인:
- 불필요한 리렌더링
- 무거운 계산
- 큰 리스트 처리
React DevTools 프로파일러 결과 해석도 해줘.
API 응답 지연
API 응답이 느려.
엔드포인트: GET /api/products
측정:
- 응답 시간: 3초+
- DB 쿼리 시간: 2.5초
코드:
[API 코드]
[DB 쿼리]
최적화 방안 제시해줘.
디버깅 도구 활용
콘솔 디버깅
효과적인 console.log 디버깅 방법 알려줘.
현재 문제:
[코드]
요청:
- 전략적인 로그 위치
- 유용한 로그 포맷
- 조건부 로깅
- 성능 측정 로그
브레이크포인트 전략
복잡한 로직 디버깅을 위한 브레이크포인트 전략을 알려줘.
코드:
[복잡한 비즈니스 로직]
요청:
- 어디에 브레이크포인트?
- 조건부 브레이크포인트
- 감시할 변수
- 콜 스택 분석 방법
에러 패턴
일반적인 에러 패턴
다음 에러의 일반적인 원인과 해결책을 알려줘.
에러: "Maximum call stack size exceeded"
관련 코드:
[코드]
확인:
- 무한 재귀
- 무한 루프
- 잘못된 기저 조건
TypeScript 에러
TypeScript 에러를 해결해줘.
에러:
Type 'string | undefined' is not assignable to type 'string'.
코드:
[코드]
해결 방법:
- 타입 가드
- 옵셔널 체이닝
- Non-null assertion
- 기본값 처리
각 방법의 적절한 사용 상황도 설명해줘.
실전 프롬프트
복합 문제 분석
여러 증상이 있는 문제를 분석해줘.
증상들:
1. 간헐적으로 데이터가 비어있음
2. 가끔 중복 요청 발생
3. 메모리 사용량 증가
4. 특정 사용자에게만 발생
관련 코드:
[컴포넌트 코드]
[훅 코드]
[API 코드]
환경:
- React 18
- React Query
- WebSocket 사용
가능한 원인들과 해결 방안을 제시해줘.
단계별 디버깅 가이드
이 문제를 단계별로 디버깅하는 방법을 알려줘.
문제: 로그인 후 가끔 세션이 사라짐
관련 코드:
[인증 관련 코드]
요청:
1. 재현 시나리오 정리
2. 로그 추가 위치
3. 확인할 체크포인트
4. 가설과 검증 방법
5. 해결 후 검증 방법
팁
| 팁 | 설명 |
|---|---|
| 에러 메시지 전체 | 스택 트레이스 포함 |
| 재현 조건 | 어떤 상황에서 발생? |
| 관련 코드 전체 | 컨텍스트 제공 |
| 환경 정보 | 버전, 브라우저 등 |
| 시도한 것 | 이미 해본 해결책 |
정확한 정보가 빠른 해결을 만듭니다.