home강의 홈으로
Section 1. 스트림 맛보기
Lesson 1. Observable(스트림 생성기) 만들기

브라우저상 실습환경 구축하기

  • JSFiddle 사용
  • RxJS 라이브러리 로드 🔗 참조링크

    <script src="https://unpkg.com/@reactivex/rxjs/dist/global/rxjs.umd.js"></script>
  • 콘솔창을 켜고 rxjs로 확인



Observables - 스트림 생성기 만들기

1. 배열된 스트림

const { of, from, range, generate } = rxjs const obs1$ = of(1, 2, 3, 4, 5) const obs2$ = from([6, 7, 8, 9, 10]) const obs3$ = range(11, 5) const obs4$ = generate( 15, x => x < 30, x => x + 2 ) //obs1$.subscribe(item => console.log(`of: ${item}`)) //obs2$.subscribe(item => console.log(`from: ${item}`)) //obs3$.subscribe(item => console.log(`range: ${item}`)) //obs4$.subscribe(item => console.log(`generate: ${item}`))

2. 시간에 의한 스트림

const { interval, timer } = rxjs const obs1$ = interval(1000) const obs2$ = timer(3000) //obs1$.subscribe(item => console.log(`interval: ${item}`)) //obs2$.subscribe(item => console.log(`timer: ${item}`))

3. 이벤트에 의한 스트림

<input id="myInput" type="text"/> const { fromEvent } = rxjs const obs1$ = fromEvent(document, 'click') const obs2$ = fromEvent(document.getElementById('myInput'), 'keypress') obs1$.subscribe(item => console.log(item)) obs2$.subscribe(item => console.log(item))

4. Ajax를 통한 스트림

const { ajax } = rxjs.ajax const obs$ = ajax(`http://127.0.0.1:3000/people/1`) obs$.subscribe(result => console.log(result.response))

5. 직접 만드는 스트림

const { Observable } = rxjs const obs$ = new Observable(subscriber => { subscriber.next(1) subscriber.next(2) subscriber.next(3) // 값을 다 발행한 뒤에는 compelte를 실행하여 메모리 해제 subscriber.complete() }) obs$.subscribe(item => console.log(item))

⭐ Observable은 lazy(게으르다)

  • 누군가 구독을 해야 발행을 시작
  • 각 구독자에게 따로 발행
const { of, interval, fromEvent } = rxjs const obs1$ = of('a', 'b', 'c') const obs2$ = interval(1000) const obs3$ = fromEvent(document, 'click') setTimeout(_ => { console.log('of 구독 시작') obs1$.subscribe(item => console.log(item)) }, 5000) setTimeout(_ => { console.log('interval 구독 시작') obs2$.subscribe(item => console.log(item)) }, 10000) setTimeout(_ => { console.log('fromEvent 구독 시작') obs3$.subscribe(_ => console.log('click!')) }, 15000) setTimeout(_ => { console.log('interval 구독 시작 2') obs2$.subscribe(item => console.log(item)) }, 20000)

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

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

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

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

🛑질문 전 필독!!

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