home강의 홈으로
Section 2. Operator - RxJS의 다양한 연산자들
Lesson 7. 기타 유용한 연산자들 1
<script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>

sequenceEqual Operator

타이밍에 관계없이, 두 스트림 발행물들의 순서와 값 동일 여부 반환

<input type="number"> const { from, fromEvent } = rxjs const { sequenceEqual, mergeMap, map, take } = rxjs.operators const num$ = from([3, 1, 4, 7, 5, 8, 2]) const key$ = fromEvent(document, 'keyup').pipe( map(e => Number(e.code.replace('Digit', ''))), take(7), sequenceEqual(num$) ).subscribe(console.log)

distinctUntilChanged Operator

같은 값이 연속되는 것만 제외

const { of } = rxjs const { distinctUntilChanged } = rxjs.operators of(1, 1, 2, 2, 2, 1, 1, 2, 3, 3, 3, 4, 4, 1).pipe( distinctUntilChanged(), ).subscribe(console.log) const { from } = rxjs const { distinctUntilChanged } = rxjs.operators const students = [ { name: '홍길동', sex: 'male' }, { name: '전우치', sex: 'male' }, { name: '아라치', sex: 'female' }, { name: '성춘향', sex: 'female' }, { name: '임꺽정', sex: 'male' }, ] from(students).pipe( distinctUntilChanged((a, b) => a.sex === b.sex), ).subscribe(console.log)

combineLatest Operator

두 스트림을 각 최신 값들끼리 결합 ( zip과 비교)

const { combineLatest, interval, fromEvent } = rxjs const { pluck } = rxjs.operators combineLatest( interval(2000), fromEvent(document, 'click').pipe(pluck('x')) ).subscribe(console.log)

buffer Operator

const { interval, fromEvent } = rxjs const { buffer } = rxjs.operators interval(1000).pipe( buffer(fromEvent(document, 'click')) ).subscribe(console.log)

bufferCount Operator

const { range } = rxjs const { bufferCount } = rxjs.operators range(1, 100).pipe( bufferCount(10, 10) ).subscribe(console.log) // 클릭 3번중 한 번만 반응하기 const { fromEvent } = rxjs const { bufferCount } = rxjs.operators fromEvent(document, 'click').pipe( bufferCount(3) ).subscribe(_ => console.log('FIRE'))

bufferTime Operator

const { interval } = rxjs const { bufferTime } = rxjs.operators interval(200).pipe( bufferTime(2000) ).subscribe(console.log)

groupBy Operator

const { range } = rxjs const { groupBy, mergeMap, toArray } = rxjs.operators range(1, 50).pipe( groupBy(x => x % 3), mergeMap(groups$ => groups$.pipe( toArray()) ) ).subscribe(console.log)

🤔얄코에게 질문하기질문은 반.드.시 이리로 보내주세요! ( 강의사이트 질문기능 ✖ )

강의에서 이해가 안 되거나 실습상 문제가 있는 부분,
설명이 잘못되었거나 미흡한 부분을 메일로 알려주세요!

답변드린 뒤 필요할 경우 본 페이지에
관련 내용을 추가/수정하도록 하겠습니다.

이메일 주소
yalco@yalco.kr
메일 제목 (반드시 아래 제목을 붙여넣어주세요!)
[질문] RxJS 2-7

🛑질문 전 필독!!

  • 구글링을 먼저 해 주세요. 들어오는 질문의 절반 이상은 구글에 검색해 보면 1분 이내로 답을 찾을 수 있는 내용들입니다.
  • 오류 메시지가 있을 경우 이를 구글에 복붙해서 검색해보면 대부분 짧은 시간 내 해결방법을 찾을 수 있습니다.
  • 강의 페이지에 추가사항 등 놓친 부분이 없는지 확인해주세요. 자주 들어오는 질문은 페이지에 추가사항으로 업데이트됩니다.
  • "유료파트의 강의페이지는 어디 있나요?" - 각 영상의 시작부분 검은 화면마다 해당 챕터의 강의페이지 링크가 있습니다.
  • 질문을 보내주실 때는 문제가 어떻게 발생했고 어떤 상황인지 등을 구체적으로 적어주세요. 스크린샷을 첨부해주시면 더욱 좋습니다.
🌏 Why not change the world?