공부하는 블로그

console.log에 대해 알아보자 본문

자바스크립트

console.log에 대해 알아보자

devtimothy 2018. 10. 23. 10:05

console.log에 대해 알아보자

자바스크립트를 자주 사용하는 경우, console.log()를 사용하여 정보를 출력해야 할 때가 많습니다.

아래는 보통 오랫동안 많이 써온 방식입니다.

(() => {
   console.log('Success!')
})()

에러 로그에 console.error () 사용

로그를 좀 더 시각적으로 낫고 재미있는 방식으로 만들 수 있는 몇 가지 방법이 있습니다.

(() => {
   console.error('헉, 뭔가 잘못되었네요!')
})()

경고 로그는 console.warn() 사용

(() => {
   console.warn('경고!, 뭔가 잘못된 것 같습니다!')
})()

iterable 오브젝트에 console.table() 사용

function Person(firstName, lastName) {
 this.firstName = firstName
 this.lastName = lastName
}

const me = new Person('John', 'Smith')

console.table(me)

다른 방법으로는 console.dir을 사용할 수도 있습니다.


차이점이 느껴지시나요? :)


console.timeconsole.timeEnd를 통한 벤치마킹

console.time("for");

let sum = 0;
for (let i = 0; i < 1e4; ++i) {
sum += i;
}

console.log(sum);
console.timeEnd("for");

console.time("while");

sum = 0;
let i = 1e4;
while(--i) {
sum += i;
}

console.log(sum);
console.timeEnd("while");

사용자 정의 스타일 추가

(() => {
   // do stuff
   console.log('%c%s',
           'color: green; background: yellow; font-size: 24px;','Success!')
})()

코드에서 색상과 함께 나만의 로그를 직접 사용할 수있는 사용자 정의 함수를 사용할 수 있습니다.

function customLog(message, color='black') {
    switch (color) {
        case 'success':  
             color = 'Green'
             break
        case 'info':    
                color = 'Blue'  
             break;
        case 'error':  
             color = 'Red'  
             break;
        case 'warning':  
             color = 'Orange'
             break;
        default:
             color = color
    }

    console.log(`%c${message}`, `color:${color}`)
}

customLog('Hello World!')
customLog('Success!', 'success')
customLog('Error!', 'error')
customLog('Warning!', 'warning')
customLog('Info...', 'info')

예제를 확인해보세요.

도움이 되셨길 바라며, 즐거운 디버깅 되세요! 😊

Comments