콘솔이란?
웹 개발에서 네트워크 요청, 메모리 사용, DOM 변경사항 등 실시간으로 확인할 수 있는 다양한 기능을 개발자 도구에서 확인가능하다.
그 중 무슨일이 일어나는지 파악할 수 있는 콘솔이 있다. 이를 사용하여 자바스크립트 코드의 동작과 흐름을 이해하고 버그를 해결할 수 있다.
콘솔은 주로 어떤 이유로 사용하는가?
- 코드에서 발생한 에러의 종류와 원인을 파악하는데 사용한다.
- 코드의 특정부분을 수정하고 실행하여 결과를 파악할 수 있다.
- 변수의 특정 위치에 따른 값을 출력하여 어떻게 동작하는지 파악할 수 있다.
- 조건문, 반복문의 논리가 예상대로 작동하는지 확인할 수 있다.
- 코드를 한 줄씩 실행하여 흐름을 추적할 수 있다.
과제
이상하게도 백슬래시를 표현하기 위한 '\\'가 원화로 콘솔창에 표시되었는데, 이는 크롬의 한글폰트의 경우 어쩔 수 없는 일이라고 한다.
따라서 vscode의 출력을 대신하여 남긴다.
형식이 따로 정해져있지 않아 여러개의 콘솔로 작성하였다.
작성시 주의할 점은 백슬래시를 한개만 쓰면 원하는 값이 나오지 않는다는 것이다.
또한 console.log 말고도 console.time과 console.timeEnd를 사용하여 같은 label을 가진 두 명령 사이의 실행 시간을 측정하여 보여 줄 수 있는 것이다.
또, console.warn()이나 console.error()를 사용하여 콘솔에 경고나 에러문구를 띄울 수 있는 것이었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
const dog = () => {
console.time('그리는 데 걸린 시간');
console.log(' /\\___');
console.log('( @\\____');
console.log(' / 0');
console.log('/ (_______/');
console.log('/_____/ U');
console.log('이것은 간단한 ASCII 아트 강아지입니다.');
console.warn('이 강아지는 그림입니다. 실제 강아지가 아닙니다!');
console.error('실제 강아지 데이터를 불러오지 못했습니다.');
console.timeEnd('그리는 데 걸린 시간');
};
dog();
</script>
</head>
<body></body>
</html>
'2차 공부 > TIL' 카테고리의 다른 글
| 24.06.07 PostgreSQL (0) | 2024.06.07 |
|---|---|
| 24.06.05 new Set() (0) | 2024.06.05 |
| 24.06.03 JS 톺아보기 (0) | 2024.06.03 |
| 24.05.31 배열과 연결 리스트(NodeList) (0) | 2024.05.31 |
| 24.05.30 TDZ와 Hoisting, var let const (0) | 2024.05.30 |