결합 연산자
combineLatest와 forkJoin으로 스트림을 결합합니다.
결합 연산자은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
스트림을 결합하는 이유
실제 앱에서는 여러 비동기 소스를 조정해야 합니다. 여러 HTTP 호출, 폼 값과 필터, 클릭 이벤트와 최신 상태를 함께 처리하는 경우가 그 예입니다. 결합 연산자는 여러 옵저버블을 하나로 합칩니다.
combineLatest
combineLatest는 모든 소스가 최소 한 번씩 값을 방출한 후, 어떤 소스든 값을 방출할 때마다 각 소스의 최신 값을 배열로 방출합니다.
import { combineLatest } from 'rxjs';
combineLatest([name$, age$]).subscribe(
([name, age]) => console.log(name, age)
);
// re-emits whenever name$ OR age$ changescombineLatest 사용 사례
검색어와 카테고리 필터를 결합하여 쿼리를 만드는 등, 파생된 UI 상태를 처리할 때 유용합니다.
combineLatest([term$, category$]).pipe(
switchMap(([term, cat]) =>
this.http.get('/api?q=' + term + '&cat=' + cat))
).subscribe(results => console.log(results));forkJoin
forkJoin은 모든 소스가 완료될 때까지 기다린 다음 각 소스의 마지막 값을 하나의 배열로 방출합니다. RxJS에서 Promise.all에 해당하는 연산자입니다.
import { forkJoin } from 'rxjs';
forkJoin({
user: this.http.get('/api/user'),
posts: this.http.get('/api/posts')
}).subscribe(({ user, posts }) => {
console.log(user, posts);
});forkJoin의 주의점
소스 중 하나라도 완료되지 않거나(예: interval), 완료되기 전에 오류가 발생하면 forkJoin은 아무것도 방출하지 않습니다. HTTP 요청처럼 유한한 소스에 사용하세요.
merge
merge는 여러 옵저버블을 하나로 평탄화하고, 짝을 맞추지 않은 채 어느 소스에서든 값이 도착하는 순서대로 방출합니다.
import { merge } from 'rxjs';
merge(clicks$, keypresses$).subscribe(
event => console.log('event', event)
);
// emits whenever either source emitszip
zip은 인덱스별로 값을 짝지어 첫 번째 값끼리, 두 번째 값끼리 차례로 방출합니다. 다음 값을 만들기 위해 모든 소스가 값을 방출할 때까지 기다립니다.
import { zip, of } from 'rxjs';
zip(of(1, 2, 3), of('a', 'b', 'c'))
.subscribe(([n, l]) => console.log(n, l));
// [1,a], [2,b], [3,c]startWith
startWith는 초기 값을 앞에 추가합니다. 모든 소스가 값을 방출하기 전에도 combineLatest가 값을 방출하도록 할 때 유용합니다.
import { startWith } from 'rxjs';
combineLatest([
term$.pipe(startWith('')),
category$.pipe(startWith('all'))
]).subscribe(([t, c]) => console.log(t, c));withLatestFrom
withLatestFrom은 소스가 값을 방출할 때만 동작하며, 다른 옵저버블의 최신 값을 함께 전달합니다. 소스가 동작을 주도하고 다른 옵저버블은 수동적으로 참여합니다.
import { withLatestFrom } from 'rxjs';
saveClick$.pipe(
withLatestFrom(formValue$)
).subscribe(([_, form]) => this.save(form));순차 스트림을 위한 concat
concat은 각 소스를 순서대로 구독하고 현재 소스가 완료된 후에만 다음 소스로 넘어갑니다. 스트림을 반드시 하나씩 차례로 실행해야 할 때 사용하세요.
import { concat, of } from 'rxjs';
concat(of(1, 2), of(3, 4))
.subscribe(v => console.log(v));
// 1, 2, 3, 4 (second starts after first completes)combineLatest, forkJoin, zip 비교
combineLatest: 어떤 소스든 값을 방출할 때 각 소스의 최신 값을 사용합니다.
forkJoin: 모든 소스가 완료되면 각 소스의 마지막 값을 한 번 사용합니다.
zip: 인덱스별로 짝을 맞춥니다.
계속 업데이트가 필요한지, 한 번만 결합하면 되는지, 엄격한 짝짓기가 필요한지에 따라 선택하세요.
빠른 확인
결합 연산자에 대한 이해도를 확인해 보세요.
복습: 결합 연산자
결합 연산자는 여러 스트림을 조정합니다.
combineLatest: 어떤 값이 방출되든 각 소스의 최신 값을 사용합니다.forkJoin: 완료 시 결합합니다(Promise.all과 유사).merge: 모든 방출을 섞습니다.withLatestFrom: 소스가 주도하며 다른 소스의 최신 상태를 가져옵니다.
다음 주제: 오류 처리 연산자
자주 묻는 질문
“결합 연산자” 강의는 무료인가요?
네 — “결합 연산자” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“결합 연산자”에서 뭘 배우나요?
combineLatest와 forkJoin으로 스트림을 결합합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“결합 연산자” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.