Javascript_30_09

Derek·2020년 12월 25일

javascript30

javascript_30

목록 보기

10/31

안녕하세요!

Derek입니다. 😃

크리스마스네요! 이 글을 읽는 모든 분들 크리스마스 이브 잘 보내시고 이번 2020년도 잘 마무리 하셨으면 좋겠습니다 :)

오늘은 Javascript 30 의 9번째 주제를 가지고 포스팅 해보려고 해요!

아주 간단합니다..! console 관련한 기능들인데요, 정리만 해두려고 해요. 시작해보겠습니다.

09. Dev Tools Domination

목표

console에서 지원하는 기능을 정리해본다.

먼저, 저희가 제공받는 친구들이 있어요.

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

    function makeGreen() {
      const p = document.querySelector('p');
      p.style.color = '#BADA55';
      p.style.fontSize = '50px';
    }

이 친구들을 기반으로 console 을 사용해 여러가지 기능들을 소개해드릴게요.

01. Regular console log

다들 많이 사용하는 콘솔 로그입니다.

// Regular
console.log('hello');

네, 이건 머.. 콘솔 창에 헬로가 뜹니다. 설명할 필요가 없을것 같아요.

02. Interpolated console

// Interpolated
console.log('Hello I am a %s string!', '💩');

이 친구는 C언어 에 printf 함수와 굉장히 비슷합니다. 인자를 나중에 추가할 수 있도록, 굳이 예제에 똥 이모티콘이 아니라 변수가 들어가도, 출력할 수 있습니다.

03. Styled console

콘솔 로그를 출력할 때, CSS 효과를 넣듯이 추가할 수 있어요.

// Styled
console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

이 친구는 I am some great text 라는 문구에 효과를 추가합니다.
이런식을 볼 수 있어요. 이건 쓸모 없을 것 같기도..

04. Warning and error console

warning 과 error console을 인위적으로 집어 넣을 수 있어요.

console.warn('OH NOOO');
console.error('Shit!');

결과는 이런식으로 보입니다.

05. Info, testing and clearing console

console.info('Crocodiles eat 3-4 people per year');

const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'That is wrong!');

console.clear();

info 는 console.log 처럼 그저 출력을 하긴 하지만, 앞에 아이콘으로 i 가 붙여저서 나옵니다.
test 는 내부의 로직이 맞지 않으면, 마지막 인자로 받은 문자열을 출력해주는 역할을 해요.
clear 기능은 linux 처럼 콘솔 로그를 모두 지웁니다.

06. Grouping together

다음은 객체에 대해서 한눈에 보기 편한 출력을 만드는 작업입니다.

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

이런 강아지 객체 2마리가 있을때,

dogs.forEach(dog => {
  console.groupCollapsed(`${dog.name}`);
  console.log(`This is ${dog.name}`);
  console.log(`${dog.name} is ${dog.age} years old`);
  console.log(`${dog.name} is ${dog.age * 7} dog years old`);
  console.groupEnd(`${dog.name}`);
});

결과는
이런식으로 나오고, 각각 태그를 열어보면, 이런식으로 깔끔하게 찾아볼수 있습니다.

07. Timing console

console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
  .then(data => data.json())
  .then(data => {
    console.timeEnd('fetching data');
    console.log(data);
  });

먼저 fetching data 라고 명시를 해주고, 6번 프로젝트 게시물에 있는 fetch 함수를 사용합니다. 해당 https://api.github.com/users/wesbos 사이트에 접속하여, data 를 .json() 으로 파싱하여, 추출한 데이터마다 timeEnd 함수를 사용합니다. 이때 인자는 맨 앞줄에 명시한 것과 같게 해야 가능합니다!

그렇게 한다면 결과는
걸린 시간 및 console.log(data) 로 인해 추출한 data를 출력합니다.