2020-01-18
정리
: Javascript30을 공부한 내용 기록
console 객체는 브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공한다.
const dogs = [
{ name: 'Snickers', age: 2 },
{ name: 'hugo', age: 8 },
];
const log = (value) => console.log(value);
const warn = (value) => console.warn(value);
const error = (value) => console.error(value);
const info = (value) => console.info(value);
// const assert = (value) => console.assert(value); // failed
const clear = (value) => console.clear(value);
const dir = (value) => console.dir(value);
const groupCollapsed = (value) => console.groupCollapsed(value);
const groupEnd = (value) => console.groupEnd(value);
const count = (value) => console.count(value);
const time = (value) => console.time(value);
const timeEnd = (value) => console.timeEnd(value);
const table = (value) => console.table(value);
// Regular
log('hello');
// Interpolated
log('Hello I am a %s string!', '💩');
// Styled
log(
'%c I am some great text',
'font-size:50px; background:red; text-shadow: 10px 10px 0 blue'
);
// warning!
warn('OH NOOO');
// Error :|
error('Shit!');
// Info
info('Crocodiles eat 3-4 people per year');
// Testing
const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'That is wrong!');
// clearing
// clear();
// Viewing DOM Elements
log(p);
dir(p);
// clear();
// Grouping together
dogs.forEach((dog) => {
groupCollapsed(`${dog.name}`);
log(`This is ${dog.name}`);
log(`${dog.name} is ${dog.age} years old`);
log(`${dog.name} is ${dog.age * 7} dog years old`);
groupEnd(`${dog.name}`);
});
// counting
count('Wes');
count('Wes');
count('Steve');
count('Steve');
count('Wes');
count('Steve');
count('Wes');
count('Steve');
count('Steve');
count('Steve');
count('Steve');
count('Steve');
// timing
time('fetching data');
fetch('https://api.github.com/users/wesbos')
.then((data) => data.json())
.then((data) => {
timeEnd('fetching data');
log(data);
});
table(dogs);
👋