switchMap과 fromEvent의 조합은 어떻게 사용하나요?

Q1: switchMap과 fromEvent는 무엇인가요?
A1: `fromEvent`는 RxJS에서 DOM 이벤트를 Observable로 변환해주는 함수입니다. 예를 들어 버튼 클릭이나 키보드 입력 이벤트를 Observable 스트림으로 만들 수 있습니다.
`switchMap`은 옵저버블 연산자로, 상위 Observable이 새로운 값을 방출할 때 이전에 구독 중인 내부 Observable을 취소하고 새로 생성한 내부 Observable로 전환합니다.

---

Q2: switchMap과 fromEvent를 함께 사용하면 어떤 상황에 유용한가요?
A2: 사용자가 빠르게 연속된 이벤트를 발생시킬 때 이전 이벤트에 대한 비동기 작업(예: HTTP 요청, 타이머, 검색어 자동완성 등)을 취소하고 마지막 이벤트에 대해서만 작업을 수행하고자 할 때 유용합니다.
예를 들어, 사용자가 검색창에 텍스트를 입력할 때마다 서버에 검색 요청을 보내지만, 이전 요청을 취소하고 마지막 요청만 처리하게 할 때 사용합니다.

---

Q3: switchMap과 fromEvent를 어떻게 조합해서 사용하나요? 기본적인 사용법은?
A3: 아래는 기본 예제입니다.
```typescript
import { fromEvent } from 'rxjs';
import { switchMap, debounceTime, map } from 'rxjs/operators';

const input = document.getElementById('searchInput');

fromEvent(input, 'input').pipe(
debounceTime(300), // 짧은 시간에 여러 이벤트가 발생할 경우 중복 요청 방지
map((event: Event) => (event.target as HTMLInputElement).value),
switchMap(searchTerm => {
// API 호출 함수 (예: ajax.getJSON 등)
return fakeApiRequest(searchTerm);
})
).subscribe(response => {
console.log(response);
});
```
- `fromEvent(input, 'input')`: input 요소의 입력 이벤트를 Observable로 변환
- `debounceTime(300)`: 이벤트가 300ms 동안 추가로 발생하지 않을 때까지 대기
- `map`: 이벤트 객체에서 검색어 문자열 추출
- `switchMap`: 이전 검색어 요청을 취소하고 새로운 검색어로 API 호출을 수행
---

Q4: switchMap과 fromEvent 사용 시 주의점은?
A4:
- 내부 Observable이 완료되지 않고 새로운 값이 들어오면 이전 Observable을 즉시 취소하므로, 취소를 원하지 않는 작업에는 부적합할 수 있습니다.
- 버그 방지를 위해 이벤트에 `debounceTime`이나 `throttleTime` 등을 함께 사용해 이벤트 빈도 조절을 권장합니다.
- fromEvent로 생성된 이벤트 스트림이 필요 없어질 때 반드시 구독 해제하여 메모리 누수를 방지합니다.

---

