[JavaScript] console API에 대해 얼마나 알고있을까?

console

자바스크립트 환경에서 코드의 결괏값을 출력하거나 테스트를 하기 위해 아마 나를 포함하여 대부분의 사람들이

console.log() 를 주로 사용하고 있을 것이다.

 

뭐 사실 현업에서도 그렇고 console.log()만을 사용함에도 딱히 불편함을 느끼거나 하는 것은 없다.

단순하게 console.log()만으로 충분해서 그것만 사용하는 걸까? 아니면 그것밖에 모르기때문에 그것만 사용하는걸까?

개인적인 생각으로는 그것만 아는 사람보다는 "익숙하지 않아서" 사용하지 않은 경우가 더 많다고 생각된다.

 

콘솔 API의 모든 기능을 알 필요는 없다고 생각되며, 가볍게 이런 게 있구나 정도로만 알아두는 것도 나쁘지 않다 생각된다.

---

log level

딱! 이 정도만 알아둬도 일하는데 지장 없을 정도의 로그 중요도별 콘솔이다.

const log = "기본"
const info = "정보"
const wran = "경고"
const error = "에러"

console.log(`Console.log ${log}`);
console.info(`Console.log ${info}`);
console.warn(`Console.log ${wran}`);
console.error(`Console.log ${error}`);

기본적으로 제공하는 가지각색의 콘솔들인데, log와 info의 차이점을 모를 수 있으나 놀랍게도 텍스트의 진함 정도가 다르다고 한다.

Group

서로 관련된 출력 결과를 시각적으로 묶어서 정돈하고자 할 때 사용하면 좋은 콘솔 그룹이다.

// console.group()을 통해 그룹을 명시하고 그 뒤에 나오는 콘솔은 전부 그룹핑 된다.
// 현재 그룹에서 나가려면 console.groupEnd()를 호출하면 된다.

console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");

콘솔이 많이 필요할 때 각각 그룹으로 묶어서 표현하기 좋다.

Timer

특정 작업의 소요시간을 측정할 때 사용하기 좋은 메서드이다.

// console.time(name)로 timer name을 기준으로 시작점을 명시한다.
// console.timeLog(name)로 중간 지점을 명시한다.
// console.timeEnd(name)는 타이머를 종료하고 마지막 시간을 출력한다.

console.time("answer time");
console.timeLog("answer time", "Starting application up…");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");

공식문서에서는 console.time()마저 콘솔에 찍힌다고 쓰여있던데 아무리 해도 안 찍혀서 timeLog로 시작을 굳이 표시하였다.

 

여기서 timer name이라고 명시해 두었는데 이게 타이머 이름을 의미하기 때문에다.

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time2");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time2");

이렇게 사용하면 어떻게 될까? 

재밌게도 그런 타이머는 존재하지 않는다고 경고 메시지가 출력된다.

Count

어떤 일이 얼마나 자주 발생하는지 확인해 보기 위한 메서드이다.
예를 들어 어떤 메서드의 발생 빈도를 체크할 때 사용하면 좋다.

function postBoostClicked1() {
  // My post has been boosted, do something here
  console.count("Boost1 count");
  // 만약 카운트를 초기화 하고 싶다면 동일한 이름으로 리셋 시켜주면 된다.
  console.countReset("Boost1 count") 
}

function postBoostClicked2() {
  // My post has been boosted, do something here
  console.count("Boost2 count");
}

postBoostClicked1();
// Boost1 count: 1
postBoostClicked2();
// Boost2 count: 1
postBoostClicked1();
// Boost1 count: 1
postBoostClicked2();
// Boost2 count: 2

하나 재미있는 사실은 이 count는 서로 다른 곳에서 호출해도 값을 공유하지 않는다는 점이다.

그래서 각 메서드별로 얼마나 실행됐는지 손쉽게 체크가 가능하다.

추가적으로 countReset()이라는 메서드를 호출하면 카운트가 초기화된다.

Table

데이터를 테이블 형식으로 시각화하여 보여주는 메서드이다.

좀 더 쉽게 데이터를 확인할 수 있게 도와준다고 생각하면 좋을 거 같다. 굳이 사용할 필요는 없지만 데이터로 보는 것보다는 한눈에 잘 보인다.

const dogs = [
  { name: "Yoshi", color: "Black", personality: "Calm" },
  { name: "Melanie", color: "Brown", personality: "Hyperactive" },
  { name: "Peppers", color: "white", personality: "Unpredictable" },
];

console.table(dogs);

확실히 콘솔에 찍어보면 한 눈에 보기 좋다.

Trace

스택을 추적하기 위한 메서드인데... 얼핏 보면 유용해 보이기는 하다.

호출하게 된 경로를 보여주는 것이다.

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

---

사실 이것들 말고도 더 다양한 기능들이 존재한다.

개인적으로 정리 안 한 것 중에 유용하다고 생각되는 것도 있다.

// console.assert() : 첫 번째 매개변수가 false인 경우 메시지와 스택 추척을 출력한다.

If문으로 조건 줄 필요 없이 false일 때만 메시지와 trace 같은 스택 추적을 출력한다.

 

이 밖에도 "콘솔 꾸미기", "문자열 포맷팅" 등 다양한 기능들이 존재하니 이것들은 공식문서를 참고하길 바란다.

---

참고: https://developer.mozilla.org/ko/docs/Web/API/console

console - Web API | MDN

참고: https://developer.mozilla.org/en-US/blog/learn-javascript-console-methods/

Developer essentials: JavaScript console methods | MDN Blog