필터링 연산자
filter, debounceTime, distinctUntilChanged로 스트림을 필터링합니다.
필터링 연산자은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
필터링 연산자의 역할
필터링 연산자는 방출된 값 중 어떤 값을 통과시키고 어떤 값을 제외할지, 또는 값이 얼마나 자주 허용될지를 결정합니다. 깔끔하고 효율적인 스트림을 만드는 데 필수적입니다.
filter
filter는 조건을 통과하는 값만 방출합니다. 시간에 따라 동작하는 Array.filter와 비슷합니다.
import { of, filter } from 'rxjs';
of(1, 2, 3, 4).pipe(
filter(n => n % 2 === 0)
).subscribe(v => console.log(v)); // 2, 4debounceTime
debounceTime은 값의 방출이 멈추기를 기다린 다음 최신 값을 방출합니다. 잡음이 많은 입력 이벤트를 처리하는 대표적인 방법입니다.
import { debounceTime } from 'rxjs';
searchInput$.pipe(
debounceTime(300)
).subscribe(term => console.log('search', term));
// emits only after 300ms of silencedistinctUntilChanged
distinctUntilChanged는 이전 값과 같은 값을 제외하여 불필요한 작업을 방지합니다.
import { of, distinctUntilChanged } from 'rxjs';
of('a', 'a', 'b', 'b', 'a').pipe(
distinctUntilChanged()
).subscribe(v => console.log(v)); // a, b, a검색을 위한 결합
일반적인 검색 파이프라인에서는 요청을 최소화하기 위해 세 가지를 모두 결합합니다.
searchInput$.pipe(
debounceTime(300),
distinctUntilChanged(),
filter(term => term.length > 2),
switchMap(term => this.http.get('/api?q=' + term))
).subscribe(results => console.log(results));take
take(n)은 처음 n개의 값을 방출한 후 스트림을 완료합니다. 계속 실행되는 소스에서 한 번만 값을 읽을 때 유용합니다.
import { interval, take } from 'rxjs';
interval(1000).pipe(
take(3)
).subscribe(v => console.log(v)); // 0, 1, 2 then completefirst와 last
first()는 첫 번째 값(조건에 맞는 값을 선택할 수도 있음)을 방출한 후 완료하고, last()는 완료 시 마지막 값을 방출합니다.
import { of, first, last } from 'rxjs';
of(1, 2, 3).pipe(first()).subscribe(v => console.log(v)); // 1
of(1, 2, 3).pipe(last()).subscribe(v => console.log(v)); // 3takeWhile와 skip
takeWhile은 조건이 충족되는 동안 값을 방출한 후 완료하고, skip(n)은 처음 n개의 값을 무시합니다.
import { of, takeWhile, skip } from 'rxjs';
of(1, 2, 3, 4, 1).pipe(takeWhile(n => n < 3))
.subscribe(v => console.log(v)); // 1, 2
of(1, 2, 3).pipe(skip(1)).subscribe(v => console.log(v)); // 2, 3throttleTime과 debounceTime 비교
throttleTime은 첫 번째 값을 방출한 후 일정 시간 동안 나머지 값을 무시하므로 스크롤 속도 제한에 적합합니다. debounceTime은 조용해질 때까지 기다리므로 검색에 적합합니다. 두 연산자는 서로 같지 않습니다.
키를 사용한 distinctUntilChanged
객체에서는 비교 함수나 키 선택기를 전달하여 관련 필드를 기준으로 같은지 판단하도록 하세요.
source$.pipe(
distinctUntilChanged((a, b) => a.id === b.id)
).subscribe(v => console.log(v));필터링이 중요한 이유
필터링을 사용하면 불필요한 HTTP 호출, 다시 렌더링, 계산을 줄일 수 있습니다. 잘 필터링된 스트림을 사용하면 검색 기능의 요청 횟수를 수십 번에서 몇 번으로 줄일 수 있습니다.
빠른 확인
필터링 연산자에 대한 이해도를 확인해 보세요.
복습: 필터링 연산자
필터링 연산자는 어떤 값이 흐를지와 값의 방출 빈도를 제어합니다.
filter: 조건에 따른 통과 처리debounceTime: 조용해질 때까지 대기distinctUntilChanged: 반복 값 제외take/first/skip: 위치에 따른 제어
다음 주제: 결합 연산자
자주 묻는 질문
“필터링 연산자” 강의는 무료인가요?
네 — “필터링 연산자” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“필터링 연산자”에서 뭘 배우나요?
filter, debounceTime, distinctUntilChanged로 스트림을 필터링합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“필터링 연산자” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.