rxjs-patterns-for-angular
Angular에서 RxJS 패턴 적용
Angular 개발자들은 복잡한 반응형 프로그래밍 패턴과 부적절한 구독 관리로 인한 메모리 누수에 어려움을 겪습니다. 이 기술은 RxJS 연산자, Angular Signals 통합, takeUntilDestroyed()를 사용한 적절한 클린업을 위한 즉시 사용 가능한 코드 예제와 모범 사례를 제공합니다.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「rxjs-patterns-for-angular」を使用しています。 How do I use switchMap for a search input with debounce?
期待される結果:
- switchMap를 사용하여 검색 쿼리가 변경될 때 이전 요청 취소
- debounceTime과 결합하여 사용자가 입력 멈출 때까지 대기
- 예제 패턴: query$.pipe(debounceTime(300), switchMap(query => searchService.search(query)))
- 이렇게 하면 최신 쿼리만 요청을 트리거함
「rxjs-patterns-for-angular」を使用しています。 What is takeUntilDestroyed and how do I use it?
期待される結果:
- takeUntilDestroyed()은 자동 구독 클린업을 위한 Angular RxJS 인터롭 연산자
- 컴포넌트 또는 디렉티브가 파괴될 때 자동으로 구독 해제
- @angular/core/rxjs-interop에서 가져와 DestroyRef와 함께 사용
- 예제: interval(1000).pipe(takeUntilDestroyed(this.destroyRef)).subscribe()
セキュリティ監査
安全This is a pure documentation skill containing only markdown content with TypeScript code examples. The static analyzer flagged 130 pattern matches as potential security issues, but ALL are false positives. The skill-report.json already correctly assessed this as 'safe' with no risk factors. No executable code, no file system access, no network calls, and no external command execution exist in this skill.
リスク要因
🌐 ネットワークアクセス (14)
📁 ファイルシステムへのアクセス (1)
⚙️ 外部コマンド (66)
品質スコア
作れるもの
현대적 RxJS 패턴 학습
Angular Signals 통합과 함께 switchMap, combineLatest 및 기타 RxJS 연산자에 대한 코드 예제 얻기
메모리 누수 수정
Angular 컴포넌트에서 메모리 누수를 방지하기 위해 takeUntilDestroyed()를 사용한 적절한 구독 클린업 학습
비동기 데이터 흐름 처리
Angular 애플리케이션에서 오류 처리, 재시도 로직 및 실시간 데이터 패턴 구현
これらのプロンプトを試す
Angular에서 검색 입력에 debounceTime과 함께 switchMap을 사용하는 방법을 보여주세요
Angular에서 toSignal()을 사용하여 HTTP Observable을 Signal로 어떻게 변환하나요
Angular 17+에서 RxJS 구독을 정리하는 현대적인 방법은 무엇인가요
Angular RxJS에서 HTTP 요청에 대해 catchError와 함께 재시도 로직을 어떻게 구현하나요
ベストプラクティス
- Angular 컴포넌트에서 항상 takeUntilDestroyed()를 사용하여 구독 클린업
- 템플릿 데이터 바인딩에 수동 구독보다 toSignal() 선호
- 사용자 트리거 요청에는 이전 API 호출을 취소하기 위해 switchMap 사용
回避
- 중첩된 구독 피하기 - 대신 switchMap 같은 연산자 사용
- 구독 해제 잊지 마세요 - 메모리 누수 발생
- AsyncPipe와 Signals 혼합 피하기 - 하나의 접근 방식 선택