콘솔 적극 활용하기-강아지 편

console.time('그리는 데 걸린 시간');
console.log(`
             /＼____
            (      @＼_____
             /             0
            /     (_______/
           /______/     U
           `);
console.log('이것은 간단한 ASCII 아트 강아지입니다.');
console.warn('주의: 이 강아지는 그림입니다. 실제 강아지가 아닙니다!');
console.error('오류: 실제 강아지 데이터를 불러오지 못했습니다.');
console.timeEnd('그리는 데 걸린 시간');

 

오늘은 콘솔을 통해 강아지를 그리는 연습을 해보았다. 비록 이 글의 본문의 강아지는 깨져 버렸지만, 콘솔 내에서는 강아지가 잘 출력된 것을 이미지를 통해 증명할 수 있다. 

 

콘솔이란 브라우저 개발자 도구 중 하나이다. 

개발자 도구란?

• 네트워크 요청, 메모리 사용, DOM 변경 사항 등을 실시간으로 확인할 수 있는 다양한 기능을 수행할 수 있는 도구

콘솔이란? 

• 원하는 값이나 메시지를 콘솔에 출력하여 무슨 일이 일어나고 있는지 파악할 수 있다. 
  • 내가 작성한 자바스크립트 코드의 동작/흐름을 이해할 수 있다. 
  • 디버깅을 할 수 있다. 

콘솔을 사용하는 이유?

• 에러의 종류와 원인을 알 수 있다. 
• 콘솔에서 코드를 임시로 수정하여 실행결과를 브라우저 화면에서 확인할 수 있다. 
• 변수 값 추적, 논리 확인, 디버깅 도구로 활용(실행화면과 비교하며 코드를 쉽게 찾고 수정할 수 있다.) 

이렇게 당장에 콘솔의 기능에 대해서는 대강 알게 되었다. 다만 이러한 기능들은 추후에 더욱 복잡한 코딩을 할 때 유효할 것이므로 그 때 더 자세하게 학습할 필요를 느낀다. 

 

오늘의 난관

콘솔창에서 \역슬러시를 치는 건 어려운 일이다...

 

엔터 위쪽 화폐 키는 /역슬러시와 같은 기능을 하지만, /역슬러시 그 자체는 아니라서 이번에 그림을 그리는 데 난관이 되었다. 때문에 위 강아지그림 콘솔창의 /역슬러시는 ㄱ+한자 키를 이용해 특수문자를 불러와 삽입한 것으로써 엔터 위쪽 화폐 키로는 콘솔창에서 /역슬러시 모양을 그릴 수 없었다.