Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript에서의 비동기 반복기
Search
Jin
July 26, 2018
Programming
1
170
JavaScript에서의 비동기 반복기
Jin
July 26, 2018
Tweet
Share
More Decks by Jin
See All by Jin
토스의 마이크로프론트엔드 아키텍처, 그리고 자동화
raon0211
5
8.3k
Other Decks in Programming
See All in Programming
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
690
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
技術同人誌をMCP Serverにしてみた
74th
1
640
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
610
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
85
28k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A better future with KSS
kneath
238
17k
Facilitating Awesome Meetings
lara
54
6.4k
Optimizing for Happiness
mojombo
379
70k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Adopting Sorbet at Scale
ufuk
77
9.5k
Unsuck your backbone
ammeep
671
58k
Faster Mobile Websites
deanohume
307
31k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Transcript
JavaScript에서의 비동기 반복기 Seoul.js Lightning Talk, 2018. 7. 26. (금)
박서진
발표자 소개 박서진 Suhjin Park Ø Viva Republica (Toss) Ø
JavaScript, Scala Ø 표현적인 언어, 함수형 프로그래밍 Ø 디자인, 수학, 외국어 raon0211
[email protected]
https://suhj.in 2 JavaScript에서의비동기반복기
선행 지식 3 JavaScript에서의비동기반복기 Ø 동기/비동기 작업 (Synchronous/Asynchronous Operations) Ø
반복기(Iterator), 심볼(Symbol)
동기 작업, “Blocking” 4 JavaScript에서의비동기반복기
동기 작업으로 처리해서는 안 되는 것 5 JavaScript에서의비동기반복기 Ø 병행
처리 (Concurrency) Ø DB 읽기/쓰기, 파일 읽기/쓰기와 같은 무거운 작업 Ø 웹 프론트엔드 애플리케이션에서 무거운 작업 수행
비동기 작업 6 JavaScript에서의비동기반복기 Ø 사용자 JavaScript 코드는 싱글 스레드
Ø 무거운 작업을 순차적으로 작업 큐(Queue)에 삽입 Ø 작업이 완료되면 콜백 함수(완료 핸들러)가 실행 Ø setTimeout
손쉽게 구현하는 비동기 작업 7 JavaScript에서의비동기반복기 3,000+개 객체의 검색을 수행하여야
한다. Ø 무거운 작업을 1개의 검색으로 쪼갬 Ø 첫 번째 검색을 작업 큐에 넣음 Ø 하나의 객체에 대해 검색이 완료되면, 다음 객체의 검색을 작업 큐에 넣음 Ø 모든 객체의 검색이 완료되면 결괏값과 함께 콜백 함수를 실행 Ø 하나의 검색 사이사이에 다른 작업을 수행할 수 있음. PROFIT!
손쉽게 구현하는 비동기 작업 (코드) 8 JavaScript에서의비동기반복기
Promise 9 JavaScript에서의비동기반복기 Ø 비동기와 병행 처리를 위해 특화된 JavaScript의
일부분 Ø 값과 상태를 가지고 있음 Ø 비동기적으로 처리되는 값에 접근하는 방법 Ø 아무 의식 없이 사용하는 “모나드”: 작업을 우아하게 연쇄 처리할 수 있음 Ø 함수가 아니라 값 (*틀림: 10개의 Promise를 실행해라)
Promise의 상태 10 JavaScript에서의비동기반복기 Ø 작업 중(Pending), 완료(Fulfilled), 실패(Rejected/Cancelled) Ø
Promise가 완료되거나 실패하면 다시는 상태가 변경되지 않음 Ø 각종 런타임 오류에 대해 안전해짐 Ø Callback을 받는 함수를 손쉽게 Promise를 반환하는 함수로 변경 가능 Ø Native Promise, Bluebird
JavaScript에서의비동기반복기 Callback 함수에서 Promise를 반환하는 함수로 11
JavaScript에서의비동기반복기 오류 처리와 체이닝 12
JavaScript에서의비동기반복기 async/await 13 Ø ECMAScript의 새 키워드 Ø Promise 체이닝을
더 읽기 쉽게 만들어 줌, Syntactic Sugar Ø C#, F#, Dart, Python… Ø 여전히 비동기이고 이벤트가 바탕
JavaScript에서의비동기반복기 async/await 14
JavaScript에서의비동기반복기 반복기(Iterator) 15 Ø for … of 루프의 핵심 Ø
next(value) 메서드가 { value: any; done: boolean; }을 반환하면 반복기 Ø 한 번에 하나씩, 무한 길이도 가능 Ø ECMAScript 6의 function*
JavaScript에서의비동기반복기 반복기(Iterator) 16
JavaScript에서의비동기반복기 비동기 반복기(Async Iterator) 17 Ø 반복기가 Promise를 반환하면 비동기
반복기! Ø Rx 없이도 쉽게 반응형 프로그래밍이 가능해진다
JavaScript에서의비동기반복기 이벤트를 Promise로 변환 18
JavaScript에서의비동기반복기 이벤트를 비동기 반복기로 변환 19
JavaScript에서의비동기반복기 손쉬운 naïve 자동 완성! 20
감사합니다 JavaScript에서의 비동기 반복기 참고: “Why Async Iterators Matter”, Benjamin
Gruenbaum