Angular console.log 기능

이 기사에서는 Angular console.log의 전체 개념에 대해 설명합니다.

Angular의 console.log 기능

console.log는 개발자 콘솔에 메시지를 기록하거나 웹 페이지에 브라우저 콘솔에 메시지를 기록하는 JavaScript 기능입니다.

이 방법은 Angular 개발자에게 오류, 경고 및 코드 실행 중에 일어나는 일을 알려줌으로써 도움이 됩니다.

Angular 애플리케이션을 디버그하고, 성능 문제를 식별하고, 타사 라이브러리 또는 기타 종속성 문제를 해결하는 데 사용됩니다.

모든 브라우저에서 개발자 도구를 열고 콘솔 탭으로 이동하여 이 기능에 액세스할 수 있습니다. Android Studio의 보기 > 도구 창 > 기타 > 콘솔에서도 찾을 수 있습니다.

console.log 메시지는 항상 타임스탬프, 수준 및 괄호 안에 메시지와 함께 작성됩니다. 메시지는 로그 유형에 따라 다릅니다.

레벨은 다음 중 하나일 수 있습니다.

• Debug: 디버깅을 위한 것이며 가능하면 피해야 합니다.
• Error: 런타임 오류가 발생했으며 수정할 때까지 코드 실행이 중지됩니다.
• Info: 정보 제공을 위한 것이며 코드 실행을 중지하지 않습니다.

console.log를 사용하여 코드를 작성하기 전에 먼저 터미널에 다음 명령을 입력하여 새 Angular 프로젝트를 만들어야 합니다.

ng new my-project
cd my-project
ng serve

다음으로 브라우저를 열고 http://localhost:4200/으로 이동하면 빈 화면이 표시됩니다.

이제 Angular에서 console.log를 사용하여 코드를 작성해 보겠습니다.

타입스크립트 코드:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent{
    console = console;
}

HTML 코드:

<h2>Example of Angular Console log</h2>
<p>
    press F12 and then run the code
</p>

{{ console.error('It will show up an error') }}
{{ console.log('It will show up logging') }}

여기를 클릭 위 코드의 라이브 데모를 확인하십시오.