상식닷컴
로그인
가입하기
2026년 상식닷컴 선정 식당 & 카페 리스트
2025년 2026년 신상 호텔 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요
일주일 식단표 어플
자동 일주일 식단표 어플
안드로이드
아이폰
주식 & 코인 차트의 신
1000만원으로 2000만원 만들기 프로젝트
궁금한 상식 보기
트라우마와 관련된 심리적 치료의 효과를 평가하는 방법은 무엇인가요?
허리디스크와 관련된 자세 교정의 중요성은 무엇인가요?
베이킹소다의 pH는 얼마인가요?
허리디스크와 관련된 통증 완화에 도움이 되는 심리적 기법은 어떤 것이 있나요?
베이킹소다를 사용하여 집안의 먼지를 줄이는 방법은 무엇인가요?
베이킹소다를 사용한 천연 방향제의 효과는 무엇인가요?
과탄산소다를 사용한 식품 안전성은 어떤가요?
과탄산소다를 사용한 세탁물의 세척 후 세탁기 물빠짐 문제 해결 방법은 무엇인가요?
SNI가 필요한 이유는 무엇인가요?
SNI와 웹사이트의 콘텐츠 관리 시스템(CMS)의 관계는 무엇인가요?
백링크의 앵커 텍스트는 어떻게 설정해야 하나요?
이베이에서 '구매자와의 분쟁'을 예방하는 방법은?
Previous
Next
수정하기 - switchMap을 활용한 검색 기능 구현 방법은?
닉네임
비밀번호
제목
내용
[이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]
switchMap을 활용한 검색 기능 구현 방법에 대해 자세히 설명드리겠습니다. --- 1. 개요 검색 기능 구현 시 사용자가 입력할 때마다 서버에 검색 요청을 보내는 경우가 많습니다. 하지만 사용자가 빠르게 타이핑할 경우 이전 요청이 아직 완료되지 않았을 수 있습니다. 이때 switchMap 연산자를 사용하면 이전 요청을 자동으로 취소하고 마지막 입력에 대한 요청만 처리하여 효율적이고 사용자 경험이 좋은 검색 기능을 구현할 수 있습니다. --- 2. 기본 원리 - switchMap 은 내부 Observable을 구독하다가 새로운 Observable이 발행되면 이전 Observable 구독을 자동으로 해지(취소)합니다. - 즉, 검색어가 변경되면 이전 검색 요청은 취소되고 마지막 입력값에 따른 검색 요청만 서버에 전달하여 처리합니다. --- 3. 구현 흐름 1. 사용자 입력 이벤트 스트림 생성 예를 들어 Angular에서 `<input>` 박스의 `keyup` 이벤트, 또는 React에서 입력값 변경 이벤트에서 Observable 스트림을 만듭니다. 2. 입력값 처리 입력값이 너무 짧거나 불필요한 중복 요청을 막기 위해 `filter`나 `debounceTime` 연산자를 통해 최소한의 입력만 서버에 보내도록 조절합니다. 3. switchMap으로 검색 요청 매핑 입력된 텍스트가 변할 때마다 새로운 HTTP 요청 Observable로 `switchMap`을 매핑합니다. 이전 검색 요청이 진행 중이면 자동으로 취소됩니다. 4. 결과 구독 및 UI 업데이트 서버에서 결과가 오면 구독을 통해 결과를 받아 UI에 렌더링합니다. --- 4. 예제 코드 (RxJS + Angular 스타일) ```typescript import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; import { debounceTime, distinctUntilChanged, filter, switchMap } from 'rxjs/operators'; import { HttpClient } from '@angular/common/http'; <a href='https://sangseek.com/sangseeks/@Component/ko'>@Component</a>({ selector: 'app-search', template: ` <input [formControl]="searchControl" placeholder="검색어 입력"> <ul> <li *ngFor="let item of results">{{item.name}}</li> </ul> ` }) export class SearchComponent implements OnInit { searchControl = new FormControl(''); results: any[] = []; constructor(private http: HttpClient) {} ngOnInit() { this.searchControl.valueChanges.pipe( debounceTime(300), // 300ms 지연, 연속 입력 방지 filter(term => term.length >= 2), // 최소 2글자부터 검색 distinctUntilChanged(), // 중복 입력 무시 switchMap(term => this.search(term)) // 새로운 검색어가 입력되면 이전 요청 취소하고 새 요청 실행 ).subscribe(results => { this.results = results; }); } search(term: string) { // HTTP GET 요청 반환 (예: /api/search?q=term) return this.http.get<any[]>(`/api/search?q=${term}`); } } ``` --- 5. 장점 - 이전 요청 취소 : 사용자가 검색어를 빠르게 입력할 때 오래된 검색 요청이 취소되고 마지막 요청만 처리되어 불필요한 네트워크 낭비 감소 - 부드러운 사용자 경험 : 응답 결과가 뒤섞이지 않고 최신 입력값에 대한 검색 결과만 화면에 보여짐 - 간결한 코드 : RxJS 연산자를 조합하여 간단하고 명확한 흐름 제어 가능 --- 6. 요약 - `switchMap`은 검색어 입력 스트림을 HTTP 요청 스트림으로 전환할 때 사용. - 새로운 검색어 입력이 들어오면 이전 검색 결과 요청을 자동 취소하여 최신 결과만 처리. - `debounceTime`, `filter`, `distinctUntilChanged`와 함께 사용하면 더욱 최적화된 검색 기능 구현 가능. --- 이처럼 `switchMap`을 활용하면 실시간 검색 기능 구현 시 매우 효과적이고 사용자 친화적인 결과를 만들 수 있습니다.
이용안내
커뮤니티 이용안내
×
- 게시한 게시글로 발생하는 문제는 게시자에게 책임이 있습니다.
- 게시글이 타인/타업체의 저작권을 침해할 경우 모든 책임은 게시자에게 있습니다. 게시자가 모든 손해를 부담해야 합니다.
- 상식닷컴 운영자는 게시자와 상의하지 않고 게시글을 수정 또는 삭제할 수 있습니다.
- 상식닷컴 운영자는 깨끗한 커뮤니티 공간을 만드는 것이 1순위입니다.
수정하기
취소하기