<div id="readability-page-1" class="page"><div>
<pre><code>const infinity = (function*() {
    let i = 0;
    while(true) yield i++;
})

console.log(infinity.next())</code></pre>
<p>yield를 이용하면 블록을 중간에 끊어주는 효과가 발생 =&gt; JS에서는 하나의 문들을 Record로 만들어 주고, 해당 레코드를 실행 할지 말지를 결정 하게 됨. </p>
<p>suspension, generator, command pattern등 여러 가지 개념들이 설명 되어 나오는데, 각각을 잘 이해하는게 중요하다. </p>
<h2>gererator + async + executor</h2>
<p>generator =&gt; 흐름을 멈춰준다. </p>
<pre><code>const profile = function*(end, next, r) {
    const userid = yield $.post('member.php', {r}, next);
    let added = yield $.post('detail.php', {userid}, next);
    added = added.split(",");
    end({userid, nick: added[0], thumb:added[1]});
};

const executor = (end, gene, ...arg) =&gt; {
    const next = v =&gt; iter.next(v);
    const iter = gene(end, next, ...arg);
    iter.next();
};

executor(console.log, profile, 123);</code></pre>
<p>위 코드 이해하는 것... 어렵.. </p>
<p><code>executor()</code> 함수가 호출 될 경우 -&gt; next가 선언 되고, 해당 iter에서 실행 되면, profile 제너레이터의 첫번째에서 흐름이 중단 됨. </p>
<p>그게 바로 <code>const userid = yield $.post('member.php', {r}, next);</code> 이 부분이다. </p>
<p>그리고, <code>const next = v=&gt; iter.next(v);</code> 이 코드에서 member.php 비동기 호출에서 응답 값인 id가 const userid = 값으로 전달 되고, 멈춰졌던 흐름이 다음 라인으로 이동 됨.</p>
<p>즉, executor 함수를 분리 해놓음으로써 profile 함수만 관리하면 됨.. 이와 유사하게 ko library라는게 있다고 한다. </p>
<p>위와 같은 방식을 generator의 coroutine pattern이라고 부른다고 함. </p>
<h2>passive async controll</h2>
<p>콜백을 보낼 수는 있지만, 언제 올지는 모른다. </p>
<pre><code>$.post(url, data, e =&gt; {
    // ? 언제 오는가?
})</code></pre>
<pre><code>let result; 
$.post(url1, data1, v =&gt; {
     result = v; 
})

$.post(url2, data2, v =&gt; {
    result.nick = v.nick
    report(result)
})
</code></pre>
<h2>active async controll</h2>
<p>promise는 then을 호출해야 결과를 얻는다. </p>
<pre><code>let result;
const promise = new Promise(r =&gt; $.post(url1, data1, r))
promise.then(v =&gt; {
    result = v;
})

const promise1 = new Promise(r=&gt;$.post(url1, data1, r));
const promise2 = new Promise(r=&gt;$.post(url2, data2, r));
promise1.then(result =&gt; {
    promise2.then(v=&gt; {
    result.nick = v.nick;
    report(result);
    });
});</code></pre>
<h3>generator + promise</h3>
<pre><code>const profile = function*(end, r) {
    const userid = yield new Promise(res =&gt; $.post('member.php', {r}, res));
    let added = yield new Promise(res =&gt; $.post('detail.php', {userid}, res));
    added = added.split(",");
    end({userid, nick: added[0], thumb:added[1]});
};

const executor = (end, gene, ...arg) =&gt; {
    const iter = gene(end, ...arg);
    const next = ({value, done}) =&gt; {
        if (!done) value.then(v=&gt; next(iter.next(v)));
    }
    next(iter.next());
};

executor(console.log, profile, 123);</code></pre>
<h2>async / await</h2>
<p>C#에서 JS로 넘어온 패러다임 </p>
<pre><code>const profile = async function(end, r) {
    const userid = await new Promise(res =&gt; $.post('member.php', {r}, res));
    let added = await new Promise(res =&gt; $.post('detail.php', {userid}, res));
    added = added.split(",");
    end({userid, nick: added[0], thumb:added[1]});
};

profile(console.log, 123);</code></pre>
<p>결국에 코드를 보면, 위에서 generator + promise 방식이나 async/await 방식이나 같다. 다만, 단점은 위 코드는 async에서만 yield가 된다. 응? 즉, 비동기일때만 위 코드에서 흐름이 suspension이 된다는 말이고, 동기인 경우 이를테면, while문에서는 안됨... </p>
<p>그럼 사실 generator + promise 방식의 코드가 더 낫다. 동기 비동기 모두 yield가 가능하다. 그런데, es8에서부터 async generator가 생겼다. </p>
<p>ref. <a href="https://ko.javascript.info/async-iterators-generators#ref-1893">https://ko.javascript.info/async-iterators-generators#ref-1893</a></p>
<p>위 페이지 끝장나게 번역 잘되어 있다. </p>
            
</div></div>

Seungdols Company

seungdols

Generator const infinity = (function*() { let i = 0; while(true) yield i++; }) console.log(infinity.next()) yield를 이용하면 블록을 중간에 끊어주는 효과가 발생 => JS에서는 하나의 문들을 Record로 만들어 주고, 해당 레코드를 실행 할지 말지를 결정 하게 됨. suspension, generator, command pattern등 여러 가지 개념들이 설명..

코드스피츠 77 - ES6+ 기초편 6회차 (Generator, Promise, Async/Await)

댓글