0Pricing
Angular Academy · 강의

Zone.js 없는 Angular

Zone.js 없이 Angular를 실행합니다.

Zone.js 없는 Angular은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Zone.js를 넘어서

Zone.js에는 오버헤드가 있고 전역 API를 패치합니다. 최신 앵귤러는 Zone.js 패칭 대신 시그널과 명시적인 알림으로 변경 감지를 구동하는 존리스 모드를 제공합니다.

존리스 활성화

부트스트랩 구성에서 존리스 변경 감지 프로바이더를 제공합니다.

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

Zone.js 제거

존리스 모드에서는 빌드 구성에서 zone.js 폴리필도 제거하므로 번들 크기와 시작 비용을 줄일 수 있습니다.

// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'

이제 무엇이 감지를 트리거할까요

Zone.js가 없으면 다음과 같은 경우에 앵귤러가 변경 감지를 예약합니다. 템플릿에서 읽은 시그널이 변경되거나, async 파이프가 값을 방출하거나, 이벤트 바인딩이 실행되거나, markForCheck()가 호출된 경우입니다.

시그널이 중심입니다

존리스 앱은 상태 관리에 시그널을 많이 사용합니다. 템플릿에서 시그널을 읽으면 종속성이 생성되고, 시그널을 업데이트하면 앵귤러에 해당 뷰를 새로 고치라는 알림이 전달됩니다.

count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CD

이벤트는 계속 알립니다

템플릿 이벤트 바인딩은 앵귤러에 직접 알리므로 Zone.js가 없어도 사용자 상호 작용에 따라 UI가 계속 업데이트됩니다.

<button (click)="count.update(c => c + 1)">+</button>

Zone.js 없는 비동기 처리

일반적인 setTimeout이나 시그널이 아닌 비동기 작업은 더 이상 자동으로 감지를 트리거하지 않습니다. 이러한 상태를 시그널로 감싸거나 markForCheck()를 호출하십시오.

setTimeout(() => this.ready.set(true), 1000);

비동기 파이프 호환성

async 파이프는 값을 방출할 때마다 뷰를 명시적으로 확인 대상으로 표시하므로 존리스 모드에서도 계속 작동합니다.

<p>{{ data$ | async }}</p>

서드파티 라이브러리

일부 라이브러리는 Zone.js의 자동 감지를 전제로 합니다. 존리스 모드에서는 해당 라이브러리의 콜백을 감싸 시그널을 업데이트하거나 markForCheck()를 직접 호출해야 할 수 있습니다.

장점

존리스 모드에서는 번들이 작아지고, 시작이 빨라지며, 예상하지 못한 추가 틱이 줄어듭니다. 또한 추적 중인 상태가 실제로 변경될 때만 UI가 업데이트된다는 더 명확한 개념 모델을 제공합니다.

실험적 상태

프로바이더 이름에 provideExperimentalZonelessChangeDetection이 포함된 것은 API가 안정화되는 중이기 때문입니다. 새로운 시그널 중심 앱에 도입하고 철저히 테스트하십시오.

빠른 확인

존리스 앵귤러에 대한 이해도를 확인합니다.

복습

provideExperimentalZonelessChangeDetection()을 사용하면 Zone.js가 필요하지 않으며, 시그널, 이벤트, 비동기 파이프 및 markForCheck()를 통해 업데이트를 구동하여 더 작고 빠르며 예측 가능한 앱을 만들 수 있다는 것을 배웠습니다.

자주 묻는 질문

“Zone.js 없는 Angular” 강의는 무료인가요?

네 — “Zone.js 없는 Angular” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Zone.js 없는 Angular”에서 뭘 배우나요?

Zone.js 없이 Angular를 실행합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“Zone.js 없는 Angular” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 변경 감지 작동 방식
  2. OnPush 변경 감지
  3. Zone.js 없는 Angular
  4. 목록과 렌더링 최적화
← Angular Academy(으)로 돌아가기