제너레이터를 만나고 새 삶을 얻었어요

name: inverse
layout: true
class: center, middle, inverse
---

<h1 class="huge">
제너레이터를 만나고 새 삶을 얻었어요
</h1>

JavaScript의 generator와 co, koajs
김용균 (@haruair)이상한모임 / Kobe Creations

---

사실은 다른 발표 주제를 하려고 했는데
시간 내에 마무리 하기 어려울 것 같아서

---

그래도 이거 편합니다. 써보세요.
몸에 매우 좋은 약

---

비동기

---

흐름 제어?

---

콜백 그냥커피

---

(아니 콜백이 그냥 커피라고?)
---

콜백 그냥커피

---

콜백 그냥커피

프로미스 티*피

---

프로미스, 만족하십니까?

---

프로미스 티*피

---

프로미스 티*피

제너레이터 네*프레소

---

---
class:force-left

```js
var edward = new User({name: 'edward'});

model.saveUser(edward, (err, user) => {
  if(err) return console.error(err);
  console.log(user.name);
});
```
---
class:force-left

```js
var edward = new User({name: 'edward'});

model.saveUser(edward)
  .then(user => {
    console.log(user.name);
  }).catch(err => {
    console.error(err);
  });
```

---

프로미스 짱짱맨!

---

중첩 콜백에서 탈출!

순차/병렬 순서 맘대로!

예외 처리!

---

그런데 저는,

---

