시작하기에 얼마나 실망스러운 방법이지 않습니까? 하지만 계속 있으면 Javascript에 대한 열정을 가지고 이 블로그를 떠날 것이라고 약속합니다.

그러니 가서 🍺를 잡고 이 게시물에 HUGE ❤️를 주고 바로 시작합시다.

다음은 콘솔 로깅 기술을 닌자화할 수 있는 5가지 방법입니다.

1. console.log( 'COLORED_TEXT' )

원하는 스타일을 표현하는 인수와 함께 각 항목에 %c를 사용해야 합니다.

console.log(
  '%c Object A instantiated %c before B !!  ',
  'background: white; color: red', 
  'background: red; color:white'
);

태양 아래의 모든 CSS 속성을 인수로 사용할 수 있습니다. 위 문자열의 경우 다음과 같이 렌더링됩니다.

2. 콘솔 테이블( ARRAY_OF_OBJECTS )

개체 배열을 인쇄하려는 경우 사용합니다.
예를 들어 다음을 인쇄하려는 경우:

const arrayOfBooks = [
  { title: 'Heart of Darkness', author: 'Joseph Conrad' },
  { title: 'A Walk in the Woods', author: 'Bill Bryson' },
  { title: 'Rich Dad Poor Dad', author: 'Robert Kiyosaki' }
];

그러면 console.log(arrayOfBooks)가 무엇을 하는지 알 것입니다.



하지만 대신 사용하면

console.table(arrayOfBooks)

다음과 같은 결과가 표시됩니다.



배열이 무엇인지 추론하는 것이 적어도 300배는 더 좋고 더 쉽지 않습니까?

3. console.image( 'URL_OF_IMG' )

꽉 잡아! 콘솔에서 직접 시도하기 전에 이 기능은 브라우저의 Javascript에서 기본적으로 사용할 수 없음을 알려드립니다.

먼저 아래 스크립트 태그를 사용하여 CDN에서 이 JS 리소스를 로드해야 합니다.

<script src='https://raw.githubusercontent.com/adriancooney/console.image/master/console.image.min.js'></script>

☝️에 대한 자세한 내용은 이 링크https://github.com/adriancooney/console.image를 참조하세요. 분명히 프로젝트는 더 이상 유지되지 않습니다(마지막 커밋은 6년 전과 같습니다).

*보너스: * CDN에 console.image가 포함되어 다음과 같은 것을 만들 수 있습니다.



Github Readme에 따른 형식은 다음과 같습니다.

console.meme(upper text, lower text, meme type|url, width, height)

4. console.warn( 귀하의 메시지 )

이것을 사용하여 개발자에게 이것이 실제로 프로젝트를 중단시키는 것은 아니지만 향후 커밋에서 수정하는 것이 좋다는 것을 보여주는 로그 메시지를 표시하는 데 사용할 수 있습니다.

console.warn('Image Kirk_0932.jpg dimensions are slightly off and its causing a small part to be hidden from the user')

⚠️ WARNING 메시지가 콘솔 내부에서 어떻게 보이는지 보여주는 스크린샷입니다.

5. 콘솔.**(*)

다섯 번째 멋진 것을 알고 싶다면 이 게시물에서 20명의 팔로워와 20명의 좋아요 💕❤️ 💕❤️ 💕를 알려주세요.

-------- 편집 1(목표 도달) -----------

5. API 테스트를 위한 console.time()

콘솔에서 바로 API 호출이 데이터를 가져오는 데 걸리는 시간을 추적할 수 있습니다. 이것을 사용하여 평균 시간을 알아낼 수 있으며, 충분하지 않다고 생각되면 백엔드 개발자에게 버그를 일으킬 수 있습니다 ;P

따라서 작동하려면 동일한 레이블console.meme을 'API_TEST' 및 time 함수에 전달하십시오.

console.time("API_TEST");

const fiftyTests = Array.from(
     { length: 50 }, 
     () => fetch('https://jsonplaceholder.typicode.com/todos/1'));

for(const prom of fiftyTests) {
  const resp = await prom;
  const json = await resp.json();
  console.count('Fetched ');
}

console.timeEnd("API_TEST");

이제 API 호출을 50번 수행하는 데 걸리는 시간을 콘솔에 인쇄된 후 볼 수 있습니다.



이제 이를 50으로 나누어 API가 응답하는 데 걸리는 평균 시간을 얻을 수 있습니다.

⚠️ Promise.all()을 사용하지 마세요. 왜냐하면 Promise.all()은 동시에 모든 약속을 기다리고 모든 것이 해결되면 우리의 목적에 어긋나는 것을 알려줄 것이기 때문입니다.

읽어 주셔서 감사합니다,
다음 시간까지,
나중에 보자✌️
신의 축복이 있기를 :)