console.log는 브라우저에서 제공하는 console API중 하나. console 객체에는 log 외에도 다양한 메소드들이 존재한다.

log 레벨 종류


<aside> 💡 정말 필요한 정보가 아니면 log와 info는 제품 배포 단계에선 출력되지 않도록 한다. 배포할 때 log나 info는 출력하지 않도록 하거나 네트워크 요청이 발생하지 않도록 하는 등의 설정을 할 수 있기 때문에 중요도 레벨에 맞는 console 메소드를 사용하는 것이 중요하다.

</aside>

console.log

const dog = { type: '🐶', name: '츄츄', owner: { name: 'John' } };
console.log('logging', dog);

가장 자주 사용하는 console 메소드로 개발 도중 필요한 데이터를 출력하고 싶을 때 사용한다. , 콤마로 구분해서 여러 데이터를 출력할 수도 있다.

🔍️ console.log는 참조를 로깅한다. 객체 내용에 변경사항이 있다면 로깅시에도 실시간으로 업데이트 된다.

🔍️ 서식문자 %c와 CSS 속성을 이용해 출력 내용의 색이나 크기 등을 변경할 수도 있다.

console.log("%c색상 변경", "color: yellow; font-size: large;")

콘솔 출력 내용의 텍스트 색상과 크기를 변경한 화면

콘솔 출력 내용의 텍스트 색상과 크기를 변경한 화면

console.info

특정한 정보를 출력하고 싶을 때.

console.warn

경고 수준의 에러를 출력할 때. 노란색으로 출력됨.

console.error

심각한 수준의 에러를 출력할 때(예상하지 못한 에러나 시스템 에러 등). 빨간색으로 출력됨.

log, info, warn, error 콘솔 출력 화면

log, info, warn, error 콘솔 출력 화면