console.log 디버깅
가장 단순하고 효과적인 디버그 도구
⏱ 예상 ~5분
01 · 읽기
브레이크포인트, 워치 표현식, 스텝 실행 같은 화려한 디버그 도구도 있어요. 나중에 배울 거예요. 하지만 시니어 엔지니어도 가장 자주 쓰는 도구는 소박한 console.log()예요.
아이디어는 정말 단순해요. 출력해서 실제로 뭐가 일어나는지 확인하는 거예요. 코드가 예상대로 동작하지 않을 때, 이유를 알아내는 가장 빠른 방법은 매 단계의 값을 로그로 찍어 예상한 것과 실제 일어난 것을 비교하는 거예요.
화려하지 않아요. 우아하지도 않아요. 하지만 통하고, 빨라요.
💡 상상해 봐요console.log 디버깅은 숲에 트레일 카메라를 두는 것과 같아요. 모든 나무를 동시에 볼 순 없지만, 핵심 지점에 카메라를 두면 뭐가 지나가는지 보여요. 예상 못 한 게 나타나면 정확히 어디를 봐야 할지 알 수 있죠.
02 · 읽기
버그가 있는 쇼핑몰 앱이에요. getAffordableElectronics 함수는 특정 가격 이하이면서 재고가 있는 전자제품을 반환해야 해요. 그런데 비싸고 품절된 제품을 반환하고 있어요. 조사해 볼게요.
03 · 터미널 실습
먼저 출력 로그를 읽고 함수가 실제로 뭘 만들어내는지 vs 예상한 게 뭔지 확인하세요.
(이 섹션은 인터랙티브해요 — JavaScript를 켜 주세요.)
04 · 터미널 실습
이제 코드를 읽고 로직을 따라가세요. 필터 단계를 보세요. 그중 하나에 미묘한 연산자 버그가 있어요.
(이 섹션은 인터랙티브해요 — JavaScript를 켜 주세요.)
05 · 코드 예제
아래는 각 단계에 디버그 로그를 추가하면 어떻게 보이는지예요. 중간 결과를 비교해서 어디서 잘못되는지 추적하세요.
디버그 로그 추가
function getAffordableElectronics(items, maxPrice) {
console.log('Input:', items.length, 'items, max price:', maxPrice);
const electronics = items.filter(item => item.category === 'electronics');
console.log('After category filter:', electronics.map(i => i.name));
const affordable = electronics.filter(item => item.price > maxPrice);
console.log('After price filter:', affordable.map(i => i.name));
// ^ This would show ['Laptop', 'Monitor'] — WRONG direction!
const available = affordable.filter(item => item.inStock);
console.log('After stock filter:', available.map(i => i.name));
return available.map(item => item.name);
}
각 단계에 로그가 있으면 버그가 튀어나와요. price 필터 다음에 비싼 아이템이 살아남는 게 보이고, 싼 게 살아남아야 하는데 그렇지 않아요. >는 <여야 해요. 로그 없이는 한참 추측하겠지만, 로그가 있으면 몇 초 안에 찾을 수 있어요.
06 · 읽기
전략적 로그는 예술이에요. 사방에 로그를 뿌리지 마세요. 데이터가 변환되거나 잘못될 가능성이 있는 지점에 두세요.
핵심 정리
- 함수 시작에 로그(호출됐나? 뭘 가지고?)
- 변환 전후에 로그(뭐가 바뀌었나?)
- 각 로그에 라벨 추가: console.log('step 3 - data:', data)
- commit 전에 디버그 로그 지우기
07 · 빈칸 채우기
console.log로 디버깅할 때, 항상 _____ 을 추가해서 어떤 로그가 어떤 건지 알 수 있게 하세요.
08 · 퀴즈
왜 모든 console.log에 라벨을 달아야 할까요?
- 프로그램이 더 빨리 돌게 하려고
- 어떤 로그가 어떤 출력을 만들었는지 구분할 수 있게
- JavaScript가 console.log에 라벨을 요구해서
- 프로덕션 코드에만 라벨이 필요해서
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.