Zone.js란 무엇이며 "zoneless" Angular는 무엇을 의미하나요?

Question

Accepted Answer

**Zone.js**는 Angular가 역사적으로 **언제 change detection을 실행할지** 알기 위해 사용해 온 라이브러리입니다. 브라우저 비동기 API에 패치를 적용하여, Angular가 상태를 변경할 수 있는 모든 이벤트를 자동으로 감지할 수 있게 합니다. **Zoneless** Angular는 이 의존성을 제거하고, 대신 signal과 명시적 알림에 의존합니다.

## Zone.js가 하는 일

```text
Zone.js는 비동기 API에 몽키 패치를 적용한다: setTimeout, addEventListener, Promise,
XHR/fetch 등. 이들 중 하나가 발생하면, Zone.js가 Angular에 알림 →
Angular가 자동으로 change detection을 실행.
```

이것이 Angular의 자동 업데이트 뒤에 있는 "마법"입니다. HTTP 응답이나 클릭 후 속성을 변경하면 뷰가 그냥 업데이트됩니다. Zone.js가 비동기 이벤트가 완료되었다고 Angular에 알려주기 때문입니다.

```ts
// 이렇게 작성하면 뷰가 자동으로 업데이트된다 — Zone.js 덕분에:
setTimeout(() => { this.message = "Updated"; }, 1000); // Zone.js가 CD를 트리거
```

## Zone.js의 단점

```text
✗ 오버헤드 — 모든 것에 패치하고, CD를 광범위하게 트리거 (전체 트리 검사)
✗ 번들에 약 100KB 추가
✗ 부정확 — 관련된 것이 아무것도 변경되지 않아도 change detection 실행
✗ Angular의 zone 밖에서 실행되는 서드파티 코드와 혼동될 수 있음
```

Zone.js는 *무엇이* 변경되었는지 알 수 없으므로, 많은 이벤트에서 전체 change detection 패스를 트리거합니다. 대규모 앱에는 비효율적입니다.

## Zoneless Angular (signal 기반)

```ts
bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()], // Zone.js 없음
});
```

zoneless 모드에서 Angular는 패치된 비동기 API에 의존하지 않습니다. 대신, change detection은 **명시적으로** 트리거됩니다. 주로 **signal**(값이 변경될 때 Angular에 정확히 알림)에 의해, 그리고 `async` pipe, 이벤트, `markForCheck()`에 의해서입니다.

```ts
count = signal(0);
increment() { this.count.set(this.count() + 1); } // signal이 무엇이 변경되었는지 Angular에 알림 → 세밀한 업데이트
```

## zoneless로 가는 것의 이점

```text
✓ 더 작은 번들 (약 100KB의 Zone.js 제거)
✓ 더 나은 성능 — 세밀하고 정밀한 업데이트 (변경된 signal에 의존하는 것만)
✓ 비-Angular 코드와 더 깔끔한 통합
✓ 더 단순한 디버깅 (zone 관련 스택 잡음 없음)
```

## 왜 중요한가

Zone.js는 Angular의 오랜 "자동" change detection을 설명합니다 — 그리고 그 비용(번들 크기, 광범위/부정확한 검사)도 설명합니다.

**signal**로 구동되는 **zoneless**로의 이동은 주요한 아키텍처 전환입니다. 업데이트를 세밀하고 명시적으로 만들고, 번들을 줄이며, 성능을 개선합니다.

둘 다 이해하는 것 — Zone.js가 왜 존재했는지와 무엇이 그것을 대체하는지 — 은 Angular가 signal 기반의 zoneless 미래를 기본값으로 향해 가면서 점점 더 중요해지고 있습니다.