[Javascript] 콘솔 제대로 써먹기 (How to properly use console)

콘솔 (Console)

자바스크립트를 공부해본 사람이라면 모두 console.log( )를 통해 콘솔에 무언가를 출력해본 경험이 있을 것이다. console은 디버깅 콘솔에 접근할 수 있는 여러 가지 메소드를 제공하는 객체이다. (사실 나는 이 부분을 몰랐다. 생각해보니 자바스크립트는 객체 투성이고 console에는 여러가지 메소드들이 있는데 왜 당연히 객체일 것이라고 생각을 못 했는지 모르겠다.) console이 제공하는 메소드는 정말 많지만 우리는 보통 console.log( )만을 사용한다. 그렇기 때문에 console의 메소드 중 우리가 추가로 활용할 만한 것들에 대해서 알아보도록 하자.

 

 

레벨에 따른 로그 출력

  표현하고자 하는 정보의 타입에 따라 다른 출력 함수를 활용할 수 있다. 개발자에게 제공되어야할 정보와 사용자에게 제공되어야 할 정보가 다르다는 점을 감안할 때 레벨에 따라 다른 출력 메소드를 채택하는 것은 매우 중요하다.

 

(1) console.log( )

  console.log( )는 개발 단계에서 무언가를 확인하기 위해 활용한다. 그렇기 때문에 production 모드에서는 console.log( ) 메소드를 포함시키지 않는 것이 바람직하다.

 

(2) console.info( )

  이름에서 알 수 있듯이 console.info( )는 정보를 제공하기 위해 활용된다. 콘솔상으로 출력되었을 때는 console.log( )와 차이점을 찾을 수 없다.

 

(3) console.warn( )

  간단한 경고를 위해 활용한다.

 

(4) console.error( )

  예상치 못한 에러가 발생하였을 때 이를 표현하기 위해 사용된다.

 

 

console.assert( )

  console.assert( ) 메소드는 조건부 출력을 위해 활용할 수 있다. 출력 기준은 첫 번째 인자에 들어간 값이 거짓일 때이며 이후 인자에 들어가는 값은 일반적인 console 출력 메소드와 동일하다. (그냥 간단하게 첫 번째 인자 이후로는 console.log처럼 넣는다고 생각하면 된다.)

 

 

console.table( )

  표의 형태로 객체를 보여준다. 아래 이미지는 person이라는 object를 통해 console.log( )와 console.table( )을 비교한 예시이다.

 

 

console.dir( )

  console.dir( )은 HTML element를 출력할 때 유용하게 활용할 수 있다. console.dir( )를 활용하면 console.log( )를 활용할 때보다 HTML element를 Object의 관점에서 바라볼 수 있다.

 

위 예시에서는 naver 홈페이지의 로고를 활용했다

 

console.trace( )

  자신이 어디서 호출되었는지를 추적할 수 있다. 디버깅을 할 때 유용하게 활용할 수 있다.

 

console.time( ) + console.timeEnd( )

  특정 구간에 소요되는 시간을 측정할 때 활용한다. 함수 인자로는 동일한 Label(string)을 넣어주며 결과는 특정 라벨의 console.time( )문부터 console.timeEnd( )까지의 시간이 milliseconds로 출력된다. 성능 최적화의 과정에서 성능 측정을 위해 활용할 수 있을 것 같다. 동시에 최대 만 개의 타이머가 돌아갈 수 있다는데 굳이 그렇게까지 사용할 일은 없을 테니까 몰라도 될 것 같다.