๊ธฐ๋ณธ์ ์ธ callbag ํฉํ ๋ฆฌ์ ์คํผ๋ ์ดํฐ๋ค์ ์ ๊ณตํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
callbag-basics ์ callbag ์ด๋ผ๋ ๋ช ์ธ๋ฅผ ๋ฐ๋ฅด๋ ํจ์๋ค์ ๊ตฌํํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์.
Callbag ์ ๋ง์ด์ฃ ..:
- ์คํธ๋ฆผ์ ํตํ ๋ฆฌ์กํฐ๋ธ ํ๋ก๊ทธ๋๋ฐ์ ์ง์ํด์.
- Iterable ์ ์ด์ฉํ ํ๋ก๊ทธ๋๋ฐ์ ์ง์ํด์. (์๋ ๋ค์ด์์!)
- ๋ชจ๋ ์คํผ๋ ์ดํฐ๊ฐ ์ ๋๊ฐ์ง ์ฌํญ์ ์ง์ํด์.
- ์์์! ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํฌ๊ธฐ๋ ๊ณ ์ 7kB ์์.
- ๋นจ๋ผ์! xstream ๊ณผ RxJS ๋ณด๋ค ๋นจ๋ผ์.
- ํ์ฅ ๊ฐ๋ฅ์ฑ: ์ฝ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ด์! ๋ชจ๋ ๊ฒ ์ ํธ๋ฆฌํฐ ํจ์์์!
Observable ๊ณผ (๋น๋๊ธฐ)Iterable์ด ํฉ์ณ์ง๋ ๊ฑธ ์์ํด๋ณด์ธ์. ๊ทธ๊ฒ ๋ฐ๋ก callbag ์ด์์. ์, ๊ทธ๋ฆฌ๊ณ ํ๋ ๋!, callbag ์ ๋ด๋ถ๋ ์ ๋ง ์์ ์ ๋ฐ์ ์์ด์. ์๋ํ๋ฉด ๋ชจ๋ ๊ฑธ ๋ช ๊ฐ์ ๊ฐ๋จํ ์ฝ๋ฐฑ์ผ๋ก ํด๋ด๊ธฐ ๋๋ฌธ์ด์ฃ ! ๊ฒฐ๊ณผ์ ์ผ๋ก callbag ๋ช ์ธ๋ฅผ ๋ฐ๋ผ ํ๋ก๊ทธ๋๋ฐ์ ํ๋ ๊ฒ์ ์๊ณ ๋น ๋ฅธ ํ๋ก๊ทธ๋จ์ ๋ง๋๋ ๋ฐ ๋์์ด ๋์.
npm install callbag-basics
ํฉํ ๋ฆฌ์ ์คํผ๋ ์ดํฐ๋ ๋ค์๊ณผ ๊ฐ์ด ๋ถ๋ฌ์์:
const {forEach, fromIter, map, filter, pipe} = require('callbag-basics');
<button>
์๋ฆฌ๋จผํธ์ ํด๋ฆญ ์ด๋ฒคํธ์์ XY ์ขํ๋ฅผ ๋ก๊น
ํ๊ธฐ:
Log XY coordinates of click events on <button>
elements:
const {forEach, fromEvent, map, filter, pipe} = require('callbag-basics');
pipe(
fromEvent(document, 'click'),
filter(ev => ev.target.tagName === 'BUTTON'),
map(ev => ({x: ev.clientX, y: ev.clientY})),
forEach(coords => console.log(coords))
);
// {x: 110, y: 581}
// {x: 295, y: 1128}
// ...
๋งค ์ด๋ง๋ค ํ๋์ ์์ฐ์๋ฅผ ์ฐ์ฐํ์ฌ, ์ด 5๊ฐ์ ๊ฐ์ฅ ์์ ํ์๋ฅผ ์ป๊ธฐ:
const {forEach, interval, map, filter, take, pipe} = require('callbag-basics');
pipe(
interval(1000),
map(x => x + 1),
filter(x => x % 2),
take(5),
forEach(x => console.log(x))
);
// 1
// 3
// 5
// 7
// 9
์ซ์๋ค์ ์ด์์, 5๊ฐ์ ์ซ์๋ฅผ ๋ฝ๊ณ , ๋ฝ์ ์ซ์๋ค์ 4๋ก ๋๋ ํ ํ๋์ฉ ์ถ๋ ฅํ๊ธฐ:
const {forEach, fromIter, take, map, pipe} = require('callbag-basics');
function* range(from, to) {
let i = from;
while (i <= to) {
yield i;
i++;
}
}
pipe(
fromIter(range(40, 99)), // 40, 41, 42, 43, 44, 45, 46, ...
take(5), // 40, 41, 42, 43, 44
map(x => x / 4), // 10, 10.25, 10.5, 10.75, 11
forEach(x => console.log(x))
);
// 10
// 10.25
// 10.5
// 10.75
// 11
์๋์ ๋ฆฌ์คํธ์ ์๋ ํจ์๋ค์ callbag-basics
๊ฐ ์ ๊ณตํ๊ณ ์์ด์.
- source: ๋ฐ์ดํฐ๋ฅผ ๋ฐ์กํ๋ callbag
- sink: ๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ callbag
- puller sink: source ์๊ฒ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์กํ๊ธฐ๋ฅผ ์๊ตฌํ๋ sink
- pullable source: ๋ฐ์ดํฐ๋ฅผ ๋ฐ์กํ๊ธฐ๋ฅผ ์๊ตฌ๋ฐ์์ผ์ง๋ง ๋ฐ์ดํฐ๋ฅผ ๋ฐ์กํ๋ source
- listener sink: ์๋์ ์ผ๋ก source ๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ sink
- listenable source: ์๋ฐ์ ์ผ๋ก sink ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ์กํ๋ source
- operator: ๋ค๋ฅธ callbag ์ ํน์ ์ฐ์ฐ์ ์ ์ฉํ๋ callbag
The Callbag philosophy is: build it yourself. :) You can send pull requests, but even better, don't depend on the repo owner accepting it. Just fork the project, customize it as you wish, and publish your fork on npm. As long as it follows the callbag spec, everything will be interoperable! :)