console.log 보다 더 좋은 console

 개발을 하다가 디버깅을 하기 위하여 console.log를 사용 합니다. 뭐 물론 console.log만을 사용하여 개발을 할 수도 있고, 틀린방향이 아닙니다. 하지만, 조금 더 편하게 개발을 해보자구요.

 1. console.error / console.warn

 이 정도는 다들 사용 하고 있는 함수들일 것 입니다. 뭐 물론 console.warn은 사용 빈도가 그렇게 많지는 않을 것 입니다. 그래도 에러가 나서 로그를 작성해야 하는 경우 console.error로 작성 해주는 것이 다른 개발자들 혹은 오래된 코드에서 문제가 발생한 것을 확실히 알 수 있게 해주어 오류를 파악하기 쉽기 때문에 매우 추천하는 바입니다.

 console.log는 검은색 / console.warn은 노란색 / console.error는 빨간색으로 표기 된다.

 2. console.time / console.timeEnd

 만약에 이 함수를 모른다면 특정 코드가 얼마나 걸렸는지 확인을 하기 위하여 이렇게 사용 하였을 것 입니다.

  뭐 물론 이렇게 하더라도 얼마나 오래 걸리는 함수를 확인하는 대에는 큰 문제가 없을 것 입니다.

 하지만 위의 코드에는 두가지 문제가 있지요.

1. 1ms 미만으로 걸리는 작업에 대해서 확인이 불가능 하다.

2. startTime, endTime을 다른 개발자나 혹은 자기자신이 테스트를 하기위한 코드였는지 까먹는 것 입니다.

 여기서 대안이 console.time / console.timeEnd 입니다.

 

 3. console.table

 데이터를 다루다 보면, 배열을 많이 다루게 됩니다.

 console.table은 말처럼 배열과 같은 데이터를 table형태로 노출 시켜줍니다.

 각각의 필드를 클릭하여 정렬도 가능하니, 데이터를 확인하는 것에도 꽤 편합니다.

 4. console.trace

 자바스크립트에서 함수는 일급객체입니다. 즉 다른 함수에 인자로 함수를 넣어서 호출을 하고 그 함수를 다른 함수에서 실행 하게 되었을 때, 어떠한 경로로 호출이 된 것인지 알 수가 없습니다. 간단한 예시를 보죠.

 위와 같이 called testFunction을 일반 로그로 찍게 되면 어떤 과정으로 찍혀진 코드지인지 확인을 할 수가 없다. 이럴때 console.trace를 사용 할 수 있다.

 위와 같이 outerFunction을 통해서 testfunction이 평가 되었구나 라고 확인 할 수 있다.

 5. console.group / console.groupEnd

 우리는 복잡한 코드를 짜다 보면, 거의 습관적으로 콘솔을 찍게 된다. 뭐 물론 그 행위를 나쁘게 볼 수 는 없지만, 무엇을 위한 콘솔이였는지, 이게 내가 찍은 콘솔인지 아니면 다른 개발자가 찍은 콘솔인지 점점 알 수 없게 되어 버린다.

 이때 쓸 수 있는 방법이 console.group이다.

 위처럼 console.group을 사용하게 되면 console.groupEnd가 호출 되기 전까지 실행 되었던 콘솔들을 들여쓰기 한것처럼 그륩화가 가능하다.

 마무리

 물론 console 함수를 모두 소개한 것은 아니고 내가 자주 사용하는 console 함수를 소개 하였다. 디버깅은 개발을 하다보면 거의 필연처럼 하게 되고, 디버깅 할 때, 콘솔은 아주 좋은 도구이다. 상황에 따라서 더 좋은 콘솔을 찍어서 디버깅 시간을 줄여보도록 노력해보자.