NgRx 21 발표: 10년 여정을 축하하며 새로운 모습과 @ngrx/signals/events
Source: Dev.to
10 년 기념 🎉
10년 전, NgRx는 Rob Wormald, Mike Ryan, 그리고 Brandon Roberts가 Angular 애플리케이션에 Redux‑스타일 상태 관리를 도입하기 위해 만든 작은 실험으로 시작했습니다. 그 이후로 Angular는 크게 변했으며, 우리의 도구 체인도 크게 변했으며, 애플리케이션을 구축하는 방식도 크게 변했지만— NgRx는 여전히 Angular에서 상태를 관리할 때 많은 사람들이 찾는 대표적인 솔루션입니다.
세월이 흐르면서 NgRx는 @ngrx/store에서 시작해 라우터 통합, 엔티티 헬퍼, 개발자 도구, 컴포넌트 유틸리티, ESLint 규칙, 그리고 최근에는 Signals까지 포함하는 완전한 플랫폼으로 성장했습니다.
Alex Okrushko, Brandon Roberts, Marko Stanimirović, Mike Ryan, Rainer Hahnekamp, Tim Deschryver, 그리고 팀에서 함께해 온 모든 분들, 그리고 수많은 기여자들에게 큰 감사를 전합니다. 또한 이 도구들을 잘 활용하는 방법을 알려준 수많은 콘텐츠 제작자들도 똑같이 중요합니다.
지난 10년 동안 NgRx를 사용해 오셨다면, 여러분도 그 이야기에 함께한 사람입니다. 감사합니다. 🙏
NgRx가 프로덕션‑레디 애플리케이션에 제공하는 가치를 보여주는 주요 수치:
- 483명의 기여자
- 2 250개의 커밋
- 2 400개의 이슈 해결
@ngrx/store has been downloaded 174 070 253 times
@ngrx/signals has been downloaded 14 665 960 times새 웹사이트 🎨
이 이정표를 기념하기 위해 우리는 새로 고친 웹사이트를 출시합니다.
새 사이트는 Analog으로 구축되었으며, 현대적인 디자인과 느낌, 향상된 내비게이션, 그리고 더 나은 성능을 제공합니다. 또한 문서와 예제를 업데이트하여 처음 시작하는 경우든 고급 패턴을 찾는 경우든 필요한 것을 더 쉽게 찾을 수 있도록 하고 있습니다.
새 디자인과 설정을 담당한 Mike Ryan에게, 그리고 콘텐츠 마이그레이션 및 개선 작업을 수행한 Brandon Roberts, Duško Perić, Tim Deschryver에게 큰 감사를 전합니다.
Rainer를 환영합니다 🏆
우리는 Rainer를 NgRx 핵심 팀에 맞이하게 되어 매우 기쁩니다! Rainer는 수년간 NgRx 커뮤니티의 활발한 멤버였으며—컨퍼런스와 밋업에서 강연과 워크숍을 진행하고, 코드, 문서, 그리고 동료 개발자들을 지원하는 데 기여했습니다. Angular와 NgRx에 대한 그의 전문 지식과 열정은 우리 팀에 귀중한 자산이 됩니다. NgRx 가족에 Rainer를 환영해 주세요!
Events 플러그인이 안정화되었습니다 👏
NgRx 19에서 우리는 @ngrx/signals/events를 신호와 Signal Store를 사용하여 Angular 애플리케이션에서 이벤트 기반 워크플로를 모델링하는 실험적인 방법으로 도입했습니다.
여러분의 피드백 덕분에 API가 정리되고 거친 부분이 다듬어졌습니다. 이제 이번 릴리스에서 Events 플러그인을 stable 버전으로 승격시킬 만큼 자신감이 있습니다.
앱에서 Events 플러그인을 어떻게 사용하는지 살펴보고 싶다면 Events 문서를 확인하세요.
범위 지정 이벤트
가장 중요한 추가 기능은 범위 지정 이벤트 지원입니다. 모든 이벤트를 전역으로 브로드캐스트하는 대신, 애플리케이션의 특정 부분—로컬 스코프, 부모 스코프 또는 전역 스코프—에 이벤트를 제한할 수 있습니다. 일반적인 예로는 이벤트가 특정 기능 내에 머물러야 하는 로컬 상태 관리 시나리오나, 각 원격 모듈이 자체 격리된 이벤트 스코프를 필요로 하는 마이크로 프런트엔드 아키텍처가 있습니다.
import { provideDispatcher } from '@ngrx/signals/events';
@Component({
providers: [
// 👇 Provide local `Dispatcher` and `Events` services
// at the `BookSearch` injector level.
provideDispatcher(),
BookSearchStore,
],
})
export class BookSearch {
readonly store = inject(BookSearchStore);
readonly dispatch = injectDispatch(bookSearchEvents);
constructor() {
// 👇 Dispatch event to the local scope.
this.dispatch.opened();
}
changeQuery(query: string): void {
// 👇 Dispatch event to the parent scope.
this.dispatch({ scope: 'parent' }).queryChanged(query);
}
triggerRefresh(): void {
// 👇 Dispatch event to the global scope.
this.dispatch({ scope: 'global' }).refreshTriggered();
}
}범위 지정 이벤트에 대해 더 알아보려면 범위 지정 이벤트 문서를 확인하세요.
signalMethod와 rxMethod가 계산 메서드를 허용합니다
Signal을 제공하는 것 외에도 이제 signalMethod와 rxMethod에 계산 함수를 전달할 수 있습니다. 이 작은 변화는 개발자 경험을 개선하고 Angular의 resource 및 linkedSignal 메서드와 우리 API를 일치시킵니다.
@Component({
/* ... */
})
export class Numbers {
readonly logSum = signalMethod(
({ a, b }) => console.log(a + b)
);
constructor() {
const num1 = signal(1);
const num2 = signal(2);
this.logSum(() => ({ a: num1(), b: num2() }));
// console output: 3
setTimeout(() => num1.set(3), 3_000);
// console output after 3 seconds: 5
}
}특별히 감사합니다 Rainer와 Marko에게 @ngrx/signals에 대한 놀라운 작업에 대해!
NgRx v21 업데이트 🚀
NgRx 21을 사용하려면 다음 최소 버전이 설치되어 있는지 확인하세요:
- Angular 21.x
- Angular CLI 21.x
- TypeScript 5.9.x
- RxJS
^6.5.x또는^7.5.x
NgRx 패키지 업데이트
NgRx는 Angular CLI ng update 명령을 사용하여 NgRx 패키지를 업데이트하는 것을 지원합니다.
패키지를 최신 버전으로 업데이트하려면 다음 명령을 실행하세요:
ng update @ngrx/store@21
ng update @ngrx/signals@21우리 커뮤니티에 큰 감사드립니다! ❤️
NgRx는 커뮤니티 주도 프로젝트이며, 시간과 전문 지식을 기여해 주시는 모든 분들께 진심으로 감사드립니다. 여러분의 버그 리포트, 기능 요청, 문서 개선, 풀 리퀘스트가 이 프로젝트를 활기 있게 만들고 있습니다.
특별 감사 인사
- Duško Perić – 웹사이트 디자인 개선
- Exequiel Ceasar Navarrete, Gabriel Guerrero, Julien Michel, 그리고 Mateusz Stefańczyk – 테스트 스위트를 Vitest로 마이그레이션
- J. Degand – 생활 편의성 개선
스폰서
우리는 또한 스폰서 여러분께 큰 감사를 전하고 싶습니다. 여러분의 재정적 지원은 NgRx의 지속적인 개발 및 유지 관리에 필수적입니다.
- 골드 스폰서: Nx
- 브론즈 스폰서: House of Angular
NgRx의 지속적인 개발을 후원하고 싶으시면, 다양한 후원 옵션을 확인할 수 있는 **GitHub Sponsors 페이지**를 방문하시거나, 다른 후원 기회에 대해 논의하고 싶으시면 직접 연락해 주세요.
다음은?
우리는 NgRx v21로 여러분이 만들게 될 것에 대해 매우 기대하고 있습니다. 새로운 기능을 사용해 보시고 피드백을 공유해 주세요. 특히 새로운 실험적 Events 플러그인에 대한 여러분의 의견을 듣고 싶습니다. 여러분의 생각을 알려주기 위해 **GitHub 저장소**에 이슈와 토론을 열어 주세요.
최신 소식을 받아보려면 다음을 팔로우하세요:
NgRx 커뮤니티의 일원이 되어 주셔서 감사합니다! 즐거운 코딩 되세요!