NodeJS의 주문형 및 다채로운 콘솔 로그인

우리 모두는 JavaScript에서 작업하는 동안 console.log을 알고 사용합니다. 어떤 프레임워크(react와 같은)이든 NodeJS이든 상관없습니다. NodeJS의 경우 터미널에서 콘솔 로그 출력을 볼 수 있습니다. 어느 시점에서 우리는 개발 중 또는 배포를 시도하는 동안 일부console.log를 제거하거나 추가하려고 합니다.
필요할 때 로깅을 토글할 수 있다면 어떨까요?
그리고 서로 다른 로그 메시지를 구별하기 위해 색상을 추가할 수 있다면 어떨까요?

먼저 간단한server.js 파일을 하나 만들어 보겠습니다. 아래와 같이 표시됩니다.

// Dependencies
const http = require('http');

//create a server:
const server = http.createServer((req, res) => {
  console.log('Write response')
  res.write('Hello NodeJS!') //write a response to the client
  res.end() //end the response
  console.log('Response ended.')
});

// start listening to the server
server.listen(8080, () => {
  console.log('Node server is listening on 8080 port.')
});

I have added some extra console messages for explanation.

이제 node server.js를 사용하여 서버를 시작하면 터미널은 아래와 같이 로그 메시지를 출력합니다.



괜찮은!

이제 주문형 로깅을 활성화하도록 server.js 파일을 수정해 보겠습니다.

먼저 server.js를 수정합니다. 업데이트된 코드는 다음과 같습니다.

// Dependencies
const http = require('http');
const util = require('util');
const debugLog = util.debuglog('server');

//create a server:
const server = http.createServer((req, res) => {
  debugLog('Write response');
  res.write('Hello NodeJS!'); //write a response to the client
  res.end(); //end the response
  debugLog('Response ended.');
});

// start listening to the server
server.listen(8080, () => {
  debugLog('Node server is listening on 8080 port.');
});

여기에서 몇 가지 변경 사항을 볼 수 있습니다. 단계별로 설명해보도록 할게요.

먼저 import Line 3에 util에 require 문을 하나 추가했습니다.

다음 줄( Line 4 )에서 debuglog 를 사용하여 완료한 util 메서드 호출에 대한 참조를 만들었습니다. 여기서 주목해야 할 중요한 사항은 함수 호출: 서버에서 제공되는 매개변수입니다.

마지막으로 console.log 문을 debugLog에서 생성된 Line 4 변수로 바꿉니다.

변경이 완료되면 node server.js 명령을 사용하여 서버를 실행하면 콘솔 출력이 표시되지 않습니다.

그러면 로그를 표시하는 방법을 생각하고 계실 것입니다.

음, 로그를 보려면 명령을 약간 변경해야 합니다. 새 명령 구문은 NODE_DEBUG=server node server.js 입니다. 아래 스크린샷을 참조하십시오.



위의 이미지에서 몇 가지 변화를 관찰할 수 있습니다. 그것들을 이해하려고 노력합시다.

NODE_DEBUG=server -> NODE_DEBUG를 server로 설정하면 util.debuglog('server') 초기화 중에 전달한 키와 관련된 메시지만 기록합니다. 이렇게 하면 파일 전체에서 다른 주문형 로깅을 사용할 수 있습니다.

출력이 나오는 동안 이전에 키워드도 추가합니다. 위의 경우 SERVER 10072: 를 추가했습니다. 이는 이 로그가 속한 응용 프로그램의 일부 또는 우리가 지정한 키워드를 이해하는 데 도움이 됩니다. 로그를 구별하는 멋지고 깔끔한 방법입니다. :)

다채로운 콘솔이 있다고 언급한 두 번째 부분으로 갑니다. 일반적으로 다음과 같이 console.log를 사용합니다.

console.log('Hello console');

앞으로는 다음과 같이 사용해 보세요.

console.log('\x1b[36m%s\x1b[0m', 'Hello console');

출력은 다음과 같습니다.



멋지지 않나요?

알아요, 약간의 설명이 필요합니다. 따라서 console.log의 첫 번째 매개변수는 터미널에 텍스트 색상을 변경하도록 지시합니다. %s는 로그 메시지의 자리 표시자입니다. 이제 색상을 다른 값으로 변경하려면 [ 뒤의 숫자와 m 앞의 숫자를 가지고 놀아보세요. 위의 예에서 빨간색 변형을 얻기 위해 36를 31로 업데이트할 수 있습니다.

이는 온디맨드 로깅에서도 작동합니다(위에서 설명). 그리고 우리는 아래와 같은 것을 얻을 수 있습니다:



멋져 보여요.

비슷한 방식으로 텍스트 색상 대신 로그 메시지의 배경을 변경할 수 있습니다. 여기에 참조용 값을 제공하고 있습니다. 계속해서 시도해보십시오.

Reset = "\x1b[0m"
Bright = "\x1b[1m"
Dim = "\x1b[2m"
Underscore = "\x1b[4m"
Blink = "\x1b[5m"
Reverse = "\x1b[7m"
Hidden = "\x1b[8m"

FgBlack = "\x1b[30m"
FgRed = "\x1b[31m"
FgGreen = "\x1b[32m"
FgYellow = "\x1b[33m"
FgBlue = "\x1b[34m"
FgMagenta = "\x1b[35m"
FgCyan = "\x1b[36m"
FgWhite = "\x1b[37m"

BgBlack = "\x1b[40m"
BgRed = "\x1b[41m"
BgGreen = "\x1b[42m"
BgYellow = "\x1b[43m"
BgBlue = "\x1b[44m"
BgMagenta = "\x1b[45m"
BgCyan = "\x1b[46m"
BgWhite = "\x1b[47m"

위에 주어진 예에서 시작부터 m 문자까지의 내용을 위 중 하나로 바꾸고 출력을 확인하십시오. 여기에 멋진 콘솔 메시지와 사용된 코드가 있는 주석을 아래에 자유롭게 추가하십시오.

읽어 주셔서 감사합니다.

행복한 학습!