![](http://i.giphy.com/3oEdv4iluiAidsJCda.gif)

---

이상하게도 프로미스랑 영 친해지지 못했음

나만 프로미스 축제에 끼지 못한 느낌

---

* 지극히 개인적인 감상입니다.

---

코드가 여전히 눈에 잘 들어오지 않는다...

업그레이드된 jQuery?

차라리 콜백이 읽기 쉽다...

---

다시 콜백 예제

---
class:force-left

마음이 다 편해지는(?) 콜백 코드

```js
UserModel.getUserByName('edward', (err, user) => {
  if(err) return console.error(err);
  if(user) {
    user.nickname = 'Koala';
    user.save();
  }
});
```

---

이렇게 쓸 수 없습니까?

---
class:force-left

이런 느낌으로

```js
var user = UserModel.getUserByName('Edward');

if(user) {
  console.log(user.name);

user.nickname = 'Koala';
  user.save();

console.log(user.nickname);
}
```
---

잠깐만요?

---

비동기에서 무슨 짓을?

이러면 에러 안나나요?

---

제너레이터는 다르다

---

제너레이터는 다르다!

---

![](http://i.giphy.com/l41lVmZT2rFeSLBXW.gif)

---

class:force-left

물론 조오금 다릅니다. `yield`

```js
var user = yield UserModel.getUserByName('Edward');

if(user) {
  console.log(user.name);

user.nickname = 'Koala';
  yield user.save();

console.log(user.nickname);
}
```

---

---

<h2 class="huge">
제너레이터
</h2>
Generator

---

제너레이터는 이름대로
함수를 생성해주는 함수

---

무슨 함수를 생성해주나?

---

여러번 반복해서 호출할 수 있는,
일종의 iterator

`Symbol.iterator` mdn.io/Symbol.iterator

---

`next()`로 호출할 때마다 
상태 `done`와 값 `value`을 반환

---

class:force-left

하나 봅시다.

```js
function* Say() {
  yield "안녕하세요";
  yield "저는";
  yield "코알라입니다";
}
```

---
class:force-left

호출을 해봅시다.

```js
var say = Say();

say.next(); // {value: "안녕하세요", done: false}
say.next(); // {value: "저는", done: false}
say.next(); // {value: "코알라입니다", done: false}
say.next(); // {value: undefined, done: true}
```

---

아... 제너레이터는 중간에 결과를 반환했다가 
다시 호출하면 반환한 곳부터 시작하는구나...

---
class:force-left

`name`은 어떻게 값을 받아올까?

```js
function* Realworld() {
  let name = yield 'name?';
  console.log("Hello", name);
}
```

---
class:force-left

`next()`의 인자로 반환하면 배정됨을 확인

```js
var world = Realworld();
world.next(); // {value: "name?", done: false}
world.next("Edward"); // `name`에 값을 반환
// "Hello Edward"
```

---

아... 제너레이터는 문맥으로 다시 돌아갈 때 
<code>next()</code>의 인자로 값을 배정할 수 있구나...

---

이게 제너레이터의 전부입니다.

---

이걸 비동기에서 어떻게 써먹을 수 있을까?

---

---
class:force-left

1. 제너레이터로 이터레이터 생성
2. 이터레이터를 실행
3. `done === false`가 반환되면
 1. `value`로 반환된 함수를 실행한 후에
 2. `next()`로 값을 반환하고 다시 원래 맥락으로 돌아가서 코드를 진행
 3. goto 2
4. `done === true`면 종료

---

아... 제너레이터는 뭔가 복잡하지만

비동기에서 사용할 방법이 있긴 있나보구나

---

class:force-left

다시 빠르게 잘 봅시다.

1. 제너레이터로 이터레이터 생성
2. 이터레이터를 실행
3. `done === false`가 반환되면
 1. `value`로 반환된 어찌되었든 비동기 함수를 실행한 후에 콜백? 프로미스?
 2. 결과가 비동기로 돌아오면
 3. `next()`로 그 값을 반환하고 다시 원래 맥락으로 돌아가서 코드를 진행
 4. goto 2
4. `done === true`면 종료

---

아... 비동기에서 써먹으려면 앞에서 본 로직처럼

뭔가 부수적인 처리가 필요하겠구나

---

그럼 제너레이터 기본 동작은 아니네요?
앞서 로직을 모두 구현해야 비동기 쓰나요?

---

존잘님이 다 만들어 두셨습니다.

---

제너레이터 문법을 사용할 수 있는 control flow

tj/co

github.com/tj/co

---

내부적으로 프로미스를 사용해서 구현되어 있음

---

프로미스로 외쳐<code>Yield</code>!!

그럼 알아서 처리해줄게!!

---

간단 예제

---
class:force-left

흔한 프로미스

```js
var fetch = require('node-fetch');

function getUser(username) {
  return fetch(`https://api.github.com/users/${username}`)
      .then(res => res.json())
      .then(user => !user.message ? user : null);
}
```

---
class:force-left

프라미씽합니까?

```js
getUser('haruair')
  .then(user => {
    console.log(user.login, user.html_url);
  });
```

---
class:force-left

`co`를 사용하면 이렇습니다.

```js
var co = require('co');

co(function *(){
  let user = yield getUser('haruair'); 
  console.log(user.login, user.html_url);
});
```

---

<code>.catch()</code>는 어떻게?

---
class:force-left

프로미스의 에러 핸들링을 위한 체이닝

```js
getUser('haruair')
  .then(user => {
    if(user == null) console.log('user not exists');
    else console.log(user.login, user.html_url);
  })
  .catch(err => {
    console.error(err.stack);
  });
```

대신에...

---
class:force-left

`try ... catch`를 사용

```js
co(function *(){

let user;

try {
    user = yield getUser('haruair');
  } catch (err) {
    console.error(err.stack);
  }

if(user == null) console.log('user not exists');
  else console.log(user.login, user.html_url);

});
```

---

깔끔한가요?

---

저만 깔끔한가요? ㅠㅠ

---

co 기반으로 만든

koa.js

github.com/koajs/koa

---

웹 프레임워크?

---

웹 프레임워크?
HTTP 미들웨어!

---

가볍다,
쉽다,
간단하다

---

그래서 쿨해요.

---

앞에서 본 co랑 비슷한데
약간 웹을 위한 양념이 있습니다

---
class:force-left

`koa`의 Hello World

```js
var koa = require('koa');
var app = koa();

app.use(function *() {
  this.body = {message: 'Hello World'};
});

app.listen(process.env.PORT || 3000);
```

---

빠른 데모

---

*

---

빠른 정리

---
class:force-left

- 제너레이터와 이터레이터
- 문법
- 프로미스와 제너레이터 문법을 사용할 수 있는 co
 - 비슷한 task.js
- co로 만들어진 HTTP 미들웨어 koajs
- one more thing...

---

근미래

---

제너레이터 네*프레소

---

제너레이터 네*프레소

async/await 초고급커피

---

ES7에 제안된

async/await

---
class:force-left

generator + `co`

```js
var co = require('co');

co(function*() {
  var user = yield getUser('edward');
  console.log(user.username);
});
```
---
class:force-left

`async` / `await`

```js
async function Hello() {
  var user = await getUser('edward');
  console.log(user.username);
}

Hello();
```

---

koa도 다음 버전에서 <code>async</code> / <code>await</code> 적용 예정

---

멋진 기능을 기대하며
발표는 여기까지

---

더 재미있는 개발이 되었으면 좋겠습니다

발표 내용은 github.com/haruair/emocon-2016SS-generator 에서
---

질문이 있다면 망설이지 마세요

---

<div>
 감사합니다

김용균이상한모임 / Kobe Creations
 <div>트위터 @haruair</div>
 <div>웹 haruair.com</div>
</div>