[Tip]콘솔 로그 활용법 (log, info, warn, error)

개발 환경에 따른 Log

다양한 플랫폼에서 심각성에 따라 다양한 함수들이 존재한다.

Android

• log 라는 class 를 통해서 error / debug 나 심각성에 따라 선택할 수 있는 함수가 있다.
  • What a terrible failure (wtf) 라는 재미있는 함수 살펴보기!

IOS

• log 라는 class 를 통해서 debug, info 등 심각성에 따라 선택할 수 있는 함수가 있다.

Browser

• https://developer.mozilla.org/ko/docs/Web/API/Console

node.js

• https://nodejs.org/api/console.html

많은 사람들이 console.log 만 활용하지만 다른 레벨의 log도 잘 활용하면 매우 좋다. 개발 도중에 데이터를 출력해보고 싶을 때 log를 이용한다. 이때 하나의 데이터만을 출력하는 게 아니라 배열 형태로도 전달할 수 있다. 하지만 로그 외에도 심각성에 따라서 다양한 함수를 사용할 수 있다.

레벨별 로그 출력 (log, info, warn, error)

• log : 개발 단계에서 부수적인 데이터를 출력하고자 할때 사용한다.
  • 제품을 배포할 때는 로그는 웬만하면 삭제해서 배포하는 게 좋다. 무언가 출력한다는 것은 성능에 영향을 줄 수 있다. 정말 필요한 로그가 아니면 다 지우고 배포하는 게 중요하다.
• info : 정보를 출력할 때 사용한다. 역시 개발 단계에서 지우고 배포하는 게 좋다.
• warn : 경보 단계
• error : 에러! 심각할 경우, 예상하지 못한 에러, 시스템 에러

console.log('log');
console.info('info');
console.warn('warn');
console.error('error');

node.js 에서는 별 다른 차이 없이 출력된다.

PS C:\Users\yuri\Desktop\yurilee\study\console-log-tip> node console
log
info
warn
error

하지만 브라우저 상에서는 심각성에 따라 조금씩 다른 모습으로 출력된다.

색깔이 표기되지 않음에도 불구하고 이를 심각성에 따라 다른 함수를 사용해야 하는 이유가 있을까?
→ log, info 와 같은 경우는 배포할 때 로그 서비스를 이용한다면 네트워크 요청이 발생하지 않도록 설정할 수 있다. 즉 warning 이나 error 일때만 특정한 일을 할 수 있도록 만들 수 있다.

assert

• 특정한 조건이 만족될 때만 출력할 수 있다. 전달된 조건이 true 가 아닐 때만 출력이 될 수 있도록 만들 수 있다. 참이 아닌 경우에만 출력이 된다. 동일한 경우에는 출력이 되지 않는다. 항상 출력해서 빈번하게 확인 하는 게 아니라 내가 원하는 특정한 조건에만 맞춰 사용하고 싶다면 assert를 이용하면 된다.

// assert
console.assert(2 === 3, 'not same!');
console.assert(2 === 2, 'same!');

PS C:\Users\yuri\Desktop\yurilee\study\console-log-tip> node console
Assertion failed: not same!

Object 출력

• console.table(data) 를 활용하면 테이블 형태로 출력할 수 있다.
• console.dir(data) 로그를 사용할 때와 동일하게 출력되지만 옵션을 전달할 수 있다. 오브젝트 안에 또 오브젝트가 있을 때, 얼마나 깊이 있게 표현할 것인지 depth 를 지정할 수 있다. color 옵션을 false 로 설정하면 색상을 끌 수 있다.

시간 측정

• 작성한 코드에 대해 시간을 측정할 수 있다.

// measuring time
console.time('for loop');
for (let i = 0; i < 10; i++) {
    i++;
}
console.timeEnd('for loop');

PS C:\Users\yuri\Desktop\yurilee\study\console-log-tip> node console
for loop: 6.036ms

횟수 측정

• 횟수를 측정할 수 있다.

// counting
let count = 0;

function a() {
    count++;
}
a();
a();
a();
console.log(`a 함수는 ${count}번 실행됨`);

PS C:\Users\yuri\Desktop\yurilee\study\console-log-tip> node console
a 함수는 3번 실행됨

• 변수를 수동적으로 추가해서 함수가 호출될 때마다 카운트를 증가시키고 있다. 횟수는 정확하게 알 수 있겠지만, console를 위해서 변수를 따로 추가해야 하는 번거로움이 있다. 이 대신 console.count를 활용해보자.

function a() {
    console.count('a function');
}
a();
a();
a();

PS C:\Users\yuri\Desktop\yurilee\study\console-log-tip> node console
a function: 1
a function: 2
a function: 3

어디에서 왔니?

• 이벤트 리스너나 비동기적으로 수행하는 함수가 있다면 어디에서 누가 호출되었는지 알고 싶을 때 유용하게 사용할 수 있다.

console.trace();

💝Point💝

• 개발 단계에서 확인하고자 하는 정보를 출력을 했다면 배포할 때는 꼭 삭제하여 사용자에게 불필요한 정보들이 너무 많이 출력되어서 성능이 저하되거나 보안에 위협이 되지 않도록 신경써서 사용하는 게 중요하다.

---

https://www.youtube.com/watch?v=KxsVV5jbJe4