JS Console

콘솔로그 100% 활용하기

AOS는 log라는 클래스를 이용해 에러나 디버그에 따라 선택할 수 있는 함수로 콘솔로그 출력 (ex. wtf)
iOS에서는 logger라는 클래스를 이용해 디버그인지 인포인지 심각성에 따라 사용할 수 있는 함수가 세분화 되어 있음 (ex. erro, warning, critical, fault)
Browser(MDN 참조)에서 제공하는 console은 심각성과 다양한 함수가 많이 제공되 있음 (ex. console.info() console.profile() console.log ...)
Node에서는 단순 로그 출력 외에도 더 많은 함수들이 있음

왜 이렇게 다양한 플랫폼에 심각성에 따라 다양한 함수들이 있는지?

const dog = { type:'dog', name: '츄츄'}
console.log('logging', dog)

자바스크립트의 log level

node와 달리 browser에서는 심각성에 따라 다르게 보임

console.log('log'); // 출력 : 개발단계에서 부수적인 데이터를 출력하고자 할때 (필요없는 데이터 성능에 영향 배포할 때는 왠만하면 삭제하는 것이 좋음
console.info('info'); // 정보
console.warn('warn'); // 경보
console.error('error'); // 에러 : 예상하지 못한 에러, 시스템 에러

assert (원하는 특정한 조건에 맞을 때만 사용)

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

node console

print object (obj 출력)

console.log(dog);
console.table(dog); // 표로 출력
console.dir(dog, {colors: false, depth: 1}); // 색상 표현 x, 깊이는 단 하나의 obj만 출력

measuring time (측정시간)

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

node console // for loop : 0.053ms

counting

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

node console // a 함수는 3번 실행됨

function a() {
	console.count('a function');
}
a();
a(); // 여기까지 2번 호출 후
console.countReset('a function'); // 카운트 초기화
a(); // 다시 호출

node console // a function:1, a function:2, a function:1

trace (어디에서 호출되었는 추적)

이벤트리스너나 비동기적으로 수행되는 함수가 있을 경우 어디서 호출됐는지 확인 가능

function f1() {
	f2(); // f1은 f2를 호출
}
function f2() {
	f3(); // f2는 f3을 호출
}
function f3() {
	console.trace();
	console.log('hi! :'); // f3은 누가 호출했는지 모르겠다면???
}
f1();

node console // trace 내역 ~~~( 몇번째 줄에서...) 

로그 레벨에 따라 적절하게 사용하기

!! 개발단계에서 확인하고자 하는 정보를 출력했다면 실제 배포에서는
보안이나 성능에 위협되지 않도록 삭제하는 것이 좋음

---