최근 Angular는 독립적인 '체험형' 개발 기능을 Zone.js 출시했습니다. 이 기능은 아직 실험 단계이지만, Angular 팀은 이 중요한 혁신을 오랫동안 개발해왔습니다. 응답형 원시 기능은 개발자들에게 점점 더 중요해지고 있으며, 이는 Angular가 또 다른 새로운 시대로 접어들고 있음을 나타냅니다. 각도 의존성Signals와 Rxjs의 장점은 더욱 두드러져, Zone.js 의존하는 변화를 끊임없이 들을 필요가 없어집니다개발 과정에서 중개자 역할을 하게 되었습니다.
Angular는 앞으로도 대담하고 강력한 프레임워크가 되어 새로운 변화를 시작할 것입니다.
우선, 제 글은 누구에게도 가르침을 주려는 것이 아닙니다. 제 독자들이 그렇게 수동적일 자격이 있다고 느끼지 않길 바랍니다. 저는 제 경험과 배움을 최대한 많이 공유하고 토론에 열려고 노력합니다. 함께 토론하고, 아이디어를 교환하며, 비판적 사고를 바탕으로 평가하는 것이 중요합니다. 특히 이 글에서 다룬 기술들이 아직 경험 중일 때, 변경 감지 메커니즘조차도 Angular의 핵심 팀 내에서 혼란을 초래할 수 있다는 점을 잊어서는 안 됩니다.
Zone.js는 무엇이며 무엇을 하나요?
Zone.js는 2010년 브라이언 포드가 "Zones"라는 이름으로 개발한 작은 라이브러리로, JavaScript에서 비동기식 작업을 관리하기 위해 개발되었습니다. Erlang과 Dart와 같은 언어에서 영감을 받아, JavaScript의 싱글 스레드 환경에 구조화된 동시성을 도입하는 것을 목표로 합니다. Angular 팀은 Angular 2에서 Zones를 변화 감지 메커니즘으로 채택하면서 탄력을 얻었고, Angular 팀은 Zone.js 형태로 이를 기여하여 더 넓은 커뮤니티 참여와 추가 개발을 제공했습니다. 오늘날에도 Angular와 밀접하게 연관되어 있지만, Zone.js 비동기 작업 모니터링과 개입을 위한 강력한 도구로 간주될 수 있으며, 성능 분석, 오류 처리 능력, 그리고 많은 의문스러운 기능을 가능하게 합니다.
그렇다면 왜 앵귤러는 Zone.js을 버렸을까요?
AI가 상상 속 이미지를 손쉽게 그림으로 변환하는 능력을 활용해, '침대 밑 스펀지'라는 은유를 사용해 쉽게 이해할 수 있도록 시각적 효과를 만들었습니다.
위 사진의 침대를 상상해 보세요. 바닥에 놓인 것이 아니라 큰 스펀지 위에 놓여 있습니다. Zone.js Angular 애플리케이션에서 스펀지 같은 느낌입니다. 이 스펀지는 침대가 편안하고 지지하는 받침대 위에 놓이도록 하면서도 수자는 사람에게도 상대적인 편안함을 제공합니다. 스펀지는 침대의 모든 움직임을 흡수하여 침대 내부의 움직임이 외부로 반사되는 것을 막습니다.
Zone.js 몽키 패치는 이벤트, 커밋먼트, 옵서버 가능성, setTimeout, setInterval 등 브라우저 내 모든 비동기 API를 수신합니다.
이러한 신호를 듣음으로써 Angular 애플리케이션은 변경 사항을 감지하고 사용자 인터페이스를 업데이트할 수 있으며, 이는 스펀지 지지대처럼 Angular 애플리케이션이 원활하게 실행될 수 있도록 Zone.js 합니다. 이 경우, 매우 큰 프로젝트에서는 느끼지 못하는 성능 문제가 발생할 수 있습니다.
반면, 이 복잡한 구조는 시간이 지남에 따른 특정 변화를 인지하는 것을 방해하는 것 같습니다. 이전의 각 특성과 발전, 그리고 그 자체의 내부 발전과 변화하는 필요가 갑자기 다음 특성과 발전에 장애물이 됩니다.
스펀지를 우리 발밑에서 빼내면, 침대가 땅과 직접 접촉하면서 자연스러운 자유로운 움직임이 나타나기 시작합니다. 스펀지의 편안함을 제한하는 효과가 닳기 시작하면, 침대 위의 움직임이 이제 땅에 직접 반사됩니다.
이런 은유는 스펀지가 편안한 영역을 제공하고 상대적으로 더 편안한 수면을 제공한다는 의미일 수 있습니다. Zone.js 이 스펀지처럼, 표면 전체의 모든 변화를 느낄 수 있는 진지한 안락한 영역을 제공합니다. 하지만 시간이 지나면서 이 복잡한 구조가 특정 변화를 인지하지 못하게 할 수도 있습니다. 허리 통증은 스펀지를 빼낼 때 발생할 수 있으며, 이러한 통증과 통증은 우리가 인공 땅에서 자연 땅으로 내려갔음을 나타냅니다. 이 전환 경험은 약간 고통스러울 수 있지만, 결국 허리를 곧게 펴고 편안한 수면과 더 나은 혈액순환, 그리고 더 건강한 신체적·정신적 예리함을 갖게 됩니다. 스펀지 없이 침대에서 자서 허리와 관절 통증이 생기는 존 프리(zone-free)로 전환하는 것은 인공 땅에서 자연 땅으로 전환하는 좋은 신호입니다. 이 전환 경험은 다소 아프지만, 허리가 원래 자연 상태로 다시 형성되어 혈액순환이 개선되면서 통증도 사라집니다; 여기 전이 예시는 Angular v18에서 들었던 실험적 Zoneless와 일치합니다.
Zone.js asektron 작업을 추적하여 호출, 이벤트, 오류 등과 같은 Angular 감지 메커니즘에 전달하기 때문에 추가 부하를 증가시키는 것으로 여겨집니다. 오늘날 Angular의 성능 측면에서 보면, 우리는 여기서 추가적인 부하를 느끼거나 느끼지 못합니다. Zone.js 더 발전시킬 수 있고 일부 디버깅 문제는 해결될 수 있지만, 여기서 핵심은 Angular의 로드맵입니다. Angular 자체 개발Zone.js Signals 반응 원시 요소들이 이제 Angular의 미래 계획에 방해가 되고 있음을 알 수 있습니다. Signals 구조는 탐지 메커니즘 측면에서 매우 유용하고 성능도 우수하며 사용하기 쉽고 강력하지만, Zone.js 더 이상 필요하지 않으며, 하룻밤 사이에 버릴 수 있는 라이브러리는 아닙니다.
Angular가 꿈을 제한하려는 것이 아니라, 중간 프로세스를 최대한 제거하여 더 유연하고 신뢰할 수 있는 자급자족 프레임워크를 구축하고자 한다는 점을 이해합니다. 우리는 앵귤러가 보다 실용적인 상태로 나아가며 앞으로 다시 상승 추세에 진입할 기회를 잡으려 할 것으로 보고 있습니다. 안타깝게도 현재 StateofJS 설문조사에서는 그런 추세라고 말할 수 없지만, Angular가 모든 혁신에 열려 있다는 점도 알 수 있습니다.
Angular 18에서 Zoneless 모드로 어떻게 전환하나요?
Angular 18에는 구역 프리 모드로 전환해 스펀지를 제거할 수 있는 단계가 포함되어 있습니다. 아래에서 보듯이, 이제 부트스트랩 단계에서 노존 변경 감지 메커니즘을 사용하여 이 경험을 제공할 수 있습니다.
위의 함수를 제공자에 추가하면, npm uninstall zone.js 명령어를 사용해 아래 폴리필 배열에 정의된 zone.js을 angular.json에서 제거할 수 있습니다.
이제 Angular Zoneless를 사용할 수 있겠네요!
Zoneless의 장점은 무엇인가요?
Zoneless는 불필요한 청취 작업을 제거함으로써 애플리케이션에 보다 간소화된 생태계를 제공합니다. 이는 더 빠른 렌더링, 더 높은 성능, 더 빠른 페이지 로드, 더 작은 패키지 크기, 그리고 더 쉬운 디버깅을 의미합니다.
고전적인 테스트를 해보세요. 버튼을 클릭해 카운터를 추가하고, 버튼을 눌렀을 때 그 숫자를 늘리고 싶어 합니다. 이 경우, 각 함수가 트리거될 때 변경된 값이 렌더링되고, 이 값이 HTML에서 변하는 것을 볼 수 있습니다. 이미 함수이고 직접 트리거하기 때문에 여기서 렌더링됩니다. 하지만 외부 요인으로 인해 이 값이 변하고, 우리가 수동으로 트리거하지 않고도 어떤 값이든 변하는 것을 보고 싶으면 어떻게 될까요? Zone.js이 있으면 모든 변경 사항을 지속적으로 듣고 Angular에 저희를 대신해 알림을 보냅니다. 하지만 현재로서는 그런 메커니즘이 없기 때문에, 비동기 작업 후에 변경 감지 메커니즘을 트리거하거나, Signals나 RxJS를 직접 사용해 이 반응성 때문에 변화를 직접 감지해야 합니다.
스펀지의 실종은 사라지는 것은 단지 Zone.js뿐만 아니라 '안락한 영역'이라는 것을 가르쳐 준다.
만약 Zone.js를 원시 자바스크립트와 함께 모듈로 사용하면 다음과 같은 모습이 될 것입니다.
Angular에서는 이런 상황을 다룰 필요가 없습니다; ngZone과 함께라면 이러한 작업들은 이미 탐지 메커니즘과 함께 작동합니다.
예를 들어, 직접 DOM, 이벤트 리스너, 관측 및 커밋먼트, HTTP 요청, 동기 제어 흐름의 경우, 비동기 작업에 대해 변경 감지 메커니즘을 수동으로 트리거해야 합니다.
Signals 또는 R xjs가 자동으로 변경 사항을 감지하기 때문에 변경 감지 메커니즘을 트리거할 필요가 없습니다.
신호 예시:
이제 Zoneless와 Angular 변경 감지 메커니즘을 테스트하는 애플리케이션을 작성해 보고 어떻게 작동하는지 살펴보겠습니다.
위에서 정의한 간격을 표준으로 시작하면 작동이 시작되지만 DOM이 새로고침되지 않고 변경 사항이 반영되지 않습니다. 신호 시작 간격을 사용하면 Angular의 변화 감지 메커니즘을 트리거하지 않고 작동함을 확인할 수 있습니다. 보시다시피, 클릭 이벤트와 신호 간격이 시작되면 Angular는 변화를 감지하고 즉시 표준 간격 변화를 캡처한 후 해제합니다.
변수의 값을 부모 컴포넌트에 보내면, 푸시와 기본 상태에서 다르게 인식된다는 것을 알 수 있습니다.
왼쪽 입력을 묶으면 영역이 없을 때 변화가 반영되고, 마찬가지로 약속 때문에 클릭 후 변화가 반영되는 것을 볼 수 있습니다.
여기서 볼 수 있듯이, 변경 감지 없이 HTTP 호출을 한 후에는 변경 사항이 반영되지 않고, 수동으로 트리거할 때만 반영됩니다. 물론 Signals는 신규 유저를 원하는 화면에 쉽게 반영합니다. 일부 코드는 다음과 같습니다:
app.component.ts
change-detection-demo.component.ts
이 앱은 Stacklibitz에 게시되었으며, 나머지 테스트도 확인하실 수 있습니다. UI에서 코드를 통해 결과를 추적할 수도 있습니다.
스택블리츠:하이퍼링크 로그인이 보입니다.
GitHub:하이퍼링크 로그인이 보입니다.
아래에는 Angular의 변경 감지 메커니즘이 어떻게 작동하는지 보여주는 샘플 애플리케이션도 있으며, 거기서도 시도해 볼 수 있습니다.
하이퍼링크 로그인이 보입니다.
리전 프리 모드로 전환할 때 고려해야 할 사항
이름 그대로 ExperimentalZonelessChangeDetection은 여전히 실험적인 단계임을 주목하는 것이 중요합니다.
테스트를 진행하면서 변경 감지 메커니즘에서 몇 가지 이상한 점을 발견했습니다. 예를 들어, 일부 변경이 수동으로 트리거되지 않으면 DOM에 아무런 변화가 없고 상태도 새로고침되지 않습니다. 하지만 다른 신호나 반응 변수가 변화 감지 메커니즘 밖에서 작동하여 DOM을 새로고침할 때, 이전에 새로고침되지 않은 상태도 새로 고쳐지는 것을 관찰할 수 있습니다.
기존 프로젝트에 이 기능을 구현하고 싶다면, 모든 동작과 애플리케이션 동작을 신중하게 테스트해야 합니다. 특히 서드파티 라이브러리는 Zone.js에 의존할 수 있어 오류나 렌더링 문제를 일으킬 수 있습니다.
원문 언어:하이퍼링크 로그인이 보입니다. |
2024-12-30 11:02:42에 게시됨
|
|
|
|
집주인|
2024-12-30 11:04:13에 게시됨
|
