콘솔 메시지 스타일링

개발자로서 우리는 디버깅 목적으로 콘솔에 메시지를 기록합니다. 특히 응용 프로그램에 여러 구성 요소가 있는 경우 예기치 않은 결과를 얻는 것은 때때로 스트레스가 될 수 있습니다. 이 경우 콘솔 메시지가 매우 유용합니다.

콘솔 메시지의 스타일을 지정할 수 있다면 어떨까요? 아마도 디버깅 목적일 뿐만 아니라 사람들에게 작업을 멀리하라고 경고하기 위한 것일 수도 있습니다. 흥미롭게도 콘솔 문에 %c 지정자를 추가하여 이 작업을 수행할 수 있습니다. 이제 알았으니 개발자 도구를 열고 콘솔에서 시도해 보십시오.

console.log('%cStyling Console Messages', 'color:green; background:#33eeaa; font-size:25px;')

%c 지정자

지정자%c를 사용하면 콘솔 문에 CSS 스타일을 추가할 수 있습니다. 위의 예에서와 같이 %c는 두 번째 매개 변수의 CSS 스타일 규칙을 콘솔 문에 적용합니다. 다른 지정자에 대해 읽어보십시오Google Developers — Console API Reference.

기타 콘솔 메시지

스타일을 지정할 수 있는 다른 콘솔 문이 있지만 그 중 몇 가지에 CSS 스타일을 적용하는 데 중점을 두겠습니다.

console.log('%cGeneral output of logging information', 'color: #330000;'); 
console.info('%cInformative logging of information', 'color: #0080ff;'); 
console.warn('%cOutputs a warning message', 'color: #ff8000;'); 
console.error('%cOutputs an error message', 'color: #ff0000;');

마찬가지로 %c 지정자를 다른 콘솔 문에 사용할 수 있습니다. MDN Web Docs — Console Web APIs 에서 설명서를 확인하십시오.

여러 스타일 적용

확실히 여러 CSS 스타일을 콘솔 문에 적용할 수 있습니다. 콘솔 문 앞에 %c 를 추가합니다. 물론 지시문 뒤의 문은 매개변수에 명시된 CSS 스타일로 스타일이 지정됩니다.

console.log('Multiple Styles: %cFirst Style. %cSecond Style','color:#085965; font-size:20px','color:#f53c55; font-size:30px')

특히 콘솔 문에 지정된 세 개의 매개 변수와 %c 지정자에 각각 적용되는 마지막 두 매개 변수에 선언된 스타일이 있습니다.

CSS 스타일 배열로 콘솔 메시지 스타일 지정

사실 CSS 스타일은 길어질 수 있습니다. 그러나 스타일을 배열로 변수로 분리하면 도움이 될 수 있습니다.

const styles = [
    'color: #4dbb63', 
    'background: #999588', 
    'font-size: 20px',
    'text-shadow: 2px 2px #615e57',
    'padding: 5px',
].join(';'); 

console.log('%cStyling Console Messages', styles);

join() 함수는 배열을 문자열로 변환하는 데 사용되었습니다.

결론
결론적으로 콘솔은 우리가 활용할 수 있는 강력한 도구입니다. 그러나 laravel의 새로운 기능에 관심이 있다면 New in laravel 6 기사를 읽을 수 있습니다.