[JavaScript] #03 - console.log() 사용법
console.log() 를 사용하는 구체적인 방법을 알아보자
기본 출력
log, info, debug, warn, error
console.log('기본');
console.info('정보');
console.debug('디버그');
console.warn('경고');
console.error('에러');console로 출력할 수 있는 출력문은 level(중요도)로 분류해서 사용할 수 있다. 크롬 같은 경우 console 출력 설정 기본값이
info, Warning, Errors라 Debug는 출력이 안될 수 있기 때문에 옵션 설정 확인이 필요하다.
여러가지 출력 방법
const owner = 'YD';
const message = 'Hello world!';
const isDeveloper = true;
const age = 27;
console.log(owner); // 하나의 값만 출력
console.log(owner, message, isDeveloper); // 여러 개의 값을 동시에 출력
console.log('%s는 문자와 %d는 숫자', owner, age); // 치환 문자 사용하기
console.log(`${owner} ${message}`); // "`" 백틱 사용하기console.log()는 여러가지 방법을 이용해 값을 출력할 수 있기 때문에 자신에게 맞는 방법을 사용하면 된다.
스타일 적용하기
// 출력문에 스타일 적용하기
console.log('%c출력문의 색상과 글자 크기를 변경하였습니다.', 'color: green; font-size: 16px;');
// 여러가지 스타일을 동시에 적용하고, 추가 메세지 출력하기
console.log('다중 스타일과 추가 메세지 출력하기: %c초록 %c파랑', 'color: green', 'color: blue', '추가 메세지 작성');console.log()는 %c(치환 문자)를 사용하면 스타일을 설정할 수 있을 뿐만 아니라 동시에 여러 개의 스타일을 적용할 수도 있다.
객체 출력하기
const obj = { owner: 'YD', text: 'Hello world!' };
console.log(obj); // 객체를 출력할 때는 이 방법 대신
console.log(JSON.parse(JSON.stringify(obj))); // 이 방법을 사용하자JavaScript 기초에서도 다룬 내용이다. 왜 객체를 출력할 때 JSON.parse()와 JSON.stringify()함수까지 번거롭게 사용해
객체를 출력해야 할까 ? 그 이유는 console.log()가 우리가 원하는 방식대로 동작하지 않기 때문이다. console.log()를 통해
객체를 출력하면 console.log()를 사용한 시점의 객체가 출력되길 원하지만 결과는 그렇지 않기 때문이다.
let obj = {};
console.log(obj);
// 출력되길 원하는 값: {}
obj.owner = 'YD';
console.log(obj);
// 출력되길 원하는 값: { owner: 'YD' }2번째 줄 console.log()에서는 어떤 값도 가지지 않고 있어야 하는데 코드를 실행하면 obj가 값을 가지고 있다고 보인다. 많은 브라우저들이 객체의 경우에는 값이 경신될 때마다 바뀐 값을 보여주게 되어있다. 그렇기 때문에 객체를 출력할 때는 console.log(JSON.parse(JSON.stringify(obj))) 이렇게 사용하는 것이 가장 좋다.
DOM 요소를 JSON 처럼 보여주는 console.dir()
console에는 log()와 같아 보이지만 다른 출력문 기능인 dir()이 있습니다. log()와 dir() 차이는 요소를 HTML과 같은 트리 구조를 보여주느냐 JSON과 같은 형태로 구성 요소를 보여주느냐입니다.
Element가 가진 메서드를 확인하고 싶어서 console.log()를 사용해보신 적이 있으실 텐데요. 원하는 결과는 보여주지 않고 HTML의 구조만 보여줍니다. 바로 이럴 때 console.dir()를 사용하시면 됩니다.
console.group()
console.log()를 묶어서 사용할 때 쓴다.
console.group();
console.log('Hello world!');
console.group('Web Developer');
console.log('Frontend Engineer');
console.log('YD');
console.groupEnd();
console.groupEnd();console을 이용해 메시지를 그룹화시켜서 사용할 수 있습니다. 이는 시각적으로 계층을 분리하는 효과가 있으며, log level과 같이 사용하면 활용도를 더 높일 수 있습니다.
console.table()
let data = ['Mark', 'YD', 'Evan'];
console.table(data);배열 형식의 데이터를 console.table()를 사용하면 console.log() 보다 멋진 출력물을 확인할 수 있고 JSON 형태의 값도 확인할 수 있다.
console.count()
console.count('Yap!');
console.count('Yap!');
console.count('Yap!');
console.count('Yap!');이 함수는 특정 count()가 호출된 횟수를 기록하고 보여준다. label을 옵션으로 사용하며 횟수를 기록하고console.countReset()를 호출하면 누적된 기록이 초기화된다.
console.time()과 console.timeEnd()
console.time('타이머');
let value = 0;
for (let count = 0; count < 100; count++) {
value += 5;
}
console.timeEnd('타이머');코드의 소요 시간을 측정할 때 사용하면 유용한 기능이다. label을 필수 인자로 사용하며, 타이머를 식별하는데 이용되며 시간 단위는 밀리초를 사용한다.