🔍 console.log 졸업! 프로 개발자의 디버깅 꿀팁 5가지

🎯 "아직도 console.log만 쓰세요?"

안녕하세요! 오늘은 제가 5년간 console.log만 쓰다가 최근에 알게 된 충격적인 디버깅 방법들을 공유하려고 합니다.

솔직히 고백하자면, 저도 얼마 전까지 이랬어요:

console.log("여기1");
console.log("여기2");
console.log("값 확인:", data);
console.log("이거 실행됨?");
// ... 100개의 console.log

그런데 시니어 개발자가 제 코드를 보더니 한숨을 쉬면서...
"이거 10초면 찾을 수 있는 버그인데요?" 라고 하더라고요. 😱

오늘은 그때 배운 진짜 프로가 쓰는 디버깅 비법 5가지를 알려드릴게요!

🚀 꿀팁 1: debugger 중단점 - "console.log는 이제 그만!"

기존 방식 (주니어의 삶)

function calculatePrice(items) {
  console.log("함수 시작");
  console.log("items:", items);
  
  const total = items.reduce((sum, item) => {
    console.log("현재 item:", item);
    console.log("현재 sum:", sum);
    return sum + item.price * item.quantity;
  }, 0);
  
  console.log("total:", total);
  return total;
}

프로의 방식 (1초 디버깅)

function calculatePrice(items) {
  debugger; // 여기서 멈춤! F10으로 한 줄씩 실행
  
  const total = items.reduce((sum, item) => {
    return sum + item.price * item.quantity;
  }, 0);
  
  return total;
}

🎯 사용법:

1. 코드에 debugger; 추가
2. 개발자 도구 열고 실행
3. F10 = 다음 줄, F11 = 함수 안으로, F8 = 계속 실행
4. 변수 위에 마우스 올리면 값이 보임!

💡 꿀팁 중의 꿀팁: 조건부 중단점

// 특정 조건일 때만 멈추고 싶다면?
if (user.id === 'problem-user-123') {
  debugger; // 문제 있는 유저일 때만 멈춤!
}

🎨 꿀팁 2: Chrome DevTools의 숨겨진 보물들

2-1. Logpoints - "코드 수정 없이 로그 추가"

상황: 프로덕션 코드라 console.log 추가 못함

해결:

1. Sources 탭 → 줄 번호 우클릭
2. "Add logpoint" 선택
3. "User ID:", user.id, "Action:", action 입력
4. 새로고침 없이 로그 확인!

2-2. DOM 중단점 - "누가 내 DOM을 건드렸나?"

// 이런 경험 있으시죠?
// "분명 display: none 했는데 왜 보이지?"
// "누가 이 클래스를 삭제했지?"

해결법:

1. Elements 탭에서 요소 우클릭
2. "Break on" → "attribute modifications" 선택
3. 이제 누가 건드리면 바로 잡힘!

2-3. Copy as Fetch - "Postman 필요 없음"

네트워크 탭에서:

1. API 요청 우클릭
2. "Copy" → "Copy as fetch"
3. 콘솔에 붙여넣기
4. 바로 테스트!

// 자동으로 이렇게 복사됨
fetch("https://api.example.com/users", {
  headers: {
    "authorization": "Bearer token...",
    "content-type": "application/json"
  },
  body: JSON.stringify({name: "test"}),
  method: "POST"
});

💻 꿀팁 3: VS Code 디버거 - "터미널은 이제 안녕"

Node.js 디버깅 (갓세팅)

기존 방식:

node app.js
# console.log 지옥...

프로 방식:

1. VS Code에서 F5 누르기
2. "Node.js" 선택
3. 끝!

더 프로 방식 (자동 연결):

// package.json
{
  "scripts": {
    "dev": "node --inspect index.js"
  }
}

VS Code 설정:

1. Ctrl+Shift+P → "Debug: Toggle Auto Attach"
2. "Always" 선택
3. 이제 npm run dev만 하면 자동 디버거 연결!

React 디버깅 (리액트 개발자 필독!)

// .vscode/launch.json
{
  "type": "chrome",
  "request": "launch",
  "name": "React 디버깅",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src",
  "sourceMaps": true
}

이제 VS Code에서 React 컴포넌트에 중단점 설정 가능! 🎉

🎯 꿀팁 4: 로그 레벨 활용 - "console.log 대신 이것!"

주니어 스타일

console.log("데이터:", data);
console.log("에러!!!:", error);
console.log("경고:", warning);

시니어 스타일

// 레벨별로 다르게!
console.debug("개발 중에만 필요한 정보", data);
console.info("일반 정보: 서버 시작됨");
console.warn("⚠️ 경고: API 응답 느림", responseTime);
console.error("❌ 에러 발생:", error);

// 그룹으로 묶기
console.group("사용자 인증 프로세스");
console.log("1. 토큰 확인");
console.log("2. 권한 검증");
console.log("3. 세션 생성");
console.groupEnd();

// 테이블로 보기 (이거 진짜 신기함!)
const users = [
  {id: 1, name: "김개발", age: 25},
  {id: 2, name: "박코딩", age: 30}
];
console.table(users); // 표로 예쁘게 출력됨!

// 시간 측정
console.time("API 호출");
await fetch('/api/users');
console.timeEnd("API 호출"); // API 호출: 234.5ms

// 스택 추적
console.trace("여기서 호출됨");

프로덕션용 로거 설정

// 환경별 로그 레벨 설정
const LOG_LEVEL = process.env.NODE_ENV === 'production' ? 'error' : 'debug';

