DEV Community: Steve Sung

[JS] 비동기프로그래밍 - generator, iterator, async/await

Steve Sung — Mon, 06 Jan 2020 03:41:49 +0000

Iterator

배열이나 유사한 자료구조 내부를 순회하는 객체이다
iterable, iterator 두가지 iterable protocol이 존재

[Iterable]

객체 멤버를 반복할 수 있는 객체
자바스크립트에서 객체가 iterable 하기 위해서는 [@@iterator] 메소드 구현 필요, object property에 Symbol.iterator를 추가해야 한다.

        const iterable = new Object();

        // 객체는 오직 하나의 Symbol.iterator를 가질 수 있다

        iterable[Symbol.iterator] = function* () {
          yield 1;
          yield 2;
          yield 3;
        };

        console.log([...iterable]); // 1 2 3
        for(var value of iterable) {
            console.log(value); // 1 2 3
        }

Array, String, Map, Set, TypedArray가 iterable을 기본적으로 가지고 있다.

[Iterator]

객체를 next() 메서드로 순환 할 수 있는 객체
next()메소드 규칙
- arguments가 없다
- next 메소드의 반환자는 done: boolean , value:any 를 포함하는 object 를 반환해야한다
- next 메소드의 반복이 끝날때 done 은 true 를 반환해야 한다 그전에는 false

    // iterator를 반환하는 함수들

    var arr = ['1', '2', '3'];
    console.log([...arr.entries()]);
    // [[0, "1"], [1, "2"], [2, "3"]];
    console.log([...arr.keys()]);
    // [0, 1, 2];
    console.log([...arr.values()]);
    // ["1", "2", "3"];

    var map = new Map([[1, '1'],[2, '2'],[3, '3']])
    console.log(map.entries());
    // MapIterator {1 => "1", 2 => "2", 3 => "3"}
    console.log(map.keys());
    // MapIterator {1, 2, 3}
    console.log(map.values());
    // MapIterator {"1", "2", "3"}

    var set = new Set([1, 2, 3]);
    console.log(set.entries());
    // SetIterator {1, 2, 3}
    console.log(set.keys());
    // SetIterator {1, 2, 3}
    console.log(set.values());
    // SetIterator {1, 2, 3}

    var string = '1,2,3';
    console.log([...string.matchAll(/[\d+]/g)]; // RegExpStringIterator
    // [
    // ["1", index: 0, input: "1,2,3", groups: undefined],
    // ["2", index: 2, input: "1,2,3", groups: undefined],
    // ["3", index: 4, input: "1,2,3", groups: undefined]
    // ]

[iterable 과 iterator의 차이]

iterable?
- iterable한 객체는 iterator를 반환하는 [Symbol.iterator] 프로퍼티를 가진 객체이다.
  - Symbol.iterator는 주어진 객체의 iterator를 반환하는 함수를 명시한다.
- 정리
  1. 순회 할수 있는 데이터를 가지고 있어야한다.
  2. 전역 “well-known” symbol 인Symbol.iterator 을 메서드로 가지고 있어야한다. 또한 이 메서드는 #3 , #6 에 따라 구현되어야 한다.
  3. Symbol.iterator 메서드는 “iterator” 객체를 반환해야합니다
  4. “iterator” 객체는 반드시 next 라고 하는 메서드를 가져야합니다.
  5. next 에는 #1에 저장되어있는 데이터에 접근 할 수 있어야합니다.
  6. “iterator” 객체인 iteratorObj를 iteratorObj.next()하면 {value:<stored data},done:false} #1 데이터가 추출 되며 전부다 순회했을 경우 {done:true} 가 반환되도록 한다.
iterator?
- 이터레이터는 반복을 위해 설계된, 특별한 인터페이스를 가진 객체이다.
- 이터레이터 객체는 next()를 가진다.
  - 연산의 결과로 객체를 반환한다. { value: value, done: boolean }

[spread 문법]

spread 문법을 이용하면 iterable 객체를 해체할 수 있다

generator

[generator는 쓰레드가 아니다]

쓰레드를 지원하는 언어는 여러 코드를 동시에 실행시킨다
제너레이터 코드는 제너레이터를 호출하는 코드와 같은 쓰레드에서 실행된다
동시에 실행되는 경우는 없고 yield구문에 의해서만 실행을 멈춘다

[generator는 이터레이터다]

