디버깅 5가지 실제 버그: Console.log를 포함하지 않는 실용적인 워크스루

I’m happy to translate the article for you, but I don’t have the full text of the post. Could you please paste the content you’d like translated (excluding the source line you already provided)? Once I have the article’s text, I’ll translate it into Korean while preserving the original formatting, markdown, and any code blocks or URLs.

소개

프론트엔드 개발자로서 저는 끊임없이 두 종류의 버그와 싸우고 있습니다:

• 런타임 가시 버그 – 콘솔에 나타나 UI를 깨뜨립니다.
• 무음 버그 – 오류를 발생시키지는 않지만 앱이 잘못 동작합니다.

두 버그 모두 악몽과 같습니다. 그래서 저는 theORQL 팀과 함께 그들의 AI‑기반 런타임 디버거를 사용해 보기로 했습니다. 설립자와의 멋진 대화 후 (자세한 내용은 여기를 참고), 도구가 실제로 어떻게 작동하는지 보여주는 단계별 영상을 녹화했습니다.

AI 시대에, 어떻게 디버깅하시나요?
설립자의 팁이 포함된 전체 영상 가이드를 YouTube에서 시청하세요: [실용 비디오 가이드 – theORQL로 디버깅]

theORQL이 하는 일

• Chrome 내부에서 실행 – 탭을 전환할 필요 없음.
• 수정 사항을 VS Code에 동기화 – 한 번 클릭으로 차이 적용.
• 오류를 연관시킴 – 네트워크 실패, 콘솔 경고, DOM 이상, 스택 트레이스가 모두 연결됨.

아래는 날씨 앱 데모에서 탐색한 다섯 가지 버그입니다. 각 섹션에는:

1. 버그가 어떻게 보이는지
2. 앱을 깨는 이유
3. theORQL이 이를 식별하고 수정하는 방법
4. 짧은 동영상 클립 (썸네일을 클릭하면 정확한 오류를 확인할 수 있습니다)

1️⃣ Snowflake Texture Not Loading

💡 Note: Click the video to see the exact error.

• 증상: 눈 페이지에 눈송이가 떨어져야 하지만 화면이 비어 있습니다.
• 근본 원인: Network 탭에서 snowflake.png에 대한 404 오류가 발생하고, 콘솔에 TextureLoader.load 실패 경고가 표시됩니다.
• theORQL 해결 방법:
  1. 빈 렌더링을 실패한 요청과 연관시킵니다.
  2. TextureLoader.load('assets/snowflake.src') 라인을 강조합니다.
  3. URL을 올바른 경로로 수정할 것을 제안합니다.
  4. 변경 사항을 VS Code에 동기화하고, 새로 고침하면 눈이 나타납니다.

▶️ Snowflake Bug Clip

2️⃣ CalendarPanel 런타임 렌더 오류

💡 Note: 동영상을 클릭하면 정확한 오류를 확인할 수 있습니다.

• 증상: 날짜를 클릭하면 React 오류가 발생하고 Next.js 빨간 오버레이가 나타납니다.
• 원인: formatYYYYMMDD에 null/undefined 날짜 값이 전달되어 undefined에서 getFullYear를 호출함.
• theORQL 해결책:
  1. 예외와 스택 트레이스를 캡처합니다.
  2. formatYYYYMMDD의 정확한 라인을 지적합니다.
  3. 포맷팅 전에 null‑체크를 추가할 것을 권장합니다.
  4. VS Code에서 diff를 적용하면 캘린더가 충돌 없이 작동합니다.

▶️ CalendarPanel Bug Clip

3️⃣ Weather Service Unauthorized Requests

💡 Note: Click the video to see the exact error.

• Symptom: 모든 API 요청이 401/403 오류와 함께 실패하고, 날씨 패널에 오류 상태가 표시됩니다.
• Root cause: fetch 호출에 인증 헤더(예: Authorization: Bearer )가 누락되었습니다.
• theORQL fix:
  1. 실패한 요청을 추적하고 누락된 헤더를 표시합니다.
  2. weatherService.js 파일에서 fetch 호출을 강조합니다.
  3. 필요한 헤더 삽입을 제안합니다.
  4. 동기화 후 요청이 성공하고 도시 전환이 정상 작동합니다.

▶️ Auth Header Bug Clip

4️⃣ Calendar Day Numbers Invisible

💡 Note: Click the video to see the exact error.

• Symptom: Calendar UI renders, but day numbers are invisible (clicking still selects a date). No console errors.
• Root cause: Computed styles hide the text (color: transparent or opacity: 0) via a stray CSS class.
• theORQL fix:
  1. Captures a DOM snapshot and shows that the text exists but is hidden.
  2. Points to the offending CSS rule (.day-label { color: transparent; }).
  3. Proposes removing the rule or changing the color to a visible one.
  4. Apply the diff → dates become visible.

▶️ Invisible Dates Bug Clip

5️⃣ Planner Modal “Add” 버튼이 아무 작업도 하지 않음

💡 참고: 정확한 오류를 보려면 영상을 클릭하세요.

• 증상: 작업을 입력하면 정상적으로 보이지만 Add 버튼을 클릭하거나 Enter 키를 눌러도 추가되지 않음. 콘솔 오류는 없음.
• 원인: 컴포넌트 내부 draft 상태가 onChange 바인딩이 깨져서 업데이트되지 않음; 핸들러가 빈 문자열을 받음.
• theORQL 해결책:
  1. 클릭 이벤트를 핸들러까지 추적하고 상태/값 불일치를 확인.
  2. 깨진 바인딩 (value={draft}에 적절한 onChange가 없음) 강조.
  3. 양방향 바인딩 복원을 제안.
  4. 변경 사항을 동기화 → 작업이 정상적으로 추가됨.

▶️ Planner Modal Bug Clip

Takeaways

이 다섯 가지 버그—자산 로드 실패, 런타임 예외, 인증 문제, 숨겨진 UI, 그리고 무음 로직 오류—는 명확한 콘솔 출력이 없는 흔한 런타임 문제를 대표합니다.

theORQL 은 다음을 통해 도움을 줍니다:

• Chrome(네트워크, 콘솔, DOM, 이벤트)에서 직접 증거를 캡처합니다.
• AI가 생성한 인간이 읽기 쉬운 설명을 제공합니다.
• VS Code와 동기화되는 원클릭 diff 기능을 제공합니다.

그 결과? 컨텍스트 전환을 줄이고 더 빠르고 집중된 디버깅이 가능합니다.

🎯 직접 사용해 보고 싶으신가요?

• theORQL의 VS Code 확장 프로그램을 설치
• Chrome DevTools를 열고 디버거를 실행한 뒤 AI에게 무거운 작업을 맡기세요.

유용하다고 생각되면, 여러분만의 버그 스토리를 커뮤니티와 공유해 주세요!

행복한 디버깅 되세요! 🤓

참고: 위의 모든 비디오 링크는 자리표시자이며, 실제 YouTube URL로 교체해 주세요.