📚 console.log는 이제 그만 ❗ - 다양한 콘솔 API 모음

...

자바스크립트 Console API

자바스크립트의 코드의 결과값을 출력하거나 테스트를 하기 위해 ~~console.log()~~ 함수를 정말 많이 써왔을 것이다. 이때 ~~console.log()~~ 함수는 console 이라는 객체 안의 ~~log()~~ 라는 메서드를 불러다가 쓴 것이다. 즉, console 객체 내에는 log 뿐만 아니라 여러 기능을 하는 콘솔 관련 메서드들이 있는 것이다. 이 콘솔 메서드들은 log 보다 훨씬더 강력하고 다채로운 기능을 제공한다. 다만 익숙치 않아서 지금까지 log 만 주궁장창 써왔던 것이다. 지금 부터 강력한 자바스크립트 콘솔 API 유용한 기능에 대해 알아보자.

console.log("콘솔 로그") 
console.info("콘솔 정보") 
console.debug("콘솔 디버그") 
console.warn("콘솔 경고") 
console.error("콘솔 오류")
console.table("콘솔 테이블")
console.group("콘솔 그룹")
console.time("콘솔 타이머")
console.count("콘솔 카운드")

console.log

기본적으로 인자로 전달된 값들을 화면으로 출력해준다. 이때 콤마(,)를 통해 출력하고 싶은 여러개의 인자를 집어 넣을 수 있다. 콤마를 통해 출력값을 이을 경우 별다른 개행 문자 없이 자동으로 띄어쓰기 해준다.

const a = 1;
const b = 'hello';
const c = true;

console.log(a); // 하나만 로그
console.log(a, b, c); // 여러 개를 동시에 로그

문자열 포맷팅

C언어나 Java를 먼저 해본 분이라면 아마 ~~printf()~~ 라는 메서드를 잘 알 것이다. 이 메서드는 첫번째 문자열 내의 %d 와 %s 같은 치환자를 콤마 뒤에 입력한 인자로 매칭하여 변환시킨다.

System.out.printf("Hello my name is %s", "인파");

치환 문자열	설명
%o 또는 %O	JavaScript 객체를 출력합니다. 객체 이름을 클릭하면 검사기에 더 자세한 정보를 보여줍니다.
%d 또는 %i	정수를 출력합니다. 서식도 지원합니다. 예를 들어 console.log("Foo %.2d", "1.1")은 정수부를 0이 앞서는 두 자리로 표현하므로 Foo 01 을 출력합니다.
%s	문자열을 출력합니다.
%f	부동소수점 수를 출력합니다. 서식도 지원합니다. 예를 들어 console.log("Foo %.2f", "1.1")은 소수부를 두 자리로 표현하므로 Foo 1.10 을 출력합니다.

다만 요즘에는 템플릿 리터럴 문법으로 ~~console.log(`${a}는 숫자 ${b}는 문자열`)~~ 와 같이 사용하는 것을 선호하는 편이다.

const a = 1;
const b = 'hello';

// 문자열 포매팅
console.log('%d는 숫자 %s는 문자열', a, b); 

// 템플릿 문자열
console.log('${a}는 숫자 ${b}는 문자열');

출력 스타일링

html 요소를 스타일링 해주기 위해 css 를 가미하듯이 이와 비슷하게 콘솔 출력물 자체에 css를 적용할 수 가 있다.

위에서 본 문자열 포매팅 문법으로 스타일링을 뜻하는 기호는 %c 를 이용해, 콤마 다음으로 css 문법을 인라인으로 그대로 적어 주면 된다.

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue; padding: 2px");

console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")

다중 출력 스타일

%c 를 여러 번 사용하여 각 문자마다 스타일링을 적용할 수 가 있다.

console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");

출력 스타일 모듈화

만일 위와 같은 방식이 가독성 측면에 좋지 않으면 다음과 같이 배열로 css 를 지정하는 식으로도 응용이 가능하다.

배열을 선언하고 각 배열 인자에 문자열로 css 문법을 기재한다.
그리고 이들을 ~~String.join~~ 시켜 배열을 하나의 문자열로 치환하시킨다.
이때 인자마다 끝에 ; 기호를 첨가해준다. 인라인으로 css 속성이 여러개 있을 경우 ; 로 구분해 주어야 되기 때문이다.
그러면 결과로 하나의 문자열로 된 css 문법이 반환되게 되는 식이다.

let styles = [
    'background: linear-gradient(#D33106, #571402)', 
    'border: 1px solid #3E0E02',
    'color: white',
    'display: block',
    'text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)',
    'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset',
    'line-height: 40px',
    'text-align: center',
    'font-weight: bold'
].join(';'); // 각 배열 인자들을 join 시켜 하나의 문자열로 치환하고 인자마다 끝에 ; 기호를 첨가해준다

