수정하기 - switchMap을 활용한 Ajax 요청 예시는 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

switchMap을 활용한 Ajax 요청 예시는 RxJS 라이브러리를 사용할 때 자주 등장합니다. switchMap은 내부적으로 Observable을 받아 새로운 Observable로 변환해 주는 연산자인데, 특히 Ajax 요청과 같이 비동기 작업에서 이전 요청이 아직 완료되지 않았을 때 새로운 요청이 들어오면 이전 요청을 취소하고 최신 요청 결과만 받아야 할 때 유용합니다.    예를 들어, 사용자가 텍스트 입력창에 검색어를 입력할 때마다 서버에 Ajax 요청을 보내 검색 결과를 받아오는 상황을 가정합시다. 사용자가 빠르게 여러 글자를 입력한다면, 이전에 보낸 요청들이 순서대로 응답이 오지 않고 늦게 올 수도 있어 최신 입력에 맞는 결과만 보여주고자 할 때 switchMap이 적합합니다.    아래는 간단한 Angular나 RxJS 환경에서 switchMap과 Ajax 요청을 사용하는 예시입니다.    ```typescript  import { fromEvent } from 'rxjs';  import { debounceTime, map, switchMap } from 'rxjs/operators';  import { ajax } from 'rxjs/ajax';    // 예: input <a href='https://sangseek.com/sangseeks/엘리/ko'>엘리</a>먼트에서 사용자 입력을 관찰  const input = document.getElementById('search-input');    const search$ = fromEvent(input, 'input').pipe(    // 사용자가 입력하고 멈출 때까지 300ms 대기    debounceTime(300),    // 이벤트 객체에서 입력 값 가져오기    map((event: Event) => (event.target as HTMLInputElement).value),    // 입력값을 기준으로 Ajax 요청 보내기, 이전 요청 취소    switchMap(searchTerm =>      ajax.getJSON(`https://api.example.com/search?q=${encodeURIComponent(searchTerm)}`)    )  );    // 결과 구독  search$.subscribe({    next: result => {      console.log('검색 결과:', result);      // UI에 결과 표시하는 로직 작성 가능    },    error: err => {      console.error('에러 발생:', err);    }  });  ```    이 코드 흐름을 정리하면 다음과 같습니다.    1. 사용자의 input 이벤트를 감지합니다.  2. debounceTime(300)를 걸어 사용자가 연속해서 입력할 때 300ms 동안 멈출 때까지 기다립니다. 이걸 통해 불필요한 요청을 줄입니다.  3. map을 통해 이벤트 객체에서 검색어 문자열을 추출합니다.  4. switchMap으로 Ajax 요청을 보냅니다. 만약 새로운 검색어가 들어오면 이전 Ajax 요청은 내부적으로 취소됩니다.  5. 구독자를 통해 서버에서 받은 JSON 결과를 처리합니다.    이런 방식을 쓰면 빠른 입력 변화에도 서버 부담을 줄이고 항상 최신 검색 결과만 보여줄 수 있어서 사용자 경험이 좋아집니다. 이게 바로 switchMap이 Ajax 요청 처리에 많이 쓰이는 주요 이유입니다.