티스토리 뷰

PDR Tech log

Generator 와 Async 코드 이해하기

PDR 비비로그 2016. 12. 22. 17:16

Node에서 Generator를 사용해서 파일을 읽어오고, 그 내용을 콘솔로그로 보여주는 코드입니다. 코드의 목적도 간결하고 꽤 잘알려져 있는 코드입니다. 이 코드를 이해 하고 있으면 Generator 를 사용해 Async 동작을 콘트롤 하는데 응용하기 좋습니다.



먼저, 위의 코드를 이해 하기 위해서는 아래 두가지를 이해 하고 있어야 합니다.


  0. ES6 Generator 의 기본동작 이해.

  1. Generator 에서 next() 콜시에 파라미터를 넘겼을 때 의 동작.


우리는 당신이 Generator의 기본동작은 이해 하고 있다고 생각하고 설명을 시작하겠습니다. 그럼, 1번 내용을 샘플코드와 함께 이해 해 보도록 하겠습니다.  generator.next(parameter) 와 같은 형식의 next() call이 이루어졌을 때 어떻게 동작을 하는지 이해 하기 위한 샘플코드 입니다. 



위의 결과는 순서대로 다음과 같습니다. 


{ value: 6, done: false }

{ value: 8, done: false }

{ value: 42, done: true }


이해가 되시나요? 위의 결과가 이해 되신 다면 본 코드를 천천히 분석하시면 됩니다. 잘 이해가 안되시는 경우를 위해 설명을 드리겠습니다.  코드상에서 yield의 왼쪽과 오른쪽을 구별해서 이해 하시는게 좋습니다. 오른쪽의 코드는 value 부분을 담당합니다. 이 부분은 이해 하는데 별 어려움이 없으실 겁니다. it.next(12) 와 같이 next가 call 된 경우는 parameter ( 이 경우는 12) 가 yield의 왼쪽에 assign되게 됩니다. 그래서 var y = 2 * (yield (x + 1)); 의 경우는 5+1 = 6 이 value 로 assign 되고, it.next(12) 가 call 되면 2*12 가 되고 y 는 24가 assign 되게 됩니다. 


다시 정리하면 returnValue = yield expression; 에서 returnValue 는 next(parameter); 와 같이 next가 콜 된경우 parameter 값이 전달되고 value 는 expression 의 결과가 저장되게 됩니다.


위에 설명한 내용을 바탕으로 차근차근히 코드를 분석하시면 금방 이해 하실 수 있을 겁니다. Good Luck~!


- by Jake -

댓글
댓글쓰기 폼