home강의 홈으로
Section 2. Operator - RxJS의 다양한 연산자들
Lesson 8. 기타 유용한 연산자들 2
<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>
const { of } = rxjs
const { startWith } = rxjs.operators
const obs$ = of (1, 2, 3)
obs$.pipe(startWith(0)).subscribe(console.log)
// obs$.pipe(startWith(-2, -1, 0)).subscribe(console.log)
every : 모든 발행물들이 주어진 조건에 부합하는가 여부
const { of } = rxjs
const { every } = rxjs.operators
of(1, 3, 5, 7, 9, 11, 13, 15).pipe(
every(x => x % 2 !== 0)
).subscribe(console.log)
const { fromEvent, timer } = rxjs
const { defaultIfEmpty, pluck, takeUntil } = rxjs.operators
fromEvent(document, 'click').pipe(
takeUntil(timer(5000)),
pluck('x'),
defaultIfEmpty('NO CLICK')
).subscribe(console.log)
retry : 발행 실패시 N회 재시도
const { range } = rxjs
const { ajax } = rxjs.ajax
const { mergeMap, pluck, retry, } = rxjs.operators
range(1, 20).pipe(
mergeMap(keyword => ajax(
`http://127.0.0.1:3000/people/quarter-error/${keyword}`
).pipe(
pluck('response', 'first_name'),
retry(3)
)
)
).subscribe(console.log)
defer : 조건에 따라 스트림 발행
- 구독하는 순간에 조건에 따른 스트림을 생성
💡 옵저버블이 해당 코드가 실행되는 부분시점에서 생성되기 때문에 당시의 상태에 따라 만들어질 옵저버블이 결정되도록 할 수 있습니다.
<input type="checkbox" id="check">
const { defer, fromEvent, of } = rxjs
const { pluck } = rxjs.operators
fromEvent(document.querySelector('#check'), 'change').pipe(
pluck('target', 'checked')
).subscribe(checked => {
defer(_ =>
checked ? of('CHECKED') : of('UNCHECKED')
).subscribe(console.log)
})
iif : 단순화된 defer: 조건에 따라 두 스트림 중 하나 발행
false시의 스트림이 주어지지 않으면 false시 바로 complete
<input type="checkbox" id="check">
const { iif, fromEvent, of } = rxjs
const { pluck } = rxjs.operators
fromEvent(document.querySelector('#check'), 'change').pipe(
pluck('target', 'checked')
).subscribe(checked => {
iif(
_ => checked,
of('CHECKED'),
of('UNCHECKED')
).subscribe(
console.log,
err => console.log(err),
_ => console.log('COMPLETE')
)
})
const { empty } = rxjs
empty().subscribe(console.log, console.error, _ => console.log('COMPLETE'))
const { throwError } = rxjs
throwError('ERROR').subscribe(console.log, console.error, _ => console.log('COMPLETE'))
share : 스트림을 여러 구독자들간 공유
const { interval } = rxjs
const { take, tap, takeLast, share } = rxjs.operators
const obs$ = interval(1000).pipe(
take(20),
tap(x => console.log(`side effect: ${x}`)),
share()
)
obs$.subscribe(x => console.log(`subscriber 1: ${x}`))
setTimeout(_ => {
obs$.subscribe(x => console.log(`subscriber 2: ${x}`))
}, 5000)
setTimeout(_ => {
obs$.subscribe(x => console.log(`subscriber 3: ${x}`))
}, 10000)
shareReplay : share 된 스트림의 마지막 N개 발행물을 새 구독자에게 발행
const { interval } = rxjs
const { take, tap, takeLast, shareReplay } = rxjs.operators
const obs$ = interval(1000).pipe(
take(20),
tap(x => console.log(`side effect: ${x}`)),
shareReplay(3)
)
obs$.subscribe(x => console.log(`subscriber 1: ${x}`))
setTimeout(_ => {
obs$.subscribe(x => console.log(`subscriber 2: ${x}`))
}, 5000)
setTimeout(_ => {
obs$.subscribe(x => console.log(`subscriber 3: ${x}`))
}, 10000)
🤔얄코에게 질문하기질문은 반.드.시 이리로 보내주세요! ( 강의사이트 질문기능 ✖ )
🛑질문 전 필독!!
- 구글링을 먼저 해 주세요. 들어오는 질문의 절반 이상은 구글에 검색해 보면 1분 이내로 답을 찾을 수 있는 내용들입니다.
- 오류 메시지가 있을 경우 이를 구글에 복붙해서 검색해보면 대부분 짧은 시간 내 해결방법을 찾을 수 있습니다.
- 강의 페이지에 추가사항 등 놓친 부분이 없는지 확인해주세요. 자주 들어오는 질문은 페이지에 추가사항으로 업데이트됩니다.
- "유료파트의 강의페이지는 어디 있나요?" - 각 영상의 시작부분 검은 화면마다 해당 챕터의 강의페이지 링크가 있습니다.
- 질문을 보내주실 때는 문제가 어떻게 발생했고 어떤 상황인지 등을 구체적으로 적어주세요. 스크린샷을 첨부해주시면 더욱 좋습니다.
