[JavaScript] console 사용하기

개념정리

console : node의 디버깅 콘솔에 접근할 수 있는 메서드를 제공합니다.

console은 브라우저, Node.js 둘 다 사용 가능한 객체이다.
하지만 여기선 Node.js의 console을 예로 들겠다.

이 console 모듈은 웹 브라우저에서 제공하는 JavaScript 콘솔 메커니즘과 유사한 간단한 디버깅 콘솔을 제공합니다.
- Node.js Documentation

💡 console 객체는 콘솔에 접근할 수 있게 하는 메서드다.

console 사용법

console 매서드에 사용법을 순서대로 알아보자.

Code - console.log

console.log('안녕하세요.');

const name = 'Xsop';
const age = 21;
const gender = 'men';
console.log(name, age, gender);

Console - console.log

안녕하세요.
Xsop 21 men

log는 평범한 로그를 콘솔에 표시한다.
console.log의 인자로 data를 넣어줄 수 있다. (Data type 상관없음)

console.log(data, data, ···) 처럼 여러 내용을 동시에 표시할 수 있다.
', ' (쉼표)를 사용해서 나타내면 내용이 자동으로 띄워 출력된다.

💡 console.log는 디버깅을 위해 자주 사용되는 매서드다.

Code - console.error

console.error('에러 메시지 표시');

console.error('console.error - 에러 메시지를 표시한다.');
console.log('console.log - 에러 메시지를 표시한다.');

Console - console.error

에러 메시지 표시
console.error - 에러 메시지를 표시한다.
console.log - 에러 메시지를 표시한다.

error은 에러를 콘솔에 표시한다.
Console 창을 보면 console.log와 별 차이 없다고 생각할 수 있다.
하지만 개발자 도구에서 보면 다르다.

Chrome

Pm2

또한 개발자 도구에서 필터를 사용하여 log만 불러오거나 error만 불러올 때 사용하죠.

💡 console.error은 유지보수, 모니터링을 편하게 하기 위해 사용한다.

Code - console.time

console.time('전체 시간');

// console.time, console.timeEnd 매서드에 인자로 주는 레이블이 서로 같아야 한다
// X
console.time('시작 시간');
console.timeEnd('종료 시간');
// O
console.time('걸린 시간');
console.timeEnd('걸린 시간');

console.timeEnd('전체 시간');

Console - console.time

걸린 시간: 0.004ms
전체 시간: 5.557ms
(node:8832) Warning: No such label '종료 시간' for console.timeEnd()
(Use `node --trace-warnings ...` to show where the warning was created)

time, timeEnd은 time, timeEnd 사이의 시간을 측정한다. (= 코드가 실행될 때 걸린 시간)

time, timeEnd 메서드는 연결하고 싶은 구간을 인자로 주는 레이블을 넣어주면 된다.
서로 다른 인자를 주었다면 오류가 발생한다.

💡 console.time은 코드가 진행될 때 얼마 지났는지 쉽게 알 수 있다.

Code - console.table

console.table([{ name: 'Xsop', age: 21, gender: 'men' }]);
console.table([
    { name: 'Xsop', age: 21, gender: 'men' },
    { name: 'Lion', age: 22, gender: 'men' },
]);

Console - console.table

┌─────────┬────────┬─────┬────────┐
│ (index) │  name  │ age │ gender │
├─────────┼────────┼─────┼────────┤
│    0    │ 'Xsop' │ 21  │ 'men'  │
└─────────┴────────┴─────┴────────┘
┌─────────┬────────┬─────┬────────┐
│ (index) │  name  │ age │ gender │
├─────────┼────────┼─────┼────────┤
│    0    │ 'Xsop' │ 21  │ 'men'  │
│    1    │ 'Lion' │ 22  │ 'men'  │
└─────────┴────────┴─────┴────────┘

table은 배열의 요소로 객체 리터럴을 넣으면, 객체의 속성들이 Table 형식으로 표현된다.
key가 column(가로줄)이 되고, value가 row(세로줄)이 된다.

💡 console.table은 객체를 Table 형식으로 볼 수 있게 한다.

Code - console.dir

const obj = { outside: { inside: { key: 'value' } } };

console.dir(obj, { colors: false, depth: 2 });
console.dir(obj, { colors: true, depth: 1 });

Console - console.dir

{ outside: { inside: { key: 'value' } } }
{ outside: { inside: [Object] } }

dir은 객체를 콘솔에 표시할 때 사용한다.
첫 번째 인자로 표시할 객체를 넣고, 두 번째 인자로 옵션을 넣는다.

옵션

colors : (Boolean) 콘솔에 색이 추가되어 보기 편해지게 변함.
depth : (Number) 객체 안의 객체를 몇 단계까지 보여줄지 결정함. (기본값은 2)

옵션 중 colors를 true로 설정하면 위의 사진과 같이 색이 추가된다.

💡 console.dir은 객체를 출력한다. (+옵션)

Code - console.trace

console.trace('에러 위치 추적');

Console - console.trace

Trace: 에러 위치 추적
    at Object.<anonymous> (D:\Code\Node.js\Node.js\test.js:1:9)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

에러가 어디서 발생했는지 추적할 수 있게 한다.

일반적으로 에러 발생 시 에러 위치를 알려주기 때문에 자주 사용하지는 않지만,
에러가 발생했을 때 위치가 나오지 않는다면 사용할 만하다.

💡 console.trace은 에러 발생 위치를 추적할 수 있다.

console 예제

Code

const string = 'abc';
const number = 1;
const boolean = true;
const obj = {
    outside: {
        inside: {
            key: 'value',
        },
    },
};
console.time('전체 시간');
console.log('평범한 로그입니다 쉼표로 구분해 여러 값을 찍을 수 있습니다');
console.log(string, number, boolean);
console.error('에러 메시지는 console.error에 담아주세요');

console.table([
    { name: '제로', birth: 1994 },
    { name: 'hero', birth: 1988 },
]);

console.dir(obj, { colors: false, depth: 2 });
console.dir(obj, { colors: true, depth: 1 });

console.time('시간 측정');
for (let i = 0; i < 100000; i++) {}
console.timeEnd('시간 측정');

function b() {
    console.trace('에러 위치 추적');
}
function a() {
    b();
}
a();

console.timeEnd('전체 시간');

Console

평범한 로그입니다 쉼표로 구분해 여러 값을 찍을 수 있습니다
abc 1 true
에러 메시지는 console.error에 담아주세요
┌─────────┬────────┬───────┐
│ (index) │  name  │ birth │
├─────────┼────────┼───────┤
│    0    │ '제로' │ 1994  │
│    1    │ 'hero' │ 1988  │
└─────────┴────────┴───────┘
{ outside: { inside: { key: 'value' } } }
{ outside: { inside: [Object] } }
시간 측정: 2.483ms
Trace: 에러 위치 추적
    at b (D:\Code\Python\BackJoon\test.js:29:13)
    at a (D:\Code\Python\BackJoon\test.js:32:5)
    ... 오류 메시지
전체 시간: 19.006ms

💡 console 객체에는 다양한 메서드를 포함함.

console 객체에는 이 보다 더 다양한 매서드들이 있지만,
자주 사용하는 것은 위와 같기 때문에 여기까지 하겠다.

저작자표시