Q5: 실제 AJAX 요청과 연동한 예시는 어떻게 되나요?
A5: RxJS의 ajax 함수를 활용한 예:
```typescript
import { fromEvent, ajax } from 'rxjs';
import { debounceTime, map, switchMap } from 'rxjs/operators';

const input = document.getElementById('searchInput');

fromEvent(input, 'input').pipe(
debounceTime(300),
map((event: Event) => (event.target as HTMLInputElement).value),
switchMap(query => ajax.getJSON(`https://api.example.com/search?q=${query}`))
).subscribe({
next: data => console.log('검색 결과:', data),
error: err => console.error('검색 오류:', err)
});
```
이 경우, 사용자가 입력시마다 이전 AJAX 요청은 취소되고 최신 입력에 기반한 요청만 수행됩니다.

---

요약:
- `fromEvent`로 이벤트 Observable 생성
- `switchMap`으로 새로운 이벤트 시 이전 비동기 작업 취소 및 전환
- `debounceTime` 등과 결합하면 효율적인 이벤트 처리 가능
- 주로 검색 자동완성, 실시간 필터링 등에 활용됨

switchMap과 fromEvent를 조합하는 방법에 대해 설명드리겠습니다.

이 두 연산자는 RxJS(리액티브 익스텐션 for 자바스크립트)에서 많이 사용하는 연산자입니다.

먼저 각각의 역할을 간단히 살펴보면, - fromEvent : DOM 이벤트나 기타 이벤트 소스를 Observable 스트림으로 변환합니다.

예를 들어, 버튼 클릭, 키보드 입력, 마우스 움직임 같은 이벤트를 Observable로 만들어줍니다.

- switchMap : Observable에서 방출된 값마다 내부 Observable을 생성하고 구독하는데, 새로운 값이 들어오면 이전 내부 Observable의 구독을 취소하고 새로 만든 Observable만 구독합니다.

즉, 최신 값에 대해서만 반응하도록 만듭니다.

--- switchMap과 fromEvent를 조합하는 일반적인 예 예를 들어, 사용자가 텍스트 입력(input box)에 타이핑할 때마다 서버에 검색어를 보내 검색 결과를 가져오는 상황을 가정해보겠습니다.

1. 사용자의 입력 이벤트를 `fromEvent`로 감지해서 Observable로 만듭니다.



2. 입력된 이벤트 객체에서 텍스트값을 추출합니다.



3. 해당 텍스트값을 가지고 서버 요청 Observable을 만들어 `switchMap`으로 처리합니다.



4. 새로운 검색어가 입력되면 이전 요청은 취소하고 가장 최신 요청에 대해서만 결과를 기다립니다.

이러한 동작은 불필요한 네트워크 요청을 막고, 항상 최신 상태를 반영하는 데 유용합니다.

--- 코드 예시 ```typescript import { fromEvent, of } from 'rxjs'; import { debounceTime, map, switchMap, catchError } from 'rxjs/operators'; // 예를 들어 input 요소가 있다고 가정 const inputElement = document.getElementById('searchInput') as HTMLInputElement; // fromEvent로 keyup 이벤트를 Observable로 변환 const input$ = fromEvent(inputElement, 'keyup'); input$.pipe( // 이벤트가 너무 빈번하게 발생하지 않도록 300ms 딜레이 (optional) debounceTime(300), // 이벤트 객체에서 입력된 텍스트 값을 추출 map(event => (event.target as HTMLInputElement).value), // switchMap으로 입력값마다 새로운 검색 요청 Observable 생성 switchMap(searchTerm => { if (searchTerm.trim() === '') { // 빈 문자열이면 빈 결과 반환 return of([]); } // 여기서 검색어를 사용해 서버에 요청 예시 (가정) return fetchSearchResults(searchTerm).pipe( catchError(err => { console.error(err); return of([]); // 에러 발생 시 빈 배열 반환하여 계속 스트림 유지 }) ); }) ).subscribe(results => { // 검색 결과 처리 및 UI 업데이트 console.log(results); }); // fetchSearchResults는 실제 서버 요청을 Observable로 감싸 반환하는 함수 예시 function fetchSearchResults(query: string) { return new Observable(observer => { fetch(`https://api.example.com/search?q=${encodeURIComponent(query)}`) .then(response => response.json()) .then(data => { observer.next(data.results); observer.complete(); }) .catch(err => observer.error(err)); }); } ``` --- 요약 - `fromEvent`는 DOM 이벤트를 Observable로 만들어줍니다.

- `switchMap`은 새로운 이벤트가 발생하면 이전 내부 옵저버블(예: 비동기 요청)을 취소하고 최신 이벤트만 남기도록 합니다.

- 두 연산자를 조합하면 사용자가 입력하는 순서대로 요청이 발생하지 않는 문제, 네트워크 낭비를 방지하는 효과를 볼 수 있습니다.

- 보통 검색어 자동완성, 실시간 필터링 같은 곳에서 많이 사용됩니다.

필요에 따라 `debounceTime` 등을 추가해 빈번한 이벤트 발행을 제어하는 것도 좋은 방법입니다.