Javascript console 객체 활용하기

node 환경에서 개발을 하다보면 console.log를 활용하여 값을 찍어 보거나 플로우를 확인하는 경우가 종종 있다. 디버깅 기능을 활용하여도 되지만 지원하지 않는 환경이거나 로그 자체를 찍고 싶은 경우에는 유용하게 활용이 가능하다. 그런데 단순히 텍스트를 찍고 값을 확인하는데 사용하는 console 객체는 생각보다 다양하고 유용한 기능을 다수 지원한다. 개발할때 사용하면 편리한 내가 자주 사용하는 내용을 정리 해본다.

console 객체가 제공하는 유용한 함수

정리 내용 말고도 다양한 함수가 존재 하니 알아보고 상황에 맞춰 사용하면 좋다.

log()

가장 기본적이며 일반 메시지를 출력하는 메서드
추가 매개변수와 함께 Object 출력 가능

console log

warn(), error()

오류 및 경고 메시지 출력

console warn, error

group(), groupCollapsed(), groupEnd()

출력 메시지의 그룹을 생성해 이후 출력을 모두 한단계 들여쓰기 한다.
group()과 groupCollapsed()는 동일한 기능을 지원하지만 group()과 달리 groupCollapsed()는 출력시 텍스트가 접혀 있다.
그룹을 종료하기 위해서는 groupEnd()를 사용한다.

console group

time(), timeLog(), timeEnd()

시간 측정을 위한 타이머를 생성한다. 타이머는 동시에 최대 10000개 까지 생성이 가능하다.
측정 중간 시간 기록을 찍기위해서는 timeLog()를 사용한다.

console time

텍스트 꾸미기

node 환경에서 console 객체 메서드로 출력되는 문자열의 생상을 바꿀 수 있다. ANSI escape code를 사용하거나 이를 지원하는 라이브러리를 사용하면 된다. 이를 통해 좀 더 명확한 로그를 남길 수 있다.

ANSI escape code

ANSI escape code는 터미널을 제어하는데 사용되는 표준 코드로 현재는 드물에 터미널 출력 스타일을 변경하는데 사용되고 있다.

대표 색상 및 스타일 코드 표

폰트 색상	코드	배경 색상	코드	스타일	코드
검정	30	검정	40	초기화	0
빨강	31	빨강	41	굵게	1
초록	32	초록	42	밑줄	4
노랑	33	노랑	43	반전색	7
파랑	34	파랑	44
마젠타	35	마젠타	45
시안	36	시안	46
흰색	37	흰색	47

사용 예시

\x1b[<코드>m: <코드>에 원하는 스타일의 코드를 넣어 사용한다.

console.log('\x1b[32m%s\x1b[0m', '이 텍스트는 초록색입니다!');

console.log('\x1b[1m\x1b[31m%s\x1b[0m', '굵은 빨간 텍스트');

console.log('\x1b[36m[시안]  \x1b[33m[노랑]  \x1b[31m[빨강]  \x1b[0m[초기화]');

console style

`\x1b[<코드>m`의 구조와 의미

\x1b[<코드>m 이 문자열은 3부분으로 구성되어 있다.

\x1b : \x1b는 16진수 이스케이프 시퀀스로 ASCII 문자 ESC를 의미 한다.
- 역할은 터미널에게 '지금부터 제어 시퀀스가 시작된다'라는 신호룰 보낸다.
[(괄호)는 제어 시퀀스의 일부로 \x1b와 함께 제어 시퀀스가 시작됨을 알리는 표준 접두어 이다.
<코드>m는 실제로 어떤 스타일을 지정하는 코드로 m은 SGR코드로 해석 되어야 한다는 뜻이다.
- 역할은 <코드>의 값을 SGR 코드로 해석하여 스타일을 지정한다라는 뜻이다.

물론 Chalk 라이브러리를 사용하면 더욱 쉽게 스타일을 변경할수 있다.

HOME

카테고리