console.log('%c a spicy log message ?', styles);

객체 형식으로 출력

만일 다음과 같이 각 변수의 값을 모두 출력하기 위해 우리는 지금까지 아래와 같이 사용해왔을 것이다.

const name = 'fatfish'
const age = 24
const job = 'Front end development engineer'
const hobbies = 'read, write article'

console.log(name, age, job, hobbies)

다만 이렇게 무지성으로 나열할 경우, 출력할 인자가 많아질 수록 몇번째의 값이 어떤 인자값인지 혼동스러울때가 있다. 이때는 구조 분해 문법으로 그대로 콘솔 로그 인자에 넣어주면 콘솔 화면에 객체 형식으로 포매팅하여 출력해주게 된다.

console.log({ name, age, job, hobbies })

콘솔 로그의 함정 & 주의점

브라우저의 ~~console.log~~ 를 사용할때 주의해야할 점이 있다. 예를들어 다음 예제가 콘솔에 어떻게 표시될지 예상해보자.

var obj = {};

console.log(obj);

obj.a = 1;

콘솔이 출력되는 라인은 아직 ~~obj~~ 에 값을 넣기 전이니 당연히 결과값이 {} 빈값이 출력이 될 것이다.

그런데 아래 화살표를 눌러보면, 아래와 같이 값이 a: 1 이 들어가 있음을 볼 수 있다. 즉, 결과값이 무언가 이상하게 짬뽕이 되어버린 것이다.

이러한 현상이 일어나는 이유는, ~~console.log~~는 참조를 로깅하기 때문에 객체와 같이 내용물이 변할 수 있는 것들은 내용이 실시간으로 바뀌기 때문이다.

객체 뿐만 아니라 배열도 마찬가지이다.

var arr = [];

console.log(arr, arr.length);

// 복잡한 코드가 있다고 가정

setTimeout(function() { // 비동기 가정
  arr.push(5);
}, 0);

비동기를 통해 배열값 push를 후처리 하였기 때문에 당장 콘솔 결과값은 빈배열에 배열 length는 0이지만, 화살표를 눌러 안의 내용을 살펴보면 첫번째 인덱스 값이 들어가 있고 length 역시 1로 찍혀져 있는 걸 볼 수 있다.

이밖의 콘솔 자매들

직접 스타일링 해주는 것도 좋지만 아래 미리 제공하는 콘솔 API 들도 이용하면 유용하다.

~~console.log~~ : 아이콘이 없는 검은색 텍스트
~~console.info~~ : 진한 텍스트
~~console.debug~~ : 파란색 텍스트
~~console.warn~~ : 아이콘이 있는 노란색 텍스트
~~console.error~~ : 아이콘이 있는 빨간색 텍스트

단, 브라우저 종류마다 출력되는 스타일은 약간 다르다는 점은 유의하자

var playerOne = 120;
var playerTwo = 130;
var playerThree = 140;
var playerFour = 150;
var playerFive = 160;

console.log("Console.log" + " " +  playerOne);
console.debug("Console.debug" + " " +playerTwo);
console.info("Console.info" + " " + playerFour);
console.warn("Console.warn" + " " + playerThree);
console.error("Console.error" + " " + playerFive);

이때 ~~console.error~~ 와 ~~console.warn~~ 은 단순한 값 출력 뿐만 아니라 문제가 발생하는 코드 라인 스택을 표시한다는 점에서 기능상 차이를 보인다.

보통 catch 문과 같이 오류 메세지를 콘솔 화면에 출력하기 위해 에러 내용을 습관적으로 ~~console.log~~ 로 처리하는 사람들이 있는데, 그릇된 방법은 아니지만 이보다 ~~console.error~~ 메서드를 사용하는 것이 훨씬 현명하다. 왜냐하면 ~~console.warn~~과 같이 붉은색 배경에 기호 출력 뿐만 아니라 누적된 함수 호출 스택을 콘솔 화면에 표시해 주기 때문이다.

const a = () => {
  console.error("error");
}
const b = () => {
  a()
}
const c = () => {
  b()
}

c()

console.assert

assert는 error와 같이 동작하지만 첫번째 인수가 false인 경우에만 메시지 및 스택 추적을 콘솔에 기록한다. 첫 번째 인수가 true이면 아무 작업도 수행하지 않는다.

그냥 if문 과 ~~console.error~~ 문을 좀더 코드 한 줄로 심플하게 처리하기 위해 있는 것으로 보면 된다.

let name = "inpa";
let msg = 2;

