Angular Addicts # 테스트에서 페이지 개체 모델을 사용하는 NgRx, Vite 등을 사용하는 Micro Frontends

?안녕하세요 각도 중독자 여러분

이것은 내 관심을 끌었던 엄선된 Angular 리소스를 월간 컬렉션으로 모아놓은 Angular Addicts 뉴스레터 33호입니다. (여기서 32호, 31호, 30호)

? 출시 발표

? NgRx 19 발표: NgRx 신호 기능, 동작 신호 등!

Brandon Roberts는 NgRx의 최신 버전과 몇 가지 새로운 기능을 발표합니다.

• SignalStore는 생성 중에 SignalStore에서 정적 속성이나 관찰 가능 항목을 정의하는 withProps 기능을 도입합니다.
• 새로운 signalMethod 유틸리티 기능은 사용 가능한 신호만 사용할 수 있는 기능으로 rxMethod의 이점을 제공합니다.
• 개발 모드에서는 개발 중에 상태 불변성을 보장하는 patchState 함수를 확인합니다.
• NgRx Store는 이제 신호 변경에 대한 작업 전달을 지원합니다.

?2024년 12월의 Angular Gems

? 나의 새로운 각도 코딩 스타일

Kevin Kreuzer는 최근 Signals와 새로운 Angular API를 사용하여 대규모 코드베이스를 다시 작성했습니다. 이 기사에서 그는 리팩토링 중에 등장한 새로운 코딩 스타일과 패턴을 설명합니다. 핵심 사항에는 독립형 구성 요소를 표준으로 채택하고, 반응성을 위해 신호를 사용하도록 전환하고, 기존 수명 주기 후크에서 벗어나는 것이 포함됩니다.

? NGRX 신호 저장소와 함께 Angular의 리소스 API 사용

Manfred Steyer는 Resource API와 함께 SignalStore의 withProps 기능을 사용하는 방법을 보여줍니다. 그의 가이드에는 linkedSignal 및 signalMethod를 사용하여 템플릿 기반 양식을 연결하는 것도 포함되어 있습니다.

? Angular 애플리케이션에서 페이지 개체 모델 디자인 패턴 사용

Francesco Borzì의 기사에서는 Angular 애플리케이션의 페이지 개체 모델(POM) 디자인 패턴 구현에 대해 설명합니다. POM을 사용하면 테스트가 "무엇"을 수행해야 하는지에 초점을 맞추고 페이지 개체는 DOM과의 상호 작용이 "어떻게" 수행되는지 처리하여 더 깔끔하고 유지 관리하기 쉬운 테스트 코드를 만들 수 있습니다. Francesco는 또한 Angular 구성요소 테스트에서 POM 사용을 용이하게 하고 다양한 테스트 프레임워크와 호환되도록 설계된 새로운 라이브러리인 ngx-page-object-model을 소개합니다.

? Vite를 사용하여 15분 만에 마이크로 프런트엔드 아키텍처를 설정하세요!

Meidi Airouche는 자신의 기사에서 Vite를 사용하여 Vue.js, Angular 및 React 구성 요소를 모듈식 뉴스 포털에 통합하는 마이크로 프런트엔드 아키텍처를 만드는 방법을 간략하게 설명합니다. 이 프로젝트는 다음을 결합합니다:

• 탐색용 Vue.js 헤더
• React 최신 기사 동향 섹션
• 인기 콘텐츠를 위한 각도 하이라이트 영역

? Angular에서 컴포넌트 통신 마스터하기

Michał Grzegorczyk는 Angular 애플리케이션의 구성 요소 간 통신을 촉진하는 다양한 방법에 대한 포괄적인 개요를 제공합니다. 다루는 주요 주제는 다음과 같습니다.

• 입력, 출력, Setter 및 ngOnChanges 수명 주기 후크
• @주사 서비스
• 컴포넌트/지시 삽입
• 템플릿 변수(#)
• 콘텐츠 프로젝션(@ContentChild / contentChild() / @ContentChildren / contentChildren())
• 목록 보기 및 쿼리(@ViewChild / viewChild() / @ViewChildren / viewChildren())
• 라우팅(매개변수, 쿼리, withComponentInputBinding(), 상태 객체)

?‍?작가 소개

제 이름은 Gergely Szerovay입니다. 저는 수년간 데이터 과학자 및 풀스택 개발자로 일했으며, Angular 기반 프런트엔드 개발에 중점을 두고 프런트엔드 기술 리드로 일하고 있습니다. 내 역할의 일환으로 나는 Angular와 프론트엔드 개발 환경 전반이 어떻게 발전하고 있는지 지속적으로 관찰하고 있습니다. 내 지식을 공유하기 위해 2022년부터 Angular Addicts 월간 뉴스레터 및 출판을 시작하여 매달 접하는 최고의 리소스를 여러분에게 보낼 수 있습니다. 당신이 노련한 Angular 중독자이든 초보자이든 상관없이 제가 도와드리겠습니다. 작가로 포함되기를 원하는지 알려주세요. 함께 Angular를 배워볼까요? 여기서 구독하시겠습니까?

Angular는 지난 몇 년 동안 매우 빠르게 발전했으며, 지난 1년 동안 생성 AI의 등장으로 우리의 소프트웨어 개발 워크플로도 빠르게 발전했습니다. AI 지원 소프트웨어 개발의 발전을 면밀히 따르기 위해 저는 AI 도구를 공개적으로 구축하기 시작하고 진행 상황을 AIBoosted.dev에 게시하기로 결정했습니다. 이 학습 여정에 동참하세요. 여기에서 구독하세요.

Substack(Angular Addicts), Substack(AIBoosted.dev), Medium, Dev.to, Twitter 또는 LinkedIn에서 나를 팔로우하여 Angular에 대한 자세한 내용과 AI, Typescript, React 및 Angular를 사용하여 AI 앱을 구축하는 방법을 알아보세요!

?️이전 문제

이전 뉴스레터를 놓치셨다면 여기에서 읽어보실 수 있습니다. 최신 3개 호는 다음과 같습니다.

• Angular 중독자 #32: Angular 19, 새로운 스타일 가이드 RFC 등
• Angular Addicts #31: 새로운 리소스 API, 효과 업데이트 등
• Angular 중독자 #30: 효과, Angular DI 기능, 캐싱 요청 등을 사용해야 하는 경우

? Angular 리소스 제출

최근에 흥미로운 Angular 관련 기사, 트윗 또는 기타 리소스를 찾거나 작성한 적이 있나요? 여기 댓글로 알려주시거나 트위터로 DM을 보내주세요! 다음 Angular Addicts 호에 소개할 수도 있습니다!

위 내용은 Angular Addicts # 테스트에서 페이지 개체 모델을 사용하는 NgRx, Vite 등을 사용하는 Micro Frontends의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!