[TIP] 쉬운 디버깅을 위한 console 메소드 알아보기

 

1. console.log()

가장 기본적이면서 가장 많이 사용되는 메소드입니다. 변수의 값이나 프로그램의 상태 등을 로그로 출력합니다.

const number = 5;


console.log('Number:', number);
console.log(`Number: ${number}`); // 주로 이방법이 편하다. 예를 들면

console.log('foo: ', foo, ' bar: ', bar);
console.log(`foo: ${foo}, bar: ${bar}`); // 처럼 아래가 타자치기 조금 더 편한 느낌.

 

 

 

2. console.table()

배열이나 객체를 테이블 형태로 출력하여, 데이터를 한눈에 이해하기 쉽게 해 줍니다.

 

3. console.time() / console.timeEnd()

코드의 실행 시간을 측정하고 싶을 때 사용합니다. console.time()로 타이머를 시작하고 console.timeEnd()로 타이머를 종료하여, 그 사이의 실행 시간을 측정합니다.

console.time();

doSomeThing();

console.timeEnd();
// default: 74.093994140625 ms

 

 

 

4. console.assert()

조건이 false일 때 메시지를 출력합니다. 오류 검증에 유용하게 사용할 수 있습니다.

console.assert(1 === 2, '1 is not equal to 2');
// Assertion failed: 1 is not equal to 2

console.assert(1 === 1, 'This text is not output.');
//

 

5. console.warn()

console.error()와 같지만 warn 메시지를 출력합니다. 주의가 필요한 상황에 사용됩니다.

console.warn('Warning: Deprecated function used');
// Warning: Deprecated function used

 

6. console.group() / console.groupEnd()

로그를 그룹화하여 출력합니다. 복잡한 로깅 정보를 구조화하고 싶을 때 유용합니다.

반복문 구조에서 콘솔을 찍을 때도 유용합니다.

// 사용자 데이터 배열
const users = [
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Smith', age: 25 },
  { id: 3, name: 'William Johnson', age: 35 }
];

// 각 사용자에 대한 정보를 그룹화하여 로그로 출력
users.forEach(user => {
  console.group(`User ID: ${user.id}`);
  console.log(`Name: ${user.name}`);
  console.log(`Age: ${user.age}`);
  console.groupEnd();
});