switchMap을 사용하여 폰트와 이미지 로딩을 처리하는 방법은?

Q1: switchMap이란 무엇인가요?
A1: switchMap은 RxJS 연산자 중 하나로, 소스 Observable에서 발생한 이벤트를 받아 새로운 Observable을 생성하고, 이전에 생성된 Observable이 완료되지 않았으면 취소(switch)한 뒤 가장 최근 Observable 결과만 구독합니다. 주로 비동기 작업(cancelling 이전 요청)이 필요할 때 사용됩니다.

---

Q2: 폰트와 이미지 로딩에 switchMap을 왜 사용하나요?
A2: 폰트나 이미지를 동적으로 로딩할 때 연속적으로 로딩 요청이 들어올 수 있습니다. 이때 이전 로딩 작업이 완료되지 않았더라도 새로운 요청이 오면 바로 취소하고 최신 요청만 처리해야 효율적입니다. switchMap은 이런 상황에 적합해 중복 요청을 방지하고 최신 결과만 처리합니다.

---

Q3: switchMap으로 폰트를 로딩하는 기본적인 예제는?
A3: 예를 들어 사용자가 폰트 이름을 입력할 때마다 폰트 파일을 비동기로 불러온다고 가정합니다.

```typescript
import { fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

function loadFont(fontName: string): Promise {
return new Promise((resolve, reject) => {
const font = new FontFace(fontName, `url(/fonts/${fontName}.woff2)`);
font.load().then(() => {
(document as any).fonts.add(font);
resolve();
}).catch(reject);
});
}

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

fromEvent(input, 'input').pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap((event: any) => loadFont(event.target.value))
).subscribe({
next: () => console.log('Font loaded'),
error: err => console.error('Font load failed', err)
});
```

---

Q4: switchMap으로 이미지를 로딩하는 방법은?
A4: 이미지를 비동기로 로드할 때 Image 객체를 생성하고, 로딩이 끝나면 Observable로 알립니다.

```typescript
import { fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';

function loadImage(src: string) {
return new Observable(observer => {
const img = new Image();
img.src = src;
img.onload = () => {
observer.next(img);
observer.complete();
};
img.onerror = err => observer.error(err);

// 취소 시 onload/ error 무시
return () => {
img.onload = null;
img.onerror = null;
};
});
}

const srcObservable = ...; // 이미지 src를 발행하는 Observable

srcObservable.pipe(
switchMap(src => loadImage(src))
).subscribe({
next: img => document.body.appendChild(img),
error: err => console.error('Image load error', err)
});
```

---

Q5: switchMap 사용 시 주의할 점은?
A5:
- switchMap은 이전 Observable을 취소하므로, 로딩 완료 시점에 최신 요청이 아니면 결과가 무시됩니다.
- 폰트나 이미지 로딩 실패 시 에러를 잘 처리해야 전체 스트림이 중단되지 않습니다.
- 비동기 로딩 함수(loadFont, loadImage)는 반드시 취소(cleanup) 가능한 구조가 좋습니다.

---

Q6: 결론적으로 switchMap을 통한 폰트와 이미지 로딩 장점은?
A6: 최신 요청만 처리하여 불필요한 로딩 자원 낭비를 막고, 사용자 경험을 개선하며, 코드가 간결하고 관리하기 쉬워집니다. 특히 입력 기반 실시간 로딩 시 매우 유용합니다.

switchMap을 사용한 페이지네이션 구현 방법은?

switchMap을 사용하여 CSS 애니메이션을 처리하는 방법은?

switchMap은 RxJS에서 사용하는 고차 연산자 중 하나로, 이전에 실행 중인 Observable을 취소하고 가장 최신의 Observable만 구독하도록 하는 특징이 있습니다.

이를 폰트와 이미지 로딩에 적용하면, 사용자가 폰트나 이미지를 변경할 때 이전 로딩 작업을 중단하고 최신 요청만 처리하게 만들어 효율적으로 리소스를 관리할 수 있습니다.

switchMap을 활용한 폰트 및 이미지 로딩 처리 과정 1. 상황 설정 예를 들어, 사용자가 UI에서 폰트나 이미지를 선택하는 인터페이스가 있고, 선택이 바뀔 때마다 해당 리소스를 서버에서 불러오는 비동기 작업이 있다고 가정합니다.

이때 사용자가 빠르게 여러 번 선택을 변경하면 이전에 시작됐던 로딩 작업들이 불필요하게 계속 실행될 수 있습니다.



2. Observable 스트림 생성 폰트 또는 이미지 선택 이벤트(예: 클릭, 드롭다운 변경 등)를 RxJS Observable로 만듭니다.

이 Observable은 선택이 바뀔 때마다 새로운 값(예: 폰트명, 이미지 URL 등)을 방출합니다.



3. switchMap으로 비동기 로딩 처리 - 폰트/이미지 선택 Observable에 `switchMap` 연산자를 사용해, 선택값에 따라 폰트나 이미지를 불러오는 Observable을 반환합니다.

- 이렇게 하면 새로운 선택값이 들어올 때마다 이전 로딩 Observable은 자동으로 구독 취소되어 리소스 낭비가 방지됩니다.



4. 폰트 로딩 예시 ```typescript import { fromEvent } from 'rxjs'; import { switchMap, debounceTime } from 'rxjs/operators'; const fontSelect$ = fromEvent(fontSelectElement, 'change') .pipe( debounceTime(300), // 빠른 연속선택을 최소화 switchMap(event => { const fontName = event.target.value; return loadFontObservable(fontName); // 폰트 로딩을 Observable로 구현 }) ); fontSelect$.subscribe({ next: font => { document.body.style.fontFamily = font.family; console.log(`${font.family} loaded`); }, error: err => console.error('Font loading error:', err) }); ``` `loadFontObservable` 함수는 폰트 파일을 비동기적으로 로드하는 로직을 감싸서 Observable로 반환하는 함수입니다.



5. 이미지 로딩 예시 ```typescript const imageSelect$ = fromEvent(imageSelectElement, 'change') .pipe( switchMap(event => { const imageUrl = event.target.value; return loadImageObservable(imageUrl); // 이미지 로딩을 Observable로 구현 }) ); imageSelect$.subscribe({ next: imageElement => { imgContainer.innerHTML = ''; // 기존 이미지 제거 imgContainer.appendChild(imageElement); console.log('Image loaded'); }, error: err => console.error('Image loading error:', err) }); ``` `loadImageObservable`은 이미지 로딩 완료 시점에 완료를 알리는 Observable로 구현합니다.

장점 요약 - 최신 요청 우선 처리 사용자가 폰트나 이미지를 빠르게 변경해도, 가장 최신 선택값에 대응하는 리소스만 로딩되고, 이전 리소스 로딩은 취소됩니다.

- 리소스 낭비 최소화 불필요한 폰트나 이미지 요청을 줄입니다.

- 완성도 높은 사용자 경험 제공 불필요한 렌더링 중복을 피해 UI가 더 부드럽고 빠르게 반응합니다.

--- 즉, switchMap은 폰트 및 이미지와 같이 사용자가 자주 바꾸는 리소스의 비동기 로딩 시, 중복되고 오래 걸리는 로딩 작업을 관리하고 취소하는 데 매우 적합한 도구입니다.

Observable 스트림으로 UI 이벤트를 만들고, 이 이벤트 스트림을 switchMap으로 변환해 최신 리소스만 불러오도록 처리하는 패턴을 활용하는 것이 핵심입니다.