Symbol.iterator(), . next() 두가지 메소드 구현만으로도 자기만의 이터레이터를 만들수 있다.
- 객체가 이터러블 하기위해서는 Symbol.iterator 메서드를 추가해야한다
- next() 메서드를 통해 하나씩 출력한다

        const iterableObj = {
          [Symbol.iterator]() {  
            let step = 0;
            return {
              next() {
                step++;
                if (step === 1) {
                  return { value: 'This', done: false};
                } else if (step === 2) {
                  return { value: 'is', done: false};
                } else if (step === 3) {
                  return { value: 'iterable.', done: false};
                }
                return { value: '', done: true };
              }
            }
          },
        }
        for (const val of iterableObj) {
          console.log(val);
        }

        // 출력
        // This
        // is 
        // iterable.

generator를 이용해서 만든 이터레이터

Symbol.iterator() , next()가 이미 구현 되어있다

        function * iterableObj() {
          yield 'This';
          yield 'is';
          yield 'iterable.'
        }
        for (const val of iterableObj()) {
          console.log(val);
        }

        // 모든 generator 는 symbol.iterator와 .next()를 기본 내장 하고있다
        // 호출 될때마다 다음 yield 까지 구동
        // this가 바뀌고 next() 호출

        // 동일하게 출력

[어디에 generator 함수를 써야하는가]

Promise, async/ await
- Promise 자체로도 비동기 프로그래밍을 다루는데 문제 없지만 generator를 이용하면 코드의 가독성과 관리 측면에서 좋다

        function * generator-promise() {
        let a=yield Promise1();
        console.log(a);

        let b=yield Promise1();
        console.log(b);

        let c=yield Promise1();
        console.log(c);
        }

        // generator-promise함수는 매번 실행하면서 yield를 만나 정지합니다.
        // 제네레이터 함수는 실행하면 Promise1 결괏값을 yield(넘겨주고)하고 함수를 종료합니다.
        // 다시 (제네레이터)함수가 실행하면 이 값을 변수 a에 저장됩니다.
        // 이런 과정을 통해 Promise 값이 변수 a, b, c에 저장되고 console.log를 통해 확인 가능합니다.
        // {value : 결과값, done: boolean값 }

Infinite Data Generator
- generator는 기본적으로 값을 생성한다. 조건을 무한으로 하면 무한 데이터 생성도 가능하다

        function * randomize() {
          while (true) {
        let random = Math.floor(Math.random()*1000);
            yield random;
          }}

        var random= randomize();
        while(true) 
        console.log(random.next().value)

        function * naturalNumbers() {
          let num = 1;
          while (true) {
            yield num;
            num = num + 1
          }
        }
        const numbers = naturalNumbers();

        console.log(numbers.next().value)
        console.log(numbers.next().value)
        // 1
        // 2

느긋한 계산이 가능하다

async/await

동기코드와 유사한 스타일의 코딩스타일을 가능하게 하는게 장점, 최상위의 promise에 대해서 사용 하게된다. await로 선언시킨 함수 완료 후에 연결된 다른 함수가 실행 될 수 있게해준다.

[어떻게 구현되었는가]

    // ES7
    async function foo() {
      await bar();
    }

    // ES5 complied
    let foo = (() => {
      var _ref = _asyncToGenerator(function*() {
        yield bar();
      });

      return function foo() {
        return _ref.apply(this, arguments);
      };
    })();

    function _asyncToGenerator(fn) {
        // generator 함수를 받아온다
      return function() {
        var gen = fn.apply(this, arguments);
            // .apply로 generator 실행
            // iterator 객체를 gen 안에 넣어서 클로저로 저장해둔다

        return new Promise(function(resolve, reject) {
          function step(key, arg) {
            try {
              var info = gen[key](arg);
                            // next() 호출, iterator 객체 소환
              var value = info.value;
            } catch (error) {
              reject(error);
              return;
            }
            if (info.done) { // true 면 종료
              resolve(value);
            } else {
              return Promise.resolve(value).then(
                function(value) {
                  step("next", value);
                                // 재귀함수를 통해 반복실행
                },
                function(err) {
                  step("throw", err);
                }
              );
            }
          }
          return step("next");
        });
      };
    }

async 키워드를 generator 로 바꾸고 await 키워드는 yield 로 바꿨다

→ 비동기 로직이 완료 될때마다 적절하게 next() 를 호출하면 된다.

→ bar() 함수의 종료시점은 bar() 밖에 모르고 next()를 bar() 내에서 실행하게 되면 의존성이 생긴다

→ Promise와 재귀함수를 이용하여 next()를 대신 호출하는 함수를 만들어준다 (_asyncToGenerator 함수)

참고글

Javascript와 Iterator

[Javascript] Iterator, Iterable 에 대해서

[Generator 함수를 이해해보자 (이론편)] 1. "Why" 제네레이터 함수를 써야 하는가?

Async-await는 어떻게 구현하는가

[JS] 비동기프로그래밍 - Callback, Promise, Symbol

Steve Sung — Mon, 06 Jan 2020 03:01:28 +0000

