Week 4 · 통합 점검과 디버깅 Day 26 / 42

console.log 전략적 사용법

낙서가 아니라 이정표를 세우는 법

10초 핵심 요약

01

데이터 흐름 4단계에 이정표 세우기

길을 잃었을 때 지도 전체를 다시 볼 필요는 없습니다. 갈림길마다 이정표를 세워두면 "여기까진 왔다"는 걸 압니다. 클릭 한 번이 화면에 반영되기까지는 보통 클릭 감지 → 요소 찾기 → 데이터 가져오기 → 화면에 삽입, 이 4단계를 거칩니다. 각 단계 사이에 log를 심어두면 정확히 어느 단계에서 멈췄는지 눈으로 보입니다. 이렇게 단계마다 log를 심어 진행 상황을 확인하는 방법을 데이터 흐름 추적이라고 부릅니다.

btn.addEventListener('click', () => {
  console.log('1. 클릭 감지됨');
  const card = document.querySelector('.post-card');
  console.log('2. 요소 찾음:', card);
});
02

console의 여러 얼굴

console.log

일반 출력

console.error

빨간 강조 출력

console.warn

노란 경고 출력

console.table

배열을 표로 출력

포스트 목록처럼 데이터가 여러 개 든 배열은 console.table(posts)로 찍어보세요. 각 항목이 행과 열로 정리되어, 어떤 값이 비어있는지 한눈에 보입니다. Week 5에서 실제 데이터를 다룰 때 계속 쓰게 됩니다.
03

배포 전 청소는 선택이 아니라 필수

개발 중에는 log가 도움이 되지만, 실제로 배포한 뒤에도 남아있으면 방문자 아무나 F12를 눌러 내가 찍어둔 데이터 구조를 그대로 볼 수 있습니다. 완성 후에는 log를 전부 지우거나 주석 처리하세요.

안 될 때 확인하세요 log를 찍었는데 Console에 아무것도 안 뜬다면, 그 코드 줄까지 실행이 도달하지 못했다는 뜻입니다. 그 위쪽 단계에 log를 하나 더 찍어서 어디서 멈췄는지 좁혀가세요.
04

Day 26 완료 체크리스트

클릭 이벤트에 log를 추가해 실행 흐름을 눈으로 확인했다.
확인이 끝난 뒤 디버깅용 log를 전부 제거했다.
스스로 설명해보기 — log를 아무 데나 안 찍고 4곳(함수 진입/데이터 수신/이벤트 발생/의심 지점)에만 찍는 이유를 설명할 수 있나요?

오늘의 용어

console.table
배열 데이터를 표 형태로 출력하는 디버깅 함수
데이터 흐름 추적
클릭부터 화면 반영까지 각 단계에 log를 심어 진행 상황을 확인하는 방법
배포(deploy)
완성한 코드를 실제 방문자가 볼 수 있도록 공개하는 것