Angular에서 개발 모드에서만 동작하고 배포 모드에서는 자동적으로...

Angular에서 개발 모드에서만 동작하고 배포 모드에서는 자동적으로...

반응형

보통 디버깅을 할 때 console.log나 console.error 를 많이 사용하게 됩니다.

개발 중일 때는 문제가 되지 않지만 console.log가 코드에 그대로 남아있는 채로 배포할 경우 실제 사용자가 데이터를 확인하게 된다는 보안 문제가 발생하게됩니다.

그렇다면 개발 모드에서만 동작하고 배포 모드에서는 자동적으로 없어지는 디버깅을 하고 싶다면 어떻게 해야 할까요?

여러 방법이 있지만 이 글에선 Angular에서 지원하는 방법을 알아보고자 합니다(이 글에선 Chrome 브라우저를 사용하여 설명하고 있습니다).

먼저 테스트 프로젝트를 하나 생성하고 자식 컴포넌트 하나를 만듭니다.

ng new debugging-test cd debugging-test ng g c child

AppComponent 템플릿에 자식 컴포넌트를 표시합니다.

This is Parent Component

이제 준비는 모두 끝났습니다. ng serve를 실행하여 프로젝트를 실행합니다. 그리고 Chrome의 개발자 도구를 열어주세요.

ng serve를 실행한 모습

Chrome의 경우 개발자 도구에서 Elements에 표시되는 DOM을 선택하면 $0이란 변수로 해당 DOM이 할당되어 Console 에서 $0 변수를 사용하는 것이 가능합니다.

DOM 선택

한번 테스트를 해보면 아래와 같은 결과를 얻을 수 있습니다.

$0 변수 확인

Angular에선 개발 모드일 경우 ng 라는 global “namespace” 변수를 사용하는 것이 가능합니다.

더 자세한 설명은 Angular 공식문서에서 확인하실 수 있습니다.

이 ng 변수를 사용하여 선택된 component 의 instance를 가져올 수 있습니다. 직접 테스트를 해보겠습니다.

먼저 app-child를 선택해줍니다.

app-child DOM 선택

그리고 $0 변수에 잘 할당이 되었는지 확인합니다.

app-child가 할당된 $0 변수 확인

이제 ng 변수를 사용할 때가 왔습니다. 할당된 $0 변수를 ng.getComponent()에 인자로 전달해줍니다.

ng.getComponent($0) 확인

성공적으로 ChildComponent의 instance를 출력하는 것을 알 수 있습니다.

그런데 선택된 component의 부모 component를 확인하고 싶을 땐 어떻게 할까요? 그 때 사용하는 것이 ng.getOwningComponent() 입니다.

ng.getOwningComponent()에 똑같이 $0 변수를 인자로 넘겨줍니다.

ng.getOwningComponent($0) 확인

부모 component 인 AppComponent 의 instance 가 출력된 것을 확인할 수 있습니다.

이것 외에도 change detection을 발생시킨다든지(ng.applyChanges()), ngIf나 ngFor를 사용한 component에 대한 context를 가져오고 싶다든지(ng.getContext()) 와 같은여러가지 함수를 총 9개 제공하고 있습니다.

이 함수들은 배포 모드(production mode)일 때는 노출되지 않기 때문에 안전하게 디버깅을 하고 싶을 때 유용하게 사용할 수 있습니다.

반응형

from http://clap-yeon.tistory.com/82 by ccl(A) rewrite - 2021-12-02 18:27:27