[NODE] 📚 Chalk 모듈 - 노드 콘솔 로그를 컬러풀하게 ✨

브라우저 console.log 꾸미기

브라우저 콘솔은 CSS 스타일시트를 지원하기 때문에 조금 번거롭긴 하지만 만들기 어렵지는 않다.

console.log('%cHello, world!', 'color: #a4f644; background-color: red;');

%c 이후의 글자에는 모두 같은 스타일이 입혀지게 된다.

새로운 스타일을 씌우고 싶으면 %c를 또 쓰면 된다.

 

프론트앤드에서는 전혀 어려운 작업이 아니기 때문에, 당연히 백앤드에서도 되는 것으로 생각하는 분들이 많은데 아니다.

위 코드처럼 css값을 주어도 여전히 밍둥맹둥한 하얀글씨만 나올 것이다. 따라서, 다른 방법으로 적용을 해야 한다.

---

노드 console.log 꾸미기

터미널에서는 색깔을 변경하기 위해서 ANSI escape code를 사용한다.

다음 예제를 터미널에 쳐보자

console.log('\x1b[31mHello, world!\x1b[0m');

이 코드는 크게 세 부분으로 나눌 수 있다.

1. \x1b[31m
2. Hello, world! (실제로 내가 쓰고 싶었던 부분)
3. \x1b[0m

\x1b[로 시작해서 m으로 끝나는 코드가 바로 ANSI escape code이다. 

// red
console.log('\x1b[31m%s\x1b[0m', 'I am red')

// green
console.log('\x1b[32m%s\x1b[0m', 'I am green')

// yellow
console.log('\x1b[33m%s\x1b[0m', 'I am yellow')

// blue
console.log('\x1b[34m%s\x1b[0m', 'I am blue')

// magenta
console.log('\x1b[35m%s\x1b[0m', 'I am magenta')

// cyan
console.log('\x1b[36m%s\x1b[0m', 'I am cyan')

하지만 일일히 ANSI escape code 문자열을 넣어서 콘솔을 생성하는 일은 매우 번거롭다.

다행히 npm진영에는 컬러풀한 console을 위한 모듈이 존재한다.

---

chalk 모듈 사용법

chalk

chalk는 cmd에 나오는 log를 스타일링할 수 있는 패키지 이다.

colors라는 다른 콘솔 스타일링 패키지도 있지만, chalk가 기능도 많고 압도적인 다운로드 수를 자랑한다.

> npm i chalk # 설치

 

bgcolor로 백그라운드 컬러도 줄 수 있고 underline을 통해 밑줄을 그을 수도 있다.

const chalk = require('chalk');

console.log(chalk.blue('Hello') + ' balmostory' + chalk.red('!'));
console.log(chalk.yellow.bgRed.bold('Hello balmostory!')); 
console.log(chalk.red('Hello', chalk.underline.bgBlue('balmostory') + '!'));

 

혹은 ES6 리터럴 문법으로 다음과 같이도 사용이 가능하다.

console.log(chalk`aa bbb ccc`);
console.log(chalk`aa {bold bbb} ccc`);
console.log(chalk`aa {yellow bbb} ccc`);
console.log(chalk`aa {yellow.bold bbb} ccc`);

---

⚠️ 컬러가 나오지 않을 경우, 다음과 같이 설정해준다.

const ctx = new chalk.Instane( { level: 3 } ); // 초기화 문구를 사용해본다.

---

chalk 색상 스타일 지원

 

폰트

• reset - 스타일 리셋
• bold
• dim - 투명도 낮춤
• italic
• underline
• overline
• inverse- 배경색과 전경색을 반전
• hidden
• strikethrough
• visible

 

색상

• black
• red
• green
• yellow
• blue
• magenta
• cyan
• white
• blackBright (alias: gray, grey)
• redBright
• greenBright
• yellowBright
• blueBright
• magentaBright
• cyanBright
• whiteBright

 

백그라운드 색상

• bgBlack
• bgRed
• bgGreen
• bgYellow
• bgBlue
• bgMagenta
• bgCyan
• bgWhite
• bgBlackBright (alias: bgGray, bgGrey)
• bgRedBright
• bgGreenBright
• bgYellowBright
• bgBlueBright
• bgMagentaBright
• bgCyanBright
• bgWhiteBright