Javascript - 실무에서 활용하는 console.log() 사용 방법

 실무에서는 console.log()를 어떻게 하면 잘 사용할까요? 이전 글(console.log() 사용하는 팁)에 이어 console.log()를 활용하는 방법에 대해 더 구체적으로 알아보겠습니다.

기본 출력문 - log, info, debug, warn, error

console.log('기본');
console.info('정보');
console.debug('디버그');
console.warn('경고');
console.error('에러');

 console로 출력할 수 있는 출력문은 level(중요도)로 분류해서 사용할 수 있습니다. log4j처럼 말이죠.

console의 level [log, info, debug, warn, error]

 만약 console.debug()로 출력한 내용이 나오지 않으면 콘솔에 출력 옵션을 확인해보시면 됩니다.

크롬의 console level 설정

 크롬 같은 경우 console 출력 설정 기본 값이 Info, Warnings, Errors라 Debug는 출력이 안될 수 있기 때문에 옵션이 원하는 데로 설정이 되었는지 확인이 필요합니다.

여러 가지 출력 방법

const owner = 'YD';
const message = 'Hello world!';
const isDeveloper = true;
const age = 27;

console.log(owner); // 하나의 값만 출력
console.log(owner, message, isDeveloper); // 여러 개의 값을 동시에 출력
console.log('%s는 문자와 %d는 숫자', owner, age); // 치환 문자 사용하기
console.log(`${owner} ${message}`); // "`" 백틱 사용하기

 console.log()는 단 하나의 값뿐만 아니라 여러 가지 방법을 이용해서 값을 출력할 수 있습니다. 개발자마다 취향은 다르지만 개인적으로 선호하는 방법은 백 틱을 사용하는 방법입니다. 사용하는 방법에는 정해진 가이드가 없으니 편한 방법을 택해서 사용하시면 됩니다.

스타일을 입혀보자

// 출력문에 스타일 적용하기
console.log('%c출력문의 색상과 글자 크기를 변경하였습니다.', 'color: green; font-size: 16px;');

// 여러가지 스타일을 동시에 적용하고, 추가 메세지 출력하기
console.log('다중 스타일과 추가 메세지 출력하기: %c초록 %c파랑', 'color: green', 'color: blue', '추가 메세지 작성');

 console.log()는 %c(치환 문자)를 사용하면 스타일을 설정할 수 있습니다. 뿐만 아니라 동시에 여러 개의 스타일을 적용할 수도 있습니다.

console.log()에 스타일 적용하기

 

 

객체 출력하기

const obj = { owner: 'YD', text: 'Hello world!' };

console.log(obj); // 객체를 출력할 때는 이 방법 대신
console.log(JSON.parse(JSON.stringify(obj))); // 이 방법을 사용하자!

 이 내용은 이전 글에서도 다룬 내용이지만 구체적인 이유는 다루지 않았기 때문에 한번 더 이야기해보도록 하겠습니다. 왜 객체를 출력할 때는 JSON.parse()와 JSON.stringify() 함수까지 번거롭게 사용하면서 객체를 출력해야 하는 걸까요? 그 이유는 console.log()가 우리가 원하는 방식대로 동작하지 않기 때문입니다. console.log()를 통해 객체를 출력하면 console.log()를 사용한 시점의 객체가 출력되길 원하지만 결과는 그렇지 않기 때문입니다.

let obj = {};
console.log(obj);
// 출력되길 원하는 값: {}

obj.owner = 'YD';
console.log(obj);
// 출력되길 원하는 값: { owner: 'YD' }

 위의 예제 코드를 출력해보면 아래와 같은 결과를 확인할 수 있습니다. 2번째 줄 console.log()에서는 어떤 값도 가지지 않고 있어야 하는데 코드를 실행하면 obj가 값을 가지고 있다고 보이고 있습니다. 많은 브라우저들이 객체의 경우에는 값이 경신될 때마다 바뀐 값을 보여주게 되어있습니다. 그렇기 때문에 객체를 출력할 때는 console.log(JSON.parse(JSON.stringify(obj))) 이렇게 사용하는 것이 가장 좋습니다.

cosole.log()를 사용한 객체 출력

DOM 요소를 JSON처럼 보여주는 console.dir()

 console에는 log()와 같아 보이지만 다른 출력문 기능인 dir()이 있습니다. log()와 dir() 차이는 요소를 HTML과 같은 트리 구조를 보여주느냐 JSON과 같은 형태로 구성 요소를 보여주느냐입니다.

 

  Element가 가진 메서드를 확인하고 싶어서 console.log()를 사용해보신 적이 있으실 텐데요. 원하는 결과는 보여주지 않고 HTML의 구조만 보여줍니다. 바로 이럴 때 console.dir()를 사용하시면 됩니다.

console.log()와 console.dir()의 차이

 

 

console.log()를 묶어서 사용해보자

console.group();
    console.log('Hello world!');
    console.group('Web Developer');
        console.log('Frontend Engineer');
        console.log('YD');
    console.groupEnd();
console.groupEnd();

 console을 이용해 메시지를 그룹화시켜서 사용할 수 있습니다. 이는 시각적으로 계층을 분리하는 효과가 있으며, log level과 같이 사용하면 활용도를 더 높일 수 있습니다.

console.group()를 사용하면 가질 수 있는 시각적 혜택

배열을 멋지게 보는 console.table()

let data = ['Mark', 'YD', 'Evan'];
console.table(data);

 배열 형식의 데이터를 console.table()를 사용하면 console.log() 보다 멋진 출력물을 확인할 수 있습니다. JSON 형태의 값도 확인할 수 있습니다.

console.table() 출력 결과

숫자를 세어보자 console.count()

console.count('Yap!');
console.count('Yap!');
console.count('Yap!');
console.count('Yap!');

 이 함수는 특정 count()가 호출된 횟수를 기록하고 보여줍니다. label을 옵션으로 사용하며 횟수를 기록합니다. console.countReset()를 호출하면 누적된 기록이 초기화됩니다.

console.count() 사용 결과

성능을 측정해볼까? console.time()과 console.timeEnd()

console.time('타이머');
let value = 0;
for (let count = 0; count < 100; count++) {
    value += 5;
}
console.timeEnd('타이머');

 코드의 소요 시간을 측정할 때 사용하면 유용한 기능입니다. label을 필수 인자로 사용하며, 타이머를 식별하는데 이용됩니다. 시간 단위는 밀리초를 사용합니다.

console.time()과 console.timeEnd()를 사용한 소요 시간 측정 결과