JS 디버깅 도구 console.log()

console.log()

console.log() 는 JavaScript에서 데이터를 콘솔에 출력할 수 있는 함수입니다. 디버깅, 상태 확인, 실험 등 다양한 상황에서 사용되며, 단순한 출력 이상의 강력한 기능들을 내포하고 있습니다.

console.log()의 동작 원리

브라우저 환경에서

• console은 브라우저가 내장한 객체로, 개발자 도구(DevTools) 콘솔에 접근할 수 있도록 함.
• 실제 구현은 브라우저마다 다르미잔 보통 C++로 작성된 콘솔 API를 JS에서 감싼 형태

Node.js 환경에서

• console.log()는 내부적으로 stdout(표준 출력 스트림)을 사용

다양한 출력 방식

여러값 출력

let name = "Tom", age = 30;
console.log("이름:", name, "나이:", age);

출력은 ',' 기준 공백으로 구분됨

문자열 포맷 사용

console.log("Hello %s, you are %d years old.", "Tom", 30);
// Hello Tom, you are 30 years old.

• %s: 문자열
• %d or % %i: 정수
• %f: 부동소수
• %o: 객체
• %c: css 스타일 적용

스타일 출력(%c 사용)

console.log("%c주의사항!", "color: red; fond-weight: bold;");

객체 배열 출력

const user = { name: "Alice", age: 28 };
console.log(user);

// 배열 출력
console.log(["apple", "banana", "cherry"]);

• 개발자 도구에서는 객체/배열이 트리 구조로 펼쳐 보이기 때문에, 구조 파악에 유용함
• console.dir()을 사용하면 객체 구조만 집중적으로 볼 수 있음

타이머와 카운터

console.time("timer1");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("timer1");

console.count("click");
console.count("click");

• console.time(label): 시간 측정 시작
• console.timeEnd(label): 시간 측정 종료 및 출력
• console.count(label): 호출 푓수 출력(디버깅 반복 검사에 유용)

콘솔 크룹화

console.group("유저 정보");
console.log("이름: Alice");
console.log("나이: 30");
console.groupEnd();

• 복잡한 출력 내용을 트리구조로 정리해서 확인 가능

console의 다른 메서드

• console.warn(): 경고 메시지 출력(노란색)
• console.error(): 오류 메시지 출력(빨간색)
• console.table(): 배열/객체를 테이블 형식으로 출력
• console.assert(): 조건이 false일 때만 출력
• console.clear(): 콘솔 내용 지우기

  console.warn("이건 경고입니다");
  console.error("이건 에러입니다");
  console.table([{ name: "Tom", age: 28 }, { name: "Jane", age: 32 }]);
  console.assert(1 === 2, "1과 2는 같지 않다!");

언제 console.log()를 사용하는가?

• 디버깅: 함수가 호출되었는지 확인
• 값 추적: 변수 값 변화 감지
• 조건 확인: if/else 경로 추적
• API 응답 확인: fetch 또는 axios 결과 확인

프로덕션(배포)에서는 어떻게 해야 할까?

개발용 console.log()는 배포 시 제거하거나 조건 부 출력이 권장됨

if(process.env.NODE_ENV === "development"){
    console.log("개발 모드에서만 보이는 로그"); 
}

또는 로깅 라이브러리(winston, log4js) 사용 권장