Sat10am 발표자료

1. Generator
실제 사용 사례
를 발표하려고 하였으
나..

3. Generator의 핵심
JS에서 흐름제어를 제어하기 위한
도구

4. 흐름제어가 무엇이냐?
• 폰 노이만 구조의 컴퓨터 환경에서는 CPU에 명령이 적재되고 적
재된 명령을 실행하는 flow 상태를 가집니다. 동기 명령이 일어나
는 것을 루틴이라고 합니다.
• 자바스크립트는 함수단위의 코드는 완전실행되는 루틴을 가지고
있었다.
• 함수 안에 반복 횟수가 많은 반복문이 존재하는 경우 반복문의 실
행때문에 CPU 자원이 묶여 버려서 다른 기능을 수행하지 못한다.
- (블록킹 현상)
• 최근에는 OS가 강력한 권한을 가지고 있어서 소프트웨어가 반복
문에 의해 머신자원을 독점하는 현상을 방지한다.
• 예) 데스크탑 브라우저의 블록킹 허용시간은 20초, 안드로이드의
경우 5초

5. 예제
• Canvas에서 그레이
스케일 처리
• 이미지의 크기가 크면
클 수록 작은 단위로 분리해서
반복문을 처리해야 한다.

6. 제너레이터의 기초
• iterable의 인터페이스
• 더 높은 추상화
• 복잡한 루프의 추상화

7. iterable의 인터페이스
• iterable이란 Symbol.iterator와 next메소드를 구현한 객체.
• 이 객체는 next 메소드를 호출할 수 있고, next 메소드는
{ value: 값, done: 불린 } 형태의 값을 반환한다.

8. 예 제
• 제너레이터 자체는 이터레이터를 쉽게 만들기 위해 사용하
는 도구

9. 더 높은 추상화
• ES6에서는 generator구문에 iterator를 한 단계 더 추상화하
여 위임할 수 있는 yield* 구문을 지원.
• yield를 반환하는 generator에게 다시 본인의 yield를 위임.
• iterator라는 인터페이스를 지키는 모든 객체는 스스로 알아
서
반복될 로직을 소유하므로 이 객체들을 조합하고 위임하여
객체를 사용하는 곳에서는 그저 실행만 하면 되는 높은 추
상화를
가질 수 있다.

10. 복잡한 루프의 추상화
• Element를 순회하는 루프가 있다고 하자.
만약 여기서 반복문의 구조가 확장되어야 한다면?

11. 제너레이터를 이용하여 반복문만을 분리하여 코드를 확장 할 수 있다.

13. 비동기에서 제너레이터
• 특정 함수 f를 n번 실행시켜주는 함수 slicer
• 만약 setTimeout 말고 다른 비동기적 함수를 사용해야 한다
면?

14. 실행기(executor)
• 제너레이터를 이용하면 제어구조를
그대로 둔 상태에서 변경되는 코드만
외부에 둘 수 있다.
• 이렇게 외부에서 제너레이터의
제어구조를 이용하는 쪽을 실행기
(executor)라고 부른다.
• slicer의 핵심 제어는 제너레이터에게
위임되어있으므로 실행기의 비동기
로직만을 따로 관리할 수 있어
역할 분리가 잘되어 있는 것을 볼 수 있다.
• 제너레이터의 비동기 사용이란 결국 실행기와
제너레이터를 이용하여 적절한 시점에 이터레이션
을 진행시키는 기법이라고 할 수 있다.

15. 제너레이터가 직접 이터레이션을 통
제하기
• 앞에서 살펴본 실행기의 아이디어는 단지 역할을 분리하기
위해서만 사용되는 것은 아니다.
• 실행기가 제너레이터에게 실행기의 진행을 위임할 수 있는
방법을 넘겨주게 되면 제너레이터가 흐름제어에 관여하는
방식이 달라진다.

16. • 더 이상 실행기 쪽에서
제너레이터의 이터레이션을
진행하지 않는다.
• 제너레이터는 next를 받아
더 이상 실행기와 상호작용
하지 않고 스스로 이터레이션
을 진행한다.

17. 제이쿼리 AJAX 통신 예
제

18. fetch와 프라미스로 확장

19. • 이번 예제에서는 이터레이션의 통제를 실행기 쪽에서 가졌
다.
• 제네레이터 내부 로직을 더욱 간소화하고 fetch의 결과인
프라미스만 넘겨주기 위해서다.
• 실행기와 제네레이터 중 누가 주도적으로 이터레이션을 진
행
시킬 것인가는 경우에 따라 선택해야한다.
• next함수의 마지막 처리에 next를 불러 이터레이션을 주입
하여
결과적으로 실행기가 제네레이터의 다단계 프라미스를 처
리한다.

20. async await로 전환
• async-await는 결국 프라미스 비동기 실행기를 내장한 제네
레이터 구문이라 할 수 있다.
• await는 결국 then에 대한 실행기이므로 한번 then이 겹칠
때마다 await를 해줘야한다.

21. async generator로 확장
• 프라미스를 사용한 비동기 실행기와 제너레이터의 사용을
간단히 async-await로 처리하였지만
• async-await는 중간에 yield를 할 수 없기 때문에 1회성
then을 처리하여 이터레이션을 자동화 해준 실행기 정도의
의미를 갖는다.
• 일종의 매크로 구문이나 마찬가지인데 이것의 대가로 원래
제네레이터의 가치인 코루틴으로서의 기능을 잃어버리게
되었다.
• 이걸 해결하기 위해 아직 표준은 아니지만 Asynchronous
Iteration이라는 stage3까지 올라온 제안이 있다.