Console 로그 관련한 내용

용도에 맞는 콘솔사용

console.log();
console.error();
console.warn();

=>결과

실행 경로 추정

function outerFn(){
  function innerFn(){
    console.trace()
  }
  innerFn();
}
outerFn();

=>결과

걸린시간 측정1

console.time("인덱스1");

console.timeLog("인덱스1"); // console.time으로부터 시간 ms기준

console.timeEnd("인덱스1"); // console.time으로부터 시간/ 더이상 집계 안함

=>결과

의도치 않은 경우만 출력

console.assert( true!=false, "출력 true")
console.assert( true==false, "출력 false")

=>결과

정리된 테이블로 리스트 index확인

여러 배열을 담은 값을 출력할 때 유용

console.table([{key:1,value:"예시값1"},{key:2,value:"예시값2"},{key:3,value:"예시값3"}])

=>결과

특정로그 시각적 강조

%c 삽입 및 두번째 인자 스타일 지정으로 시각적으로 로그를 강조할 수 있다.

// %c
console.log("%c원래콘솔로그", "color:yellow;")

=>결과

그룹핑

console.group("그룹명칭")

console.group("Inner Group1")
console.log("그룹내 아이템")
console.log("그룹내 아이템")
console.log("그룹내 아이템")
console.groupEnd();

console.groupEnd();

=>결과

객체나 배열을 뽑을 때 좀더 깔끔하게 보이는 방식

요새는 chrome에서는 log나 dir

console.dir({key:1, value:"예시값1"})

=>결과

콘솔로그를 꼭 지워야만하는 것일까?

다양한 프레임워크에서는 환경설정에 따라서 일부를 제외한 console.log를 제외할 수 있다. 다음과 같이 설정하면 exclude 에서 설정한 내용을 제외한 나머지 로그를 제외할 수 있다.

const nextConfig = {
  swcMinify:true,
  compiler:{
    removeConsole: process.env.NODE_ENV === 'production' && {
      exclude: ['error', 'warn']
    }
  },
};