개발자 필수 사항: JavaScript console 메서드 - 2

이번에는 지난 번 적었던 글에 이음으로 console 메서드를 사용하는 방법에 대해 마저 알아보겠습니다.

지난번에는 table까지 대해서 알아보았는데요. 오늘은 다른 기능들에 대해서 알아보도록 하겠습니다.

 

time(),timeEnd()

코드 수행 시간을 확인할 때 유용합니다. time과 time에 같은 이름을 주어야 정상적으로 작동하며, 보통 어떤 작업에서 얼만큼의 시간이 소요되는지 기록할 때 사용하는 메서드입니다. 

 

당연하지만 이 시간 측정이 절대적이진 않습니다. 시간은 변동될 수 있으며, 절대적인 사양은 아니기에 이 시간이 표준이 되기는 어렵습니다. 코드의 효용성을 위해서 사용하는 것을 추천합니다.

mdn에서는 https://developer.mozilla.org/en-US/docs/Web/API/Performance_API (performance API)를 사용할 것을 권장하고 있습니다.

 

grop()

group는 로그를 그룹화시켜서 출력을 구성하는 방법입니다. 그룹은 잘만 처리한다면 출력되는 로그들을 묶어서 가독성을 높일 수 있게 구성할 수 있습니다.

 

trace()

console.trace는 콘솔에서 코드가 어떻게 실행되는지 흐름을 알 수 있는 메서드 입니다. trace는 호출되는 시점에 존재하는 call stack을 로깅해서 콘솔에 표시합니다. 

여기서 잠깐 call stack 대해 이야기합시다.

우리가 사용하는 자바스크립트는 단일 스레드로, 동시에 하나의 작업만 작업할 수 있습니다. 그러나 겉으로 보기엔 별 무리가 없어 보이는데,이는 자바스크립트의 엔진 구조 때문입니다.

v8이라고 불리는 엔진의 구조는 메모리 힙과 콜 스택으로 나눕니다. 

메모리 힙은 참조 타입의 데이터가 저장되며, 메모리 할당이 일어나는 곳입니다.

호출 스택은 함수의 호출이 저장되는 곳으로, 호출되는 함수들을 스택 구조로 쌓아두고 위에서부터 처리하는 방식입니다.

예를 들어보겠습니다.

 

 

 

 

a,b,c와 console의 Trace 메서드로 추적해본 결과입니다.

console의 로그 값은 a,b,c 차례대로 출력되지만, trace는 c,b,a로 출력됩니다.  

trace는 호출된 시점부터 존재하는 콜 스택들을 로깅해서 출력해줍니다. 즉 위에 함수들이 실제로 동작하는 방식은 아래와 같다는 거죠.

                       |c|       
                |b|    |b|    |b|
none -> |a| ->  |a| -> |a| -> |a| -> |a| -> none

 

 

trace는 사용 방법이 무궁무진합니다. 동작 원리를 통해 명확한 과정을 추적할 수도 있고, 에러를 트레이싱해 정확하게 원인을 밝혀낼 수도 있습니다.

아래는 토스트 ui에서 보았던 에러 스택 트레이스 심화입니다. 저도 아직 이해하는 중이라, 질문은 묻어두시면 감사하겠습니다.

https://ui.toast.com/weekly-pick/ko_20170306

자바스크립트 에러와 스택 트레이스 심화

 

 

 

지금까지 개발자가 알아야할 콘솔 메서드들에 대해서 알아보았습니다. 물론 위에 메서드들을 실용적으로 쓰지 않는 분들도 많습니다. 

사실 이런 부분은 직접적인 영역이라기 보단, 표현의 영역이라 여전히 log로도 결과물을 출력하기엔 문제가 없습니다.

그래도 알면서 안 쓰는 게 몰라서 못 쓰는 것 보단 낫겠죠. 이왕이면 알고 쓰면서 개발의 효율을 높일 수 있는 개발자가 됐으면 좋겠습니다.

저도 마찬기지로.