비동기

요청한 내용을 언젠간 응답해줄 것을 이라는 약속을 믿고 처리
언젠간 응답이 올테니 다른 로직을 수행하고 있자

setTimeout, setInterval

setTimeout은 일정 시간 간격 이후에 함수가 한번 실행된다
setInterval은 일정 시간 간격으로 함수가 주기적으로 실행된다
- clearInterval

[정기적인 실행시키기]

setInterval
재귀적인 setTimeout

        let timerId = setTimeout(function tick() {
          alert('tick');
          timerId = setTimeout(tick, 2000);
            // 현재 실행 끝난 후 2초간 딜레이 후 실행
            // 딜레이 시간을 쓰지 않으면 바로 동기적으로 실행함
        }, 2000);

setInterval 보다 유연하게 이용가능 ex) 서버에 요청이 너무 많아 딜레이를 늘려야 할 때

            let delay = 5000;

            let timerId = setTimeout(function request() {
              // 요청 전송

              if(서버 과부하 때문에 요청이 실패한다면) {
                // 다음 실행까지 인터벌을 좀 늘리자
                delay *= 2;
              }

              timerId = setTimeout(request, delay);

            }, delay);

setInterval이 보장 못하는 실행간 딜레이를 보장
- setInterval은 실제로 기재한 시간보다 짧은 딜레이로서 동작
  → 딜레이 시간안에 함수의 동작시간이 포함되기 때문
  
  → 함수 실행 종료 후에 딜레이가 걸리는게 아닌 단순 시간 을재서 호출을 하게 된다
  
  → 극단적으로 함수 실행 시간이 길어질 경우 바로 실행될 수도 있다
- 재귀를 이용한 setTimeout은 함수실행 종료 후 딜레이를 적용하여 호출한다

[제로딜레이 setTimout으로 CPU 소비가 많은 작업을 splitting 하기]

    let i = 0;

    let start = Date.now();

    function count() {

      // 1부터 1000000000 세는 무거운 작업 
        // cpu 잠깐 멈출 듯함
      for (let j = 0; j < 1e9; j++) { 
        i++;
      }

      alert("Done in " + (Date.now() - start) + 'ms');
    }

    count();

    // setTimeout으로 스케줄링

    let i = 0;
    let start = Date.now();

    function count() {
      // 약간의 무거운 작업을 해봅시다. 1000000 단위로만 센다
      do {
        i++;
      } while (i % 1e6 != 0);

      if (i == 1e9) {
        alert("Done in " + (Date.now() - start) + 'ms');
      } else {
        setTimeout(count);
            // 호출을 스케쥴링합니다.
            // 1000000000에 도달하지 않았다면 다시 동기적으로 실행
      }
    }

    count();

    // 이 경우 작업을 setTimeout으로 나누든 안나누든 큰 차이는 없다

    // 차이를 만들기 위한 개선 코드

    let i = 0;
    let start = Date.now();

    function count() {
      // 스케줄링을 함수의 도입부로 옮김
      if ( i < 1e9 - 1e6) {
        setTimeout(count); // 함수 종료 후 실행됨
      }

      do {
        i++;
      } while (i % 1e6 != 0);

      if ( i == 1e9) {
        alert("Done in " + (Date.now() - start) + 'ms');
      }

    }

    count();

    // 작업전 스케줄링 후 작업 실행시 시간이 적게든다
    // 브라우저에 중첩된 타이머 딜레이를 최소화 가능하기 때문
    // 브라우저에서는, 중첩된 타이머를 얼마나 자주 동작할 수 있는지에 대한 제한이 있다.
    //  HTML5 표준은 "5개의 중첩된 타이머 이후에는 간격이 적어도 강제로 4ms 만큼 있을 것입니다." 
    // 라고 말한다.
    // 보통 실행시 1 1 1 1 9 15 24 ... 중첩되는 타이머가 늘어갈수록 점점 딜레이가 늘어간다
    // 스케줄링은 어느 부분에 하느냐에 따라서도 딜레이가 달라지게 된다

[setTimeout 이용해서 브라우저 렌더 강제시키기]

    <div id="progress"></div>

    <script>
    let i = 0;

    function count() {
      for (let j = 0; j < 1e6; j++) {
        i++;
        // 현재의 i 값을 progress div에 넣습니다.
        // innerHTML에 대해 더 알아봅시다.
        progress.innerHTML = i; // 다 i 작업 끝난후에 html에 반영된다 
      }
    }

    count();
    </script>

    // setTimeout 적용

    <div id="progress"></div>

    <script>
      let i = 0;

      function count() {

        // do a piece of the heavy job (*)
        do {
          i++;
          progress.innerHTML = i;
        } while (i % 1e3 != 0);

        if (i < 1e9) {
          setTimeout(count); // 순차적으로 html에 계속 반영
        }

      }

      count();
    </script>