console.assert(typeof msg === 'number', { name, msg: msg }); // 출력 안함

msg = "2";

console.assert(typeof msg === 'number', { name, msg: msg }); // 출력

console.group

만일 콘솔 화면에 출력할 값들이 많을때, 이들을 그룹화 하여 무엇에 대한 출력값인지 구분하기 위해 가독성을 높이기 위한 메서드이다. ~~console.group~~ 은 중첩해서 사용할 수 있다.

console.group("쇼핑몰 로그");
console.log("로그인 됐는지 우선 확인");

console.group("회원 관련 작업");
console.log("아이디 확인");
console.log("비번 확인");
console.groupEnd();

console.group("상품 관련 작업");
console.log("가격 변동이 있는가?");
console.log("재고는 남아있는가?");
console.groupEnd();

console.log("마무리 작업");
console.groupEnd();

~~console.group~~ 안에 그룹할 내용을 작성하고 끝에 ~~console.groupEnd~~ 로 그룹을 묶어 하나의 집합을 형성한다고 보면 된다.

그룹 열기 / 닫기

만일 처음부터 그룹이 닫혀져 있게 하고 싶다면 ~~console.groupCollpased~~ 를 사용 하면 된다.

console.group("쇼핑몰 로그"); // 그룹 열기
console.log("로그인 됐는지 우선 확인");

console.groupCollapsed("회원 관련 작업"); // 그룹 닫기
console.log("아이디 확인");
console.log("비번 확인");
console.groupEnd();

console.groupCollapsed("상품 관련 작업"); // 그룹 닫기
console.log("가격 변동이 있는가?");
console.log("재고는 남아있는가?");
console.groupEnd();

console.log("마무리 작업");
console.groupEnd();

console.time

자바스크립트의 코드 수행 시간을 확인할때 유용한 콘솔 메서드 이다.

보통은 ~~Date.now()~~ 를 통해 현재 시간을 ms 세컨드로 구하고 코드 수행이 끝난 시간을 구해 이의 차이값으로 구할수도 있지만 이런 번거로운 방법보다 콘솔 API를 통해 간단하고 정확히 수행 시간을 구할 수 있다.

// time과 timeEnd에 같은 타이머 이름을 주어야 정상적으로 작동한다.
let count = 0

console.time('time1')

for (let i = 0; i < 1000000000; i++) {
  count++
}

console.timeEnd('time1') // time1: 1382.543212890625 ms

console.time('time2')

for (let i = 0; i < 1000000000; i++) {
  count++
}

console.timeEnd('time2') // time2: 6366.410888671875 ms

console.table

만일 다음과 같이 반복되고 규칙적인 key와 value가 있는 객체가 들어있는 배열일 경우, 마치 엑셀과 같이 테이블 형식으로 가독성 좋게 출력이 가능하다. 최신 웹브라우저에서는 모두 지원되는 기능으로 콘솔을 이용해 배열 데이터 내용을 파악할 때 편리하다.

const foods = [
  {
    name: '🍔',
    price: 30.89,
    group: 1,
  },
  {
    name: '🍨',
    price: 20.71,
    group: 1,
  },
  {
    name: '🍿',
    price: 10.31,
    group: 2,
  },
  {
    name: '🍵',
    price: 5.98,
    group: 2,
  },
]

console.table(foods)

배열 객체 뿐만 아니라 다차원 배열 역시 테이블 형태로 출력이 가능하다.

const dolls = [ ['라이언', 5], ['어피치', 3], ['콘', 2], ['무지', 3], ['프로도', 3] ];
console.table(dolls)

console.dir

객체를 로깅 할 필요가 있을 경우 이 메서드를 사용하는 것도 괜찮다.

예를들어 DOM의 body 부분을 ~~console.log~~ 로 그대로 출력해보면 html 태그가 출력되지만,

console.log(document.body)

console.dir로 출력하면 DOM 객체(Object)로 콘솔에 출력됨을 확인 할 수가 있다.

console.dir(document.body)

console.trace

호출된 함수 스택을 자동으로 추적해준다. 함수가 여기 저기 모듈 파일에서 호출될 경우 이를 추적할때 유리하다.

function foo() {
  function bar() {
    console.trace(); // 스택 추적
  }
  bar();
}

foo();

console.count

특정 호출된 값이 몇 번 호출 되었나 횟수를 기록하고 싶을 때 사용한다고 보면 된다.

console.count('카운터1'); // 카운터1: 1
console.count('카운터1'); // 카운터1: 2

console.count('카운터2'); // 카운터2: 1
console.count('카운터2'); // 카운터2: 2

console.count('카운터1'); // 카운터1: 3