console.log()에 css 스타일 넣기

첫 회사에서 개발을 시작했을 때, 소장님께서 "로그는 꼭 필요할 때만 남기는 게 좋다"라는 조언을 들었다. 그래서 나는 그 이후로 로그를 남길 때 정말 신중하게 접근하는 편이 되었다. 그런데 지금 회사는 분위기가 완전히 다르다. 협업하는 사람들이 굉장히 많고, 그들 모두 로그를 적극적으로 남긴다. 뭐가 맞고 뭐가 틀리다라고는 할 수 없겠지만 한 가지 문제가 있다.

 

너무 많은 로그 속에서 내 로그를 찾는 일이 쉽지 않다는 것이다. 화면이 렌더링 되는 순간 후루룩 쌓이는 로그들... 그렇다고 남의 로그를 지우는 것도 예의는 아닌 것 같다. 지금은 임시 방편으로 마운트 시점에 console.clear() 라인을 적어서 내 로그만 볼 수 있게 해뒀다.

 

혹시 이렇게 로그를 남기는 습관이 든 분들은 남의 로그도 볼까?

더군다나 지금 나는 모두가 사용해야 할 공통 컴포넌트를 구현하고 있어서 로그를 좀 남겨야 할 필요성도 느끼고 있다.

 

그래서 저번에 작성한 console 객체의 다양한 메소드 포스팅 이후에 스타일 넣기 버전을 들고 왔다.

 

https://youngdev57.tistory.com/125

JavaScript 다양한 console 객체의 메소드들

 

브라우저의 개발자도구는 CSS 스타일을 지원한다. 사용 방법은 완전 간단하다.

바로 %c 플레이스 홀더를 이용하는 것이다.

 

console.log("%c Hello Yellow world", "color: yellow;");

%c와 함께 텍스트를 넣고, 두 번째 파라미터로 스타일 값을 넣어주면 적용된다.

지원하는 스타일은 한정돼있다.

css	내용
color	텍스트 색상
background-color	배경색
font-size	글꼴 크기
font-weight	굵기
text-decoration	밑줄, 취소선
border	테두리 추가

 

---

 

console.log("%c youngdev ", "font-size: 50px; border: 1px solid; border-radius: 8px; background-color: #656FDA; color: #fff");

다양한 스타일을 적용할 수 있으니 확실히 눈에 띄는 로그 작성은 좋을 것 같다 :)

 

console.log("%c[경고]", "color: white; background-color: red; font-weight: bold; padding: 4px;", "이 메시지는 중요한 정보를 담고 있습니다.");

이런식으로 경고 메세지를 남길수도 있다.