🅰️ Angular에서 실시간 데이터 스트림 처리 및 UI 반응형 구현

// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable, interval, of, Subject } from 'rxjs';
import { map, filter, switchMap, catchError, tap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'realtime-data-app';
  dataStream$: Observable<any>;
  filteredData: any[] = [];
  errorMessage: string | null = null;

  constructor() {}

  ngOnInit(): void {
    // 실시간 데이터 스트림을 시뮬레이션 (예: 매 초 새로운 데이터 전송)
    this.dataStream$ = interval(1000).pipe(
      map(i => ({
        id: i,
        value: Math.floor(Math.random() * 100) + 1,
        timestamp: new Date().toISOString()
      })),
      tap(data => console.log('Received data:', data))
    );

    // 사용자 입력에 따라 필터링 로직 추가 (예: 특정 값 이상인 데이터만 표시)
    const filterSubject = new Subject<number>();
    this.dataStream$ = this.dataStream$.pipe(
      switchMap(data => 
        data.value >= filterSubject.getValue() ? of(data) : of(null)
      ),
      filter(data => data !== null),
      catchError(error => {
        console.error('Error fetching data:', error);
        return of({ error: '데이터를 불러오는 중 오류가 발생했습니다.' });
      })
    );

    // 사용자 입력 처리 (예: 필터링 값 설정)
    this.dataStream$.subscribe(data => {
      if (data.error) {
        this.errorMessage = data.error;
        this.filteredData = [];
      } else {
        this.filteredData.push(data);
        this.errorMessage = null;
      }
    });
  }

  applyFilter(value: number): void {
    filterSubject.next(value);
  }
}

// src/app/app.component.html
<div>
  <h2>실시간 데이터 스트림 예제</h2>
  <p>{{ title }}</p>
  <div>
    <label for="filter">필터링 값 (값 이상인 데이터만 표시): </label>
    <input type="number" id="filter" [(ngModel)]="filterValue" name="filter">
    <button (click)="applyFilter(filterValue)">필터 적용</button>
  </div>
  <div *ngIf="errorMessage">
    <p style="color: red">{{ errorMessage }}</p>
  </div>
  <ul>
    <li *ngFor="let item of filteredData">
      {{ item.id }} - {{ item.value }} ({{ item.timestamp }})
    </li>
  </ul>
</div>

// src/app/app.component.css
/* 기본 스타일 */
body {
  font-family: Arial, sans-serif;
}

input[type="number"] {
  padding: 8px;
  margin-right: 10px;
}

button {
  padding: 8px 16px;
  cursor: pointer;
}