콘솔을 통해 자바스크립트 코드의 동작을 이해하고, 문제를 해결할 수 있어요.
콘솔은 무엇인가요?
웹 개발에서 브라우저 개발자 도구의 활용은 중요해요. 개발자 도구는 네트워크 요청, 메모리 사용, DOM 변경 사항 등을 실시간으로 확인 할 수 있는 다양한 기능이 존재합니다.
그 중 자주 사용하는 기능 중 하나가 바로 콘솔이에요. 원하는 값이나 메시지를 콘솔에 출력하여 무슨 일이 일어나고 있는지 파악할 수 있는거죠. 이걸 통해 내가 작성한 자바스크립트 코드의 동작/흐름을 이해하거나, 디버깅을 할 수 있어요.
콘솔을 통해 코드 결과를 실시간으로 확인해 볼 수 있어요.(화면에서 오른쪽 박스 부분)
콘솔을 사용하는 주된 이유가 무엇인가요?
•
에러 메시지 확인: 코드에서 발행한 에러의 종류와 그 원인을 알 수 있어요.
•
실시간 수정: 코드의 특정 부분을 수정하고 즉시 실행해서 결과를 확인 할 수 있어요.
•
변수 값 추적: 실행 중 변수의 현재 값을 출력하여, 어떻게 동작을 하는지 알 수 있어요.
•
논리 확인: 조건문, 반복문 등의 논리가 예상대로 작동을 하는지 확인 할 수 있어요.
•
디버깅 도구로 활용: 코드를 한 줄씩 실행해서 흐름을 구체적으로 추적해 볼 수 있어요.
Chrome 브라우저 콘솔 열기
간단 사용법
이제 과제를 시작해 봅시다.
특수 문자를 활용한 강아지 출력하기
1.
console.log 로 특수 문자를 출력하여 강아지를 그립니다.
2.
그림에 대한 설명도 출력합니다.
3.
그림에 대한 경고 메시지도 추가합니다.
4.
오류 메시지도 출력합니다.
5.
마지막으로, 강아지를 그리는 데 걸린 시간을 출력합니다.
결과물
힌트1
힌트2
아직은 어려운 것 같아요.
완료하셨다면?
•
전체코드를 복사하여 퀘스트로 제출해주세요
•