Archive

[4] console 을 더 유용하게 사용하기

livemehere 2022. 3. 22. 01:20

console 의 진실

console.log 많이사용하시죠?

보통 console 메서드중 log 단하나만을 많이 사용하실 거같은데요. 저두 그랫구요!

하지만 때에 따라서 적절히 다른 메서드를 사용하면 좀더 유용하게 200프로 활용할 수 있을 겁니다.

특히, console.log, console.info, console.warn(), console.error() 들은 서버를 개발하고 나서

이러한 Level 별로 컨트롤하는 라이브러리를 사용하기도해서 유용합니다.

Level 별 console

console.log('단순 로그')
console.info('정보 로그')
console.warn('심각하지 않은 경고')
console.error('발생해서는 안되는 에러')

console 의 정의 부분

cosnole을 커맨드키와 함께 눌러보면 선언부로 이동합니다.

앞서 설명한 것들보다 훨씬 많은 메서드들을 가지고 있습니다.

그중 유용한 몇가지를 소개해드리겠습니다.

interface Console {
    assert(condition?: boolean, ...data: any[]): void;
    clear(): void;
    count(label?: string): void;
    countReset(label?: string): void;
    debug(...data: any[]): void;
    dir(item?: any, options?: any): void;
    dirxml(...data: any[]): void;
    error(...data: any[]): void;
    group(...data: any[]): void;
    groupCollapsed(...data: any[]): void;
    groupEnd(): void;
    info(...data: any[]): void;
    log(...data: any[]): void;
    table(tabularData?: any, properties?: string[]): void;
    time(label?: string): void;
    timeEnd(label?: string): void;
    timeLog(label?: string, ...data: any[]): void;
    timeStamp(label?: string): void;
    trace(...data: any[]): void;
    warn(...data: any[]): void;
}

console.table()

Object를 좀더 가시적으로 볼 수 있습니다.

const kong  = {name:'kong',age:25}
console.table(kong)

console.assert()

조건 부로 console을 출력합니다. 첫번째 인자가 false 일시 두번째 인자를 출력합니다.

const kong  = {name:'kong',age:25}
console.assert(kong.age < 4,kong.age); // 출력
console.assert(kong.age < 4,kong.age); // 출력하지 않음

console.time(), console.timeEnd()

시작과 끝을 고정해두고, 그 사이 시간을 반환합니다.

즉, 코드 실행시간을 확인 할 수 있습니다.

console.time('for loop') // 측정 시작
for (let i =0;i<100;i++){

}
console.timeEnd('for loop'); // 측정 종료

// for loop: 0.068ms

console.count()

해당 console이 얼마나 호출되었는지 출력합니다.

예를 들면 어떤 함수에 같이 담아두면 그 함수가 몇번 호출되었는지 알 수 있겠죠?

console.countReset() 으로 횟수를 초기화 할 수도있습니다.

for (let i =0;i<100;i++){
    console.count('얼마나')
}

// 얼마나: 1
// .
// .
// 얼마나: 95
// 얼마나: 96
// 얼마나: 97
// 얼마나: 98
// 얼마나: 99
// 얼마나: 100

console.trace()

콘솔이 호출되기 까지 거친 호출스택을 모두 알려줍니다

가끔 코딩하다가 에러떠서 많이본 장면일겁니다

function f1(){
    f2()
}

function f2(){
    f3()
}

function f3(){
    console.trace()
}

f1()

// Trace
// at f3 (/Users/gongtaemin/Documents/노드에대한 모든것/4-console/index.js:10:13)
// at f2 (/Users/gongtaemin/Documents/노드에대한 모든것/4-console/index.js:6:5)
// at f1 (/Users/gongtaemin/Documents/노드에대한 모든것/4-console/index.js:2:5)
// at Object.<anonymous> (/Users/gongtaemin/Documents/노드에대한 모든것/4-console/index.js:13:1)
//     at Module._compile (node:internal/modules/cjs/loader:1101:14)
//     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
//     at Module.load (node:internal/modules/cjs/loader:981:32)
//     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
//     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
//     at node:internal/main/run_main_module:17:47

친절하게 어디서 몇번째줄에서 발생한건지도 다 알려줍니다

반응형