const logger = {
  debug: (...args) => LOG_LEVEL === 'debug' && console.debug(...args),
  info: (...args) => ['debug', 'info'].includes(LOG_LEVEL) && console.info(...args),
  warn: (...args) => ['debug', 'info', 'warn'].includes(LOG_LEVEL) && console.warn(...args),
  error: (...args) => console.error(...args) // 에러는 항상 출력
};

// 사용
logger.debug("개발 환경에서만 보임");
logger.error("모든 환경에서 보임");

🔥 꿀팁 5: 성능 & 메모리 디버깅 - "왜 느린지 이제 알 수 있다!"

5-1. Performance 측정

// 성능 측정 마크
performance.mark('myFunction-start');

// 무거운 작업
for(let i = 0; i < 1000000; i++) {
  // 뭔가 처리
}

performance.mark('myFunction-end');
performance.measure('myFunction', 'myFunction-start', 'myFunction-end');

// 결과 확인
const measure = performance.getEntriesByName('myFunction')[0];
console.log(`실행 시간: ${measure.duration}ms`);

5-2. 메모리 누수 찾기

증상:

• 앱이 점점 느려짐
• 메모리 사용량이 계속 증가

진단법:

// 메모리 사용량 체크
console.log("메모리 사용:", performance.memory);

// 주기적으로 체크
setInterval(() => {
  const used = performance.memory.usedJSHeapSize / 1048576;
  console.log(`현재 메모리: ${used.toFixed(2)} MB`);
}, 5000);

Chrome DevTools로 찾기:

1. Memory 탭 → Heap Snapshot
2. 작업 수행
3. 다시 Snapshot
4. Comparison 보기
5. "Detached DOM" 찾기 ← 이게 주범!

5-3. React 성능 디버깅

// React DevTools Profiler 사용
// 1. React DevTools 설치
// 2. Profiler 탭 클릭
// 3. 녹화 시작 → 액션 수행 → 중지
// 4. 어느 컴포넌트가 오래 걸리는지 바로 보임!

// 컴포넌트 렌더링 추적
function MyComponent() {
  console.log("MyComponent 렌더링됨");
  
  // 왜 리렌더링되는지 확인
  useEffect(() => {
    console.log("Props 변경됨:", props);
  });
  
  return <div>...</div>;
}

🎪 보너스: 2025년 최신 디버깅 도구들

AI 디버깅 (이제는 AI가 디버깅도 해줌!)

Chrome DevTools AI Assistant:

1. DevTools 설정 → AI Innovations 활성화
2. 에러 발생 시 "Ask AI" 버튼 클릭
3. AI가 원인과 해결법 제시!

실제 예시:

// 에러: Cannot read property 'name' of undefined
// AI 답변: "user 객체가 undefined입니다. 
// API 응답을 확인하거나 옵셔널 체이닝(?.)을 사용하세요"

// 수정 코드 제안
const userName = user?.name || 'Guest';

원격 디버깅 (재택근무 필수!)

# 서버에서 Node.js 앱 실행
node --inspect=0.0.0.0:9229 app.js

# 로컬에서 Chrome 열고
chrome://inspect

# "Configure" → IP 주소 추가
# 이제 서버 앱을 로컬에서 디버깅!

📊 실전 디버깅 체크리스트

버그 발생 시 순서:

1. 에러 메시지 읽기 (50%는 여기서 해결)
2. debugger로 중단점 설정
3. 변수 값 확인 (마우스 호버)
4. 콜 스택 확인 (어디서 호출됐나)
5. 네트워크 탭 확인 (API 문제?)
6. 콘솔 에러 확인
7. AI에게 물어보기 (마지막 수단)

💬 실제 개발자들의 반응

김주니어 (경력 1년):

"debugger 하나만 알았어도 야근 반은 줄었을 것 같아요... console.log 100개 쓰면서 3시간 디버깅한 적도 있는데 ㅠㅠ"

박시니어 (경력 7년):

"신입 때 console.log만 쓰다가 선배가 debugger 알려줬을 때의 충격... 신세계였죠"

이풀스택 (경력 4년):

"Chrome DevTools Logpoint는 진짜 혁명입니다. 프로덕션 디버깅이 이렇게 쉬워지다니!"

🎯 오늘부터 실천하기

Level 1: 초급 (오늘 당장!)

• debugger; 사용해보기
• console.table() 써보기
• console.time() / timeEnd() 사용

Level 2: 중급 (이번 주)

• VS Code 디버거 설정
• Chrome DevTools Logpoint
• Performance 탭 사용해보기

Level 3: 고급 (이번 달)

• Memory 프로파일링
• 원격 디버깅 설정
• React/Vue DevTools 마스터

💭 마무리: console.log 졸업식

이제 console.log 지옥에서 벗어날 시간입니다!

처음엔 낯설겠지만, 한 번만 써보면 "내가 왜 이걸 몰랐지?" 하실 거예요.

특히 debugger; 하나만 제대로 써도 디버깅 시간이 70%는 줄어듭니다. 진짜로요!

마지막으로 제가 가장 좋아하는 디버깅 명언 하나 남기고 갈게요:

"The best debugger is a good night's sleep."
"최고의 디버거는 충분한 수면이다."

버그가 안 잡히면... 일단 자고 내일 다시 봅시다! 😴

---

여러분만의 디버깅 꿀팁이 있다면 댓글로 공유해주세요! console.log 졸업 후기도 환영합니다! 🎓