부록 - 프롬프터 예제 코드

import { of, from, range, fromEvent, merge, concat } from 'rxjs'
import { pluck, filter, map, mapTo, throttleTime, startWith, bufferCount, skipLast, toArray, scan, mergeMap } from 'rxjs/operators'

export default function init (lines, spaces, printFunc) {

  // 방향키만 1 또는 -1로 치환한 스트림
  const keypress$ = fromEvent(document, 'keydown').pipe(
    pluck('key'),
    filter(k => k.includes('Arrow')),
    map(k => { return { 
      ArrowDown: 1,
      ArrowUp: -1,
      ArrowLeft: -1,
      ArrowRight: 1
     }[k] })
  )

  // 마우스 스크롤을 1초 간격으로 끊은 뒤
  // 방향에 따라 1 또는 -1로 치환한 스트림
  const scroll$ = merge(
    fromEvent(document, 'mousewheel'),
    fromEvent(document, 'wheel')
  ).pipe(
    throttleTime(1000),
    map(s => s.deltaY > 0 ? 1 : -1)
  )

  // 위의 키보드 스트림과 마우스 스트림
  // 그리고 최초값 0을 병합한 스트림
  const inputs$ = merge(
    keypress$, scroll$
  ).pipe(startWith(0))

  // 출력할 첫, 마지막 라인의 
  // 각각 앞뒤 공백으로 들어갈 스트림
  const spaces$ = range(0, spaces).pipe(mapTo(''))

  // 프롬프터에 표시할 행들을 앞뒤 공백과 이어붙인 뒤
  // spaces + 1개 라인, 1줄 간격으로 묶어
  // 배열 형태로 반환하는 스트림
  const lines$ = concat(
    spaces$, from(lines), spaces$
  ).pipe(
    bufferCount(spaces * 2 + 1, 1),
    skipLast(spaces * 2),
    toArray()
  )

  // 인풋 스트림의 입력에 따라 라인 스트림의
  // 1줄 간격으로 묶인 배열을 하나씩 발행하는 최종 스트림
  const final$ = inputs$.pipe(
    scan((acc, cur) => {
      return Math.min(Math.max(acc += cur, 0), lines.length - 1)
    }),
    mergeMap(cursor => {
      return lines$.pipe(
        map(buffereds => buffereds[cursor])
      )
    })
  )
  
  // 최종 스트림 구독
  final$.subscribe(printFunc)
}

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

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

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

이메일 주소

yalco@yalco.kr

메일 제목 (반드시 아래 제목을 붙여넣어주세요!)

[질문] RxJS 4-1

🛑질문 전 필독!!

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

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

🛑질문 전 필독!!