Callback

프로그래밍에서 콜백(callback)은 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다
콜백함수
- called at the back on the other function
- 다른함수의 인자로서 이용되는 함수
- 어떤 이벤트에 의해 호출되는 함수
콜백지옥 : 비동기 처리 로직을 이용시에 콜백 함수를 연속으로 사용할 때 일단 코드가독성도 떨어지고 안전장치도 없기때문에 정확하게 호출을 확신할수가 없게 되어 버그관리에 취약하게 된다.

Promise

[개요]

비동기 방식을 다루는 최선의 방법을 논하고 있었다.
여러 실험이 벌어지기도 했지만 Node의 표준인 오류-우선 콜백 패턴을 주로 사용하게 되었다
Dojo toolkit, JQuery 등이 Promise방식을 사용하면서 Promise를 대세로 만들었다
fetch, async 등 중요한 api 들도 새로운 Promise 표준을 기반으로 만들어 졌다

[작동방식]

프로미스에서도 콜백이 사용되긴 하지만 예측가능한 패턴에서만 이용한다
기본개념은 프로미스 기반 비동기적 함수를 호출하면 그함수는 Promise 인스턴스를 반환하게되고 성공 or 실패 두가지만 확인한다.
3가지 state 존재 (pending(대기), fulfilled(이행), Rejected(실패))

비동기 처리를 다른곳에서 하고싶으면 프로미스 객체를 넘기기만 하면된다.(마치 호출기를 다른사람에게 주듯)

        // 콜백만 적용

        function getData(callbackFunc) { 
        $.get('url 주소/products/1', function (response) 
                    { callbackFunc(response);
                    // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 
        }); }

        getData(function (tableData) { 
                    console.log(tableData); // $.get()의 response 값이 tableData에 전달됨 
                    });

        // 프로미스 적용

        function getData(callback) {

        // new Promise() 추가

         return new Promise(function (resolve, reject) { // 성공 아니면 실패

        $.get('url 주소/products/1', function (response) {
            // 데이터를 받으면 resolve() 호출 
        resolve(response); }); }); }

        // getData()의 실행이 끝나면 호출되는 then()
        getData().then(function (tableData) { // resolve()의 결과 값이 여기로 전달됨
                console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
         });

resolve() 실행시 프로미스의 state가 fullfilled가 되고 then()을 통해 처리 결과 값을 받을 수 있다.
reject() 실행시 프로미스의 state가 rejected가 되고 catch()를 통해 에러 값을 받을수 있다
fetch 실행시 성공 실패 여부에 따라 Promise 실행하고 그에따라 then 이나 catch로 실행된다

Symbol

내부 key 값 걱정없이 추가 프로퍼티를 만들수 있는 고유의 값 만들 때 이용
객체 프로퍼티 키 일 수도 있다
Symbol로 추가하면 이름 충돌 걱정 하지않고 새 속성 계속 추가가능

        var includes = Symbol('즐거운 자바스크립트');
        // Symbol은 객체는 아니다

        Array.prototype[includes] = function () {
          return console.log('its Symbol');
        }

        var arr = [1, 2, 3];
        arr.includes(1); // true
        arr['includes'](1); // true
        // arr 기본 메서드 동작
        arr[includes](); // its Symbol // Symbol('즐거운 자바스크립트'); 가 Key로 들어감
        // 충돌하지 않고 Symbol객체로 만든 key 동작

갑자기 prototype에 같은 이름을 가지는 함수가 새 ES 버전에 생기는 문제 피할 수 있다 → name 충돌방지

well-known Symbol 통해 core method 접근 가능
- 자바스크립트는 자동으로 몇몇 Symbol 변수를 생성하고 global Symbol 객체에 할당한다
- “well-known” global symbols 는 Symbol.match Symbol.replace Symbol.search Symbol.iterator Symbol.split 등등 이 있다.

            'hyunwoo'.search(/woo/); // 4

            // 실행시 'hyunwoo'가 String 객체로 변환되고 내부의 search 메서드가
            // Symbol.search메서드에 접근

참고글

자바스크립트는 어떻게 작동하는가: 이벤트 루프와 비동기 프로그래밍의 부상, async/await을 이용한 코딩 팁 다섯 가지

자바스크립트 개발자라면 알아야 할 33가지 개념 #10 스케쥴링: setTimeout 과 setInterval

Callback이 뭐죠?

콜백

What is a Promise?

자바스크립트 프라미스: 소개 | Web Fundamentals | Google Developers

[Javascript] Symbol 에 대해서