Console을 더 예쁘게!

Console.log()

JavaScript를 이용한 FrontEnd개발을 하다 보면 브라우저에서 개발자 도구를 통해 console창을 열어 데이터의 로그를 확인해야 할 때가 있다.

이럴 때 가장 많이 쓰이는 함수가 consoel.log()인데 로그를 이 console,*이 무엇이고 어떤 기능을 하는지, 또한 일반적인 log()말고 다른 어떤 종류들이 있는지 알아보고 정리하려고 한다.

 

Console?

Console은 JavaScript에서 제공하는 내장 객체로, 주로 디버깅에 사용된다. console 객체는 여러 메서드를 가지고 있으며, 이를 사용하여 개발자 도구의 콘솔 창에 로그, 정보, 오류 메시지 등을 출력할 수 있고 이를 이용해 에러를 찾고 수정할 수 있다.

 

 

동작 방식

console객체는 FrontEnd 개발뿐만 아니라 Node.js와 같은 BackEnd 환경에서도 사용할 수 있으며 각 환경에서의 동작 방식은 살짝 다른 점이 존재한다.

이번 글에서는 Node.js 관점은 간략하게 정리하고 FrontEnd개발 시 자주 확인하는 브라우저 관점에서의 동작 방식을 조금 더 깊게 알아보려고 한다.

 

 

Node.js에서의 console

1. 표준 출력 및 표준 오류 스트림: Node.js에서 console.log()와 console.info()는 표준 출력 스트림(stdout)으로 로그를 전송하며, console.warn()와 console.error()는 표준 오류 스트림(stderr)으로 로그를 전송한다.
2. 동작 방식:
   • Node.js 환경에서 JavaScript 코드가 실행되면, console 객체와 관련된 메서드 호출을 감지하면 해당 로그를 터미널 또는 명령 프롬프트에 출력한다.
   • Node.js에서의 console 메서드들은 실제로 내부적으로 process.stdout.write()나 process.stderr.write()를 사용하여 로그를 출력한다.
3. 접근성: Node.js에서는 실행한 터미널이나 명령 프롬프트에서 바로 로그를 확인할 수 있다.

 

웹 브라우저에서의 console

1. 브라우저의 개발자 도구: 브라우저의 개발자 도구에서 console 객체를 사용하여 로그를 출력하면, 해당 로그가 개발자 도구의 콘솔 탭에 표시된다.
2. 동작 방식:
   • 브라우저의 JavaScript 엔진은 console 객체와 관련된 메서드 호출을 감지하면 해당 로그를 브라우저의 개발자 도구 콘솔에 출력한다.
   • 이때, 로그의 유형(log, warn, error 등)에 따라 다른 스타일이나 아이콘이 적용될 수 있다.
3. 접근성: 일반 사용자들은 개발자 도구를 열지 않는 한 console 로그를 볼 수 없으므로, 주로 개발자들이 디버깅을 위해 사용한다.

 

브라우저에서의 console 메커니즘

1. JavaScript 엔진: 웹 브라우저에는 JavaScript 코드를 실행하는 JavaScript 엔진(예: Chrome의 V8, Firefox의 SpiderMonkey)이 내장되어 있다. 이 엔진은 JavaScript 코드를 실행하는 도중 console 객체의 메서드 호출을 감지하게 된다.
2. Binding: 웹 브라우저는 기본 JavaScript 언어의 구현 외에도, 웹 API(Web APIs)라는 특정 기능들을 제공하는데, console 객체 또한 이 웹 API의 일부로 작용한다. 따라서 JavaScript 엔진은 웹 API로의 호출, 특히 console 객체와 관련된 호출을 감지하면 해당 정보를 브라우저의 다른 부분에 전달한다.
3. 개발자 도구 연동: 브라우저의 개발자 도구는 별도의 패널로, 웹 페이지와는 독립적으로 동작하는 환경이다. 위에서 언급한 console 객체의 메서드 호출 정보는 브라우저의 내부 메커니즘을 통해 개발자 도구에 전달되고, 이를 통해 개발자 도구는 콘솔 탭에 해당 로그를 출력하게 된다.
4. 스타일링: console 객체의 다양한 메서드(예: log, warn, error 등)에 따라 로그에 다른 스타일이나 아이콘을 적용한다. 이런 스타일링 정보는 브라우저의 개발자 도구 구현에 내장되어 있다.

 

개발 시 자주 사용되는 Console 객체 메서드

console.log() - 일반적인 로그 메시지를 출력한다.

 

console.log()

 

console.info() - 정보 로그 메시지를 출력한다. 대부분의 브라우저에서는 console.log()와 동일하게 동작한다.

 

console.info()

 

console.warn() - 경고 메시지를 출력한다. 주로 주의해야 할 상황을 알릴 때 사용된다.

 

console.warn()

 

console.error() - 에러 메시지를 출력한다.

 

console.error()

 

console.table() - 배열이나 객체의 내용을 테이블 형태로 출력한다.

 

 

console.table()

 

console.group() 및 console.groupEnd() - 메시지를 그룹으로 묶어 출력한다.

 

console.group(), console.groupEnd()

 

console.assert() - 주어진 조건이 거짓일 경우 로그 메시지를 출력한다.

 

console.assert()

 

console.time() 및 console.timeEnd() - 코드의 실행 시간을 출력한다.

 

console.time(), console.timeEnd()

 

console.clear() - 콘솔 창의 내용을 지워준다.

 

console.clear() - before

 

console.clear() - after