[Javascript] Javascript es6 콘솔

 

나는 대체로 console.log만 많이 활용하는 편이었는데 생각보다 콘솔이 다양하다.

( 제가 실행하다보니 코드 이해를 위해 영,한이 섞여 있는데 이해부탁드립니다. )

es6 콘솔

모든 JavaScript 개발자는 콘솔 로그("메시지") 이 방법을 사용했습니다.

웹 브라우저에서 제공하는 JavaScript 콘솔 메커니즘과 유사한 간단한 디버깅 콘솔을 제공합니다.

이 기사에서는 몇 가지 일반적인 JS 콘솔 방법에 대해 설명합니다.

다음 방법은 모두 글로벌 인스턴스 콘솔에서 사용할 수 있으므로 콘솔 모듈이 필요하지 않습니다.

기본값: 콘솔 로그() | 정보() | 디버그() | 경고() | 오류()

이러한 콘솔 메소드는 제공된 이벤트 유형에 따라 적절한 색상으로 원래 문자열을 직접 인쇄합니다.

console.log("콘솔 로그")
console.info("콘솔 정보")
console.debug("콘솔 디버그")
console.warn("콘솔 경고")
console.error("콘솔 오류")

 

위에 코드를 실행한 결과 콘솔창

콘솔 출력 스타일 지정

% c 명령을 사용하여 CSS 스타일을 콘솔 출력에 적용할 수 있습니다.

console.log("%c텍스트 색상은 녹색이고 글꼴 크기가 커졌습니다.", "color: green; font-size: 2rem;")

결과

%c를 두 번 이상 추가할 수 있습니다.

console.log("여러 스타일: %cred %corange", "color: red", "color: orange", "포맷되지 않은 추가 메시지");

결과

1. console.table()

console.table()을 사용하면 콘솔 내부에 테이블을 생성할 수 있습니다. 입력은 테이블로 표시될 배열 또는 객체여야 합니다.

let info = [["수프라바"], ["프론트엔드 개발"], ["자바스크립트"]]
console.table(정보)

consle.table 코드를 실행한 결과 콘솔창

2. console.group("그룹") & console.groupEnd("그룹")

콘솔을 구성하려면 콘솔 Group() 및 콘솔 groupEnd()를 사용할 수 있습니다.

콘솔 그룹을 사용하면 콘솔 로그가 함께 그룹화되고 각 그룹화는 계층 구조에 새 계층 구조를 만듭니다. 한 번에 한 수준씩 groupEnd를 호출합니다.

console.group()
    console.log("첫 번째 메시지 테스트")
    console.group("정보")
        console.log("수프라바")
        console.log("프론트엔드 엔지니어")
    console.groupEnd()
console.groupEnd()

위에 console.group을 실행한 결과

3. console.dir()

지정된 객체의 JSON 표현을 인쇄합니다.

let info = {
    "name": "Suprabha", 
    "designation": "Frontend Engineer",
    "social": "@suprabhasupi"    
}
console.dir(info)

json 형태로 받아지는걸 확인할 수 있다.

4. console.assert()

첫 번째 매개변수가 false이면 메시지가 기록되고 스택 추적이 콘솔에 기록됩니다.

기본적으로 false 매개변수만 인쇄합니다. 첫 번째 매개변수가 true이면 아무 조치도 취하지 않습니다.

console.assert(false, "로그인!")

결과

예를 들어:

let name = "혜미"
let msg = "숫자가아닙니다"
console.assert(typeof msg === "number", {name: name, msg: msg})

결과

    let name = 123
    let msg = "숫자가 아닙니다"
    console.assert(typeof msg === 'string', {name: name, msg: msg})

 이렇게 코드를 바꿀경우 true가 되어 콘솔에 아무것도 찍히지 않는다.

(근데 나는 로그 분석까진 알겠으나 저렇게 하니 좀헷갈린다. typeof 때문일까..)

5. console.count()

이 함수가 호출된 횟수()가 기록됩니다. 선택적 매개변수 레이블이 있는 기능입니다.

레이블이 제공되면 이 함수는 이 특정 레이블이 호출된 count() 횟수를 기록합니다.

console.count("안녕하세요")
console.count("안녕하세요")
console.count("안녕하세요")
console.count("안녕하세요")

console.count 가 누적되어 찍힌다

label이 생략되면 함수는 이 지정된 행에서 count()가 호출된 횟수를 기록합니다.

for (let i = 0; i < 7; i++) {
    console.count()
}

결과

6. console.time() 및 콘솔 timeEnd()

실행 시 코드의 성능을 확인하십시오.

console.time()은 JavaScript 실행에 소요된 시간을 더 잘 추적할 수 있습니다.

console.time("Time")
let l = 0;
for (let i = 0; i < 5; i++) {
   l += i
}
console.log("total", l)
console.timeEnd("Time")

실행해본 콘솔창 결과

이부분은 잘 이해가 안간다. 토탈의 의미와 왜 10이 나오게 되는 걸까?

console.time("소요시간이 콘솔에 찍힐 네임명") // 소요시간 구하는 시작

폴문 함수

console.timeEnd("타임") // 총시간을 구하는 끝지점이고

그 안에 l는 i가 5번돌동안 누적시킨...횟수가 10이라는 걸까.

더 찾아보고 공부해야할 듯 싶다. 

 

 

참조 : 프로그램 위키 https://programs.wiki/wiki/es6-console.html