아직 까지 console.log 만 사용하시나요???

습관적으로 또는 귀찮다는 이유로 여태껏 console.log만 사용하고 있었는데 우연히 console 객체가 아주 다양한 함수를 제공하고 있다는 걸 알았습니다. 사실, 그동안 알아보려고 하지도 않았습니다. ㅎㅎㅎ

 

 

https://developer.mozilla.org/en-US/docs/Web/API/console

 

console

이것들 중 자주 사용할 만한 것 몇 개만 보겠습니다.

 

1. 기본 출력

const _width = 100;
const _height = 50;

console.log(_width, _height);
console.log({_width, _height});

아마 저처럼 기본 기능만 사용하시지 않을까요? ㅎ

출력 결과는 아래와 같습니다.

 

단순히 변수만 출력하는 것 보다 객체 형태로 출력하면 보기에 훨씬 편합니다.

 

 

2. CSS 적용

 

콘솔에 출력하는 메시지에 css를 적용할 수 있다는 걸 처음 알았습니다.

%c를 사용해서 글자에 효과를 줄 수 있는데 이건 많이 사용하지는 않을 것 같군요.

 

console.log("다양한 스타일: %cRED %cORANGE", "color:red", "color:orange", ", 그리고 그냥 출력되는 문자들.");

 

 

3. console.warn, console.error

 

로그 찍으면서 디버깅할 때 특정 부분에서 눈에 띄게 하고 싶을 때 사용하면 좋을 것 같습니다.

 

console.log("여기는 정상이고...");
console.warn("어... 이 루틴 들어오면 곤란한데...");
console.error("여기는 절대오면 안 돼!!!! 버그????");

 

 

이제부터 warn와 error를 적극적으로 사용할 것 같네요!!!

 

4. 코드 실행 시간 측정

 

코드 실행 시간 측정 같은 것도 하시나요? 아주 간단히 할 수 있군요.

 

let count = 0

console.time()
for (let i = 0; i < 1000000000; i++) {
  count++
}
console.timeEnd()

 

 

시간 측정하는 방법 알아서 나쁠 건 없겠죠!!!

 

 

5. console.table 테이블 형식으로 출력

 

리스트를 콘솔에 출력할 때 console.table 사용하면 아주 좋습니다.  이걸 왜 이제 알았을까요!!!!

 

const people = [
  ["John", "Smith"],
  ["Jane", "Doe"],
  ["Emily", "Jones"],
];
console.table(people);

 

아래와 같이 테이블 형태로 로그가 출력됩니다. 보기에 정말 깔끔하죠?

 

 

더 다양한 활용법은 아래를 참고하면 됩니다.

 

https://developer.mozilla.org/en-US/docs/Web/API/console/table

 

 

 

이 정도만 알고 사용해도 프로그램 개발할 때 꽤 편할 것 같습니다. ^^