이번에는 RxJS에 대한 내용입니다. Reactive Programming은 요즘 핫한 주제여서 한번 다루어 봤습니다. 내용은 중간쯤에 있는 Debounce와 Throttle에 대한 설명입니다.
전체 분량은 너무 길어서 주요부분 한 두 군데만 1분 이하로 발췌하여 mp3파일로 만들고 있습니다.
즉 한 주제당 1분 이하 분량의 mp3파일이 한 두개씩 제공되겠습니다. 나머지 부분은 리스닝 연습 하시면 되겠습니다.
공부하는 4단계 방법은 아래와 같습니다.
1분 이하 분량을 번역
전체 듣기 두번
문장 듣고 따라 말하기 두번
한국어로 듣고 영어로 말하기 한번 => 제일 중요 합니다!!!!
하루에 한시간 이상 들으면서 말하기 연습하면 좋을 것 같습니다.
*** 개발자 매일 영어는 제가 개인적으로 공부하기 위해 만든 mp3파일을 혹시 다른 분에게도 도움이 될까 해서 공유하고 있는 것입니다. 제 목소리도 포함되어 있고, 부족한 영어 실력으로 번역한 것이라 잘못되었을 수도 있습니다. 제 목소리에 놀라지 마시고 이상한 부분은 댓글로 알려 주시면 감사하겠습니다. ^0^*, 혹시라도 도움이 되셨다면 upvote 부탁드립니다 ^^; ***
mp3 파일 다운로드: https://drive.google.com/open?id=1ZtosW7AT9X3cXokwf541bQwI1TiTKv9l
풀 동영상 링크:
----- mp3 script -----
Now let's take a look at Debounce and Throttle.
These two operators allow you to deal with events that you met way more values than actually need.
The mousemove event is a perfect example on the Dom.
So we'll subscribe to the mouse event and then we'll print the type of event here on the screen.
Let's first do this without any throttling or debouncing.
You can see it only takes about two seconds to get hundreds of events printed on the screen.
We can use the throttle to get the very first event and then set a delay before it starts emitting any other events.
In this case, we'll use the throttle time helper and pass it 1000 milliseconds.
So now if we mouse over the screen we'll get the first event and then it will wait at least one second before sending any additional events.
Debounce does almost the same exact thing but instead of giving us the first event It gives us the last event.
So first we mouse over and there's a delay then after that delay it will emit the most recent event.
Debounce is especially useful when you want to make sure the user is stopped doing something such as typing in an autocomplete form or something similar.
--- 번역 ---
자 이제 Debounce와 Throttle에 대해 봅시다.
이 두 연산자들은 실제 필요한 것보다 더 많은 값들을 만났을때 이벤트를 처리할 수 있도록 합니다.
Dom에서 마우스무브 이벤트는 완벽한 예입니다.
우리는 마우스 이벤트에 가입하고 스크린에 이벤트 타입을 출력할 것입니다.
첫째로 쓰로틀링과 디바운싱 없이 해봅시다.
단지 2초동안 몇백개의 이벤트들이 화면에 출력된 것을 볼 수 있습니다.
쓰로틀을 사용하여 첫번째 이벤트를 가지고 그리고 다른 이벤트 들이 발생하기 전에 지연을 설정할 수 있습니다.
이 경우, 쓰로틀 시간 도움자롤 사용할 것이고 1000밀리초를 넣겠습니다.
이제 우리가 마우스를 스크린위에 올리면 우리는 첫번째 이벤트를 얻을 것이고,
그리고 어떤 추가적인 이벤트들을 보내기 전에 적어도 1초 기다릴 것입니다.
디바운스는 거의 비슷하지만 첫번째 이벤트 대신 마지막 이벤트를 우리에게 줍니다.
첫번째로 우리가 마우스를 올리면 지연이 발생하고 그리고 그 지연 후에 가장 최근 이벤트를 발생 시킬 것입니다.
디바운스는 사용자가 어떤 것 즉 자동 완성폼이나 비슷한 것을 하다가 정지한 것을 확인하길 원할때 특별히 유용합니다.