![[자바스크립트] console.log를 다양하게 쓰자. console 객체](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcDYzxd%2FbtrrbSWSqUD%2FiqeQaJ9rp36rTuAxXoMI71%2Fimg.jpg)
console.log()는 자바스크립트로 개발하면서 아주 다양하게 사용됩니다.
개발자나 사용자에게 여러 정보를 알리는 수단이 되거나 디버깅에 사용되는 용도가 되곤 합니다.
그런데 혹시 console.log()만 사용하고 계신가요?
console 객체는 log 함수만 아니라 다양한 함수를 가지고 있습니다.
많은 사람들이 알고 있지만, 모르는 사람은 모르는 console 객체의 함수들을 살펴보겠습니다.
※ 참고로 웹 콘솔 기반의 포스팅입니다. nodejs나 다른 경우는 제외했습니다.
1. console.log(), console.info(), console.warn(), console.error()
처음부터 간단하고 쉬운 것부터 다루겠습니다.
익숙한 console.log()는 매개변수의 문자열을 콘솔에 출력하는 함수입니다.
하지만 log 함수 말고 info, warn, error 함수가 있습니다.
log는 배포시 삭제해야 맞지만, 만약 메시지를 남기고 싶다면 warn이나 error로 남기는 것이 더 좋을 것 같습니다.
처음에 "크롬에서 log와 info는 무슨 차이인가?" 했지만, 다른 브라우저에는 위와 같이 두 함수의 차이가 있었습니다.
(+추가) console.exception()
console.error()의 별명입니다. 같은 역할을 하지만, 사용하지 말라고 합니다.
2. console.debug()
크롬에서 console.debug()를 그냥 사용하면 나오지 않습니다.
이것은 크롬에서 console을 찍는 default level에 console.debug()가 빠져있기 때문입니다.
만약 console.debug()를 보고 싶으시면 콘솔 우측 상단에 Default levels를 클릭하여 Verbose를 체크해 주세요.
크롬에서 기본적으로 Default levels로 잡혀있기 때문에, 자동으로 console.debug()의 로그 내용을 사용자로부터 숨길 수 있습니다. 하지만, 다른 브라우저에서는 기본으로 debug도 나오는 곳이 있기 때문에 참고하셔야 합니다.
console log level
오른쪽으로 갈수록 중요도가 높음
debug > info > warning > error
3. console.assert()
console.assert()는 첫번째 매개변수가 true일 경우 콘솔에 출력하지 않고, false일 경우 콘솔에 메시지를 출력합니다.
따라서 특정 조건에 메시지가 뜰 수 있도록 디버깅할 때 if문 없이 출력하기 좋습니다.
console.assert(조건식, 메시지);
4. console.dir()
console.log()를 사용하다 보면 특정 객체를 log로 찍어볼 때가 있습니다. 그 객체에는 어떤 속성이 있는지 알기 어렵습니다.
하지만 dir 함수를 사용하면 특정 객체의 속성들을 콘솔에서 확인할 수 있습니다.
5. console.trace()
console.trace() 특정 코드가 어느 경로를 통해 실행되는지 알고 싶을 때, 유용하게 쓸 수 있는 함수입니다.
비동기, 이벤트리스너 등 경로를 예측하기 어려운 코드의 Call Stack을 알고 싶을 때 유용합니다.
6. console.count()
console.count()는 메시지와 함께 몇 번 실행되었는지 알 수 있습니다.
괜히 카운트를 세기위해 디버깅용 변수를 만들어서 테스트하는 것보다 더 깔끔하게 코드를 관리할 수 있습니다.
console.count()의 카운트는 같은 메시지에만 카운트가 증가합니다.
다른 메시지가 출력될 경우 별개의 카운트로 인식하여 처음부터 카운트합니다.
7. console.countReset()
console.countReset()는 매개변수의 메시지의 카운트를 초기화합니다.
8. console.group(), console.groupEnd(), console.groupCollapsed()
특정 log들을 한 그룹으로 묶고 싶을 때 사용합니다.
console.group()이 시작된 이후 log는 console.groupEnd()을 만나기 전까지 한 그룹으로 묶입니다.
console.groupCollapsed()는 기본적으로 접힌 그룹입니다.
9. console.time(), console.timeEnd(), console.timeLog()
특정 코드가 얼마나 오래 걸리는지 시간 측정할 때 console.time()을 사용합니다.
비동기 함수가 시간이 얼마나 걸리는지 측정하기에 아주 유용한 코드입니다.
기본적으로 console.timeEnd()를 하면 시간이 얼마나 걸렸는지 결과를 알 수 있습니다.
하지만 중간중간 과정에서 시간을 알고 싶으면 console.timeLog()를 이용하여 중간 시간을 측정할 수 있습니다.
10. console.table()
데이터를 테이블 형식으로 보고 싶을 때 사용하면 좋은 함수입니다.
특정 json 데이터를 테이블로 보고 싶을때 아주 유용한 함수입니다.
예시
https://jsonplaceholder.typicode.com/posts 에서 데이터를 받는다고 가정합니다.
(1) console.log로 데이터를 json 형태로 보기
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((json) => console.log(json));위와 같이 코드를 작성하면 log를 통해 데이터를 json 형태로 볼 수 있습니다.
(2) console.table로 데이터를 table 형태로 보기
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((json) => console.table(json));위와 같이 코드를 작성하면 table 형태로 데이터를 볼 수 있습니다.
마무리
console.log 이외에 console 객체가 가지고 있는 함수에 대해 정리해 보았습니다.
그 외 console.clear()와 같은 직관적인 함수는 설명하지 않았고,
console.profile()이나 console.timeStamp() 은 사용을 권장하지 않는 함수이기 때문에 설명을 생략했습니다.
참고
https://developer.mozilla.org/en-US/docs/Web/API/console
console - Web APIs | MDN
The console object provides access to the browser's debugging console (e.g. the Web console in Firefox). The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.
developer.mozilla.org
'개발 아카이브 > Javascript' 카테고리의 다른 글
| [자바스크립트] String에 대해 알아보자. (0) | 2023.02.12 |
|---|---|
| 자바스크립트 객체 관리와 V8엔진 히든클래스 (0) | 2022.06.16 |
| 자바스크립트 맵 객체 (Javascript Map Object) (0) | 2022.06.15 |
| Nomad coders - 바닐라 JS로 크롬 앱 만들기 후기 (3) | 2022.01.02 |
| 자바스크립트를 공부하기 위한 여정 - jQuery를 벗어내기 (0) | 2022.01.02 |