console.log 사용을 멈춰주세요! 대신에 이것을 사용해보는 건 어떨까요 ?

https://medium.com/@anirudh.munipalli/stop-using-console-log-in-javascript-try-these-instead-72490d895a24

STOP using just console.log in JavaScript. Try this instead

Anirudh Munipalli 님의 게시글을 읽고, 해석하여 정리해보았습니다. 

 

우리는 자바스크립트에서 디버깅을 위해 콘솔로그를 자주 사용하곤 하는데

가장 많이 사용하는 방법 중의 하나가, 

console.log

임을 부정할 수 없습니다 .

파이썬에서는 print()를 이용하면 정말 쉽게 프린트를 할 수 있지만 말이죠. 

VSCode와 같은 IDE(개발툴)에서는 console과 관련하여

다양한 옵션을 제공합니다. 
assert, clear, error, warn 등 많은 것들이 보이죠 ?

그 중에서 console.warn() 이나 console.error() 는
디버깅 프로세스를 더 쉽고, 빠르게 해줄 것입니다

console.warn("This is a warning");

어떤 Loop 에 대해서도 timing 이 가능합니다. 
console.time 과 console.timeEnd 를 사용해본 예시를 보면

시간이 다소 걸릴만한 CPU 에 부하를 주는 애플리케이션의 경우
굉장히 유용할 수 있습니다. 

 

 

console.trace 는 error 나 warn 과 비슷하게
디버깅 도구중 하나인데 error 나 warn 과 같이 
특정 에러, 경고문을 강력하게 나타낸다기 보다

디버깅 즉, 호출된 함수내에서 어떤 실행 경로가 있었는지를 전체적으로 안내해줍니다. 
그러므로 어떤 함수나 메서드에서 문제가 발생했는지 식속하게 파악하는데 도움을 준다고합니다. 

여기서 anonymous 라고 하는 것은

자바 스크립트에서 함수이름을 정하지 않고 window.onload 와 같이

// 인라인 스크립트 (익명 코드)
        window.onload = function() {
            console.trace(); // 인라인 스크립트 내에서 trace 호출
        };

함수의 이름을 정하지 않고, 함수를 호출했을 때 anonymous 라고 합니다. 

 

작성자의 글을 읽으면서 가장 흥미로웠던 기능은 

console.group 과 console.table 이었습니다. 

콘솔 그룹을 통해, 내가 확인해보고자 하는 구간을 묶어서 확인할 수 있다는 점이 
깔끔 명료했다고 느껴졌고 

테이블을 통해서, 데이터베이스 테이블과 같이

각 객체들에 대해, 필드들을 가독성 있게 확인할 수 있는 점도
object 모델들을 확인할 때 이용할 수 있을 것 같습니다! 

이외에 console에 CSS를 입힐 수도 있다고 하는데

자세한 내용은 

https://medium.com/@anirudh.munipalli/stop-using-console-log-in-javascript-try-these-instead-72490d895a24

STOP using just console.log in JavaScript. Try this instead

링크를 확인해주시면